Leaflet: Web Maps for Better Cities

014d6cc1d23aabe73823903434e52120?s=47 Aaron Ogle
January 14, 2013

Leaflet: Web Maps for Better Cities

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

014d6cc1d23aabe73823903434e52120?s=128

Aaron Ogle

January 14, 2013
Tweet

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 |