Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leaflet: Web Maps for Better Cities

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.

Aaron Ogle

January 14, 2013
Tweet

Other Decks in Technology

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 |