Leaflet: Web Maps for Better Cities

Overview of Leaflet and how we apply it at OpenPlans, presented at JS.Geo 2013.

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 |