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
2k
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
エアドロップ for オープンソースプロジェクト
epicsdao
0
380
Airdrop for Open Source Projects
epicsdao
0
630
Deep Neural Networkの共同学習
hf149
0
120
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
390
20230121_BuriKaigi
oyakata2438
0
180
PCI DSS に準拠したシステム開発
yutadayo
0
310
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
170
あつめたデータをどう扱うか
skrb
2
150
「一通りできるようになった」その先の話
hitomi___kt
0
120
OpenShiftのリリースノートを整理してみた
loftkun
2
320
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
150
re:Invent2022 前後の Amazon EventBridge のアップデートを踏まえつつ、情シスの仕事をより楽しくしたい話。 / EventBridge for Information Systems Department
_kensh
2
700
Featured
See All Featured
Designing with Data
zakiwarfel
91
4.2k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
We Have a Design System, Now What?
morganepeng
37
5.9k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
Product Roadmaps are Hard
iamctodd
38
7.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Ruby is Unlike a Banana
tanoku
93
9.5k
Making Projects Easy
brettharned
102
4.8k
Web development in the modern age
philhawksworth
197
9.6k
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 |