Tweet
Tweet

Slide 1

Slide 1 text

WEB MAPS FOR BETTER CITIES Aaron Ogle | @atogle |

Slide 2

Slide 2 text

leafletjs.com SIMPLICITY PERFORMANCE USABILITY

Slide 3

Slide 3 text

leafletjs.com/reference.html

Slide 4

Slide 4 text

LEAFLET AT OPENPLANS

Slide 5

Slide 5 text

https://github.com/atogle/maptoolbox/

Slide 6

Slide 6 text

https://github.com/openplans/shareabouts

Slide 7

Slide 7 text

https://github.com/atogle/pointillist/

Slide 8

Slide 8 text

https://github.com/atogle/pointillist/

Slide 9

Slide 9 text

https://github.com/openplans/argo/

Slide 10

Slide 10 text

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);

Slide 11

Slide 11 text

https://github.com/openplans/Leaflet.AnimatedMarker/

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

https://github.com/atogle/walkshed.js

Slide 14

Slide 14 text

http://metro.teczno.com/

Slide 15

Slide 15 text

https://github.com/atogle/walkshed.js

Slide 16

Slide 16 text

http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

Slide 17

Slide 17 text

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); });

Slide 18

Slide 18 text

http://webhelp.esri.com/arcgisdesktop/9.3/index.cfm?TopicName=Cost %20Distance%20algorithm

Slide 19

Slide 19 text

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);

Slide 20

Slide 20 text

https://github.com/atogle/walkshed.js

Slide 21

Slide 21 text

WEB MAPS FOR BETTER CITIES Aaron Ogle | @atogle |