Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Leaflet: Web Maps for Better Cities
Aaron Ogle
January 14, 2013
Technology
6
1.8k
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
Share
Other Decks in Technology
See All in Technology
kilometer
0
150
koba789
0
460
yosshi_
3
370
mukai21
2
410
kenya888
1
140
kekeke_47
0
450
miura55
0
110
ryusa
2
350
shirayanagiryuji
0
2.2k
yunon_phys
1
440
hisaichi5518
0
200
keiya01
20
7.9k
Featured
See All Featured
bermonpainter
342
26k
jonrohan
1021
380k
thoeni
4
550
shlominoach
176
7.4k
michaelherold
225
8.5k
iamctodd
17
1.9k
roundedbygravity
84
7.8k
kneath
219
15k
robhawkes
52
2.8k
sugarenia
233
840k
chriscoyier
684
180k
62gerente
587
200k
Transcript
WEB MAPS FOR BETTER CITIES Aaron Ogle | @atogle |
leafletjs.com SIMPLICITY PERFORMANCE USABILITY
leafletjs.com/reference.html
LEAFLET AT OPENPLANS
https://github.com/atogle/maptoolbox/
https://github.com/openplans/shareabouts
https://github.com/atogle/pointillist/
https://github.com/atogle/pointillist/
https://github.com/openplans/argo/
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);
https://github.com/openplans/Leaflet.AnimatedMarker/
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); });
https://github.com/atogle/walkshed.js
http://metro.teczno.com/
https://github.com/atogle/walkshed.js
http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
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); });
http://webhelp.esri.com/arcgisdesktop/9.3/index.cfm?TopicName=Cost %20Distance%20algorithm
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);
https://github.com/atogle/walkshed.js
WEB MAPS FOR BETTER CITIES Aaron Ogle | @atogle |