Leaflet: Web Maps for Better Cities

Transcript

1. WEB MAPS FOR BETTER CITIES Aaron Ogle | @atogle |

2. leafletjs.com SIMPLICITY PERFORMANCE USABILITY

3. leafletjs.com/reference.html

4. LEAFLET AT OPENPLANS

5. https://github.com/atogle/maptoolbox/

6. https://github.com/openplans/shareabouts

7. https://github.com/atogle/pointillist/

8. https://github.com/atogle/pointillist/

9. https://github.com/openplans/argo/

10. https://github.com/openplans/argo/ var options = { id: 'trafficspeeds', url: 'data/trafficspeeds.json', type:

    'json', popupContent: '{{WDAV}} mph', rules: [ { condition: '{{WDAV}} <= 5', style: {color: '#fe6565', weight: 4, opacity: 0.9} }, { condition: '{{WDAV}} > 5 && {{WDAV}} < 15', style: {color: '#fedf65', weight: 4, opacity: 0.9} }, { condition: '{{WDAV}} >= 15', style: {color: '#65c165', weight: 4, opacity: 0.9} } ] }; L.argo(options.url, options).addTo(map);

11. https://github.com/openplans/Leaflet.AnimatedMarker/

12. https://github.com/openplans/Leaflet.AnimatedMarker/ var routeLines = [ L.polyline([[40.6851, -73.9413],[40.68570, -73.9414], ...]), L.polyline([[40.7327,

    -73.9981],[40.73261, -73.9982], ...]), L.polyline([[40.7202, -74.0000],[40.72043, -73.9998], ...]) ], i, marker; for(i=0; i<routeLines.length; i++) { marker = L.animatedMarker(routeLines[i].getLatLngs(), { icon: bikeIcon, autoStart: true }); map.addLayer(marker); });

13. https://github.com/atogle/walkshed.js

14. http://metro.teczno.com/

15. https://github.com/atogle/walkshed.js

16. http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

17. https://github.com/atogle/tile-stitcher.js var ts = tileStitcher('src/tiles/{z}/{x}/{y}.png'); ts.stitch(19084, 24821, 19085, 24822, 16,

    function(stitchedCanvas){ console.log(stitchedCanvas); });

18. http://webhelp.esri.com/arcgisdesktop/9.3/index.cfm?TopicName=Cost %20Distance%20algorithm

19. https://github.com/atogle/costdistance.js var cd = costDistance(), costRaster = [ [1, 3,

    4, 4, 3, 2], [4, 6, 2, 3, 7, 6], [5, 8, 7, 5, 5, 6], [1, 4, 5, cd.NODATA, 5, 1], [4, 7, 5, cd.NODATA, 2, 6], [1, 2, 2, 1, 3, 4] ], sourceRaster = [ [0, 1, 1, 0, 0, 0], [0, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0] ], cdRaster = cd.calculate(costRaster, sourceRaster);

20. https://github.com/atogle/walkshed.js

21. WEB MAPS FOR BETTER CITIES Aaron Ogle | @atogle |