geographic data and leaflet.js

21
Geographic Data and Leaflet.js Fall 2015 hack@uchicago Hackathon

Upload: justin-manley

Post on 08-Jul-2015

456 views

Category:

Software


2 download

DESCRIPTION

Learn about geographic data and web mapping using the Leaflet.JS library. From a talk given at the Fall 2014 hack@uchicago Hackathon given at the UChicago Computation Institute.

TRANSCRIPT

Page 1: Geographic Data and Leaflet.js

Geographic Data and Leaflet.jsFall 2015 hack@uchicago Hackathon

Page 2: Geographic Data and Leaflet.js

Web mapping toolsdemocratize spatial

knowledge

Page 3: Geographic Data and Leaflet.js

WhereWeWalkhttps://github.com/manleyjster/wherewewalk

Page 4: Geographic Data and Leaflet.js
Page 5: Geographic Data and Leaflet.js
Page 6: Geographic Data and Leaflet.js

LargeLots.comhttp://largelots.org/

http://datamade.com/

Page 7: Geographic Data and Leaflet.js
Page 8: Geographic Data and Leaflet.js

MapKnitterhttp://mapknitter.org/

https://github.com/publiclab/mapknitter

Page 9: Geographic Data and Leaflet.js

“Maps are often used by those in power to exert influence over territory, or control territorial narratives. "Grassroots mapping" attempts to invert this dynamic by using maps as a mode of communication and as evidence for an alternative, community-owned definition of a territory.”

http://publiclab.org/wiki/balloon-mapping

Page 10: Geographic Data and Leaflet.js
Page 11: Geographic Data and Leaflet.js
Page 13: Geographic Data and Leaflet.js

Other cool projects

⬝ http://mapmill.org/ - Crowdsourced aerial image processing

⬝ http://www.geograph.org.uk/ - Aims to collect geographically representative photos for every km² in Britain and Ireland

⬝ http://hot.openstreetmap.org/ - OpenStreetMap Humanitarian

Page 14: Geographic Data and Leaflet.js

In the wild today:Leaflet*mapbox.js*Google Maps JavaScript APIArcGIS API for JavaScriptOpenLayers*d3*mapbox-gl-js*

Page 15: Geographic Data and Leaflet.js

Challenges in web mapping

⬝ Creating and acquiring map tiles.⬝ Getting data into the browser.⬝ Rendering large vector data sets.

Page 16: Geographic Data and Leaflet.js

What’s cool about Leaflet?

⬝ Easy to add custom map tiles and data sets⬝ Supports mobile devices⬝ Fast!⬝ Open source⬝ Good maintainers and active development

community

Page 17: Geographic Data and Leaflet.js

Useful tools for geospatial analysis

⬝ GDAL (Geospatial Data Abstraction Library)⬝ includes command line tool ogr2ogr, useful for

converting between vector formats.⬝ QGIS

⬝ Full-featured GIS software with GUI

Page 18: Geographic Data and Leaflet.js

Try it out

1 git clone https://github.com/manleyjster/gentrifoo2 cd gentrifoo3 npm install4 git checkout -b <your-name>5 npm start

Chicago Data Portal - Building Footprints Data Sethttp://bit.ly/1Bsoyaf

Page 19: Geographic Data and Leaflet.js

+ ++Building footprints

Bin building stories by census tract

Bin building construction year by census tract

Page 20: Geographic Data and Leaflet.js

Add something

1. Add a panel to the map to show additional data from the GeoJSON file when the user hovers over a census tract.

2. Add a slider so that the user can advance time forwards and backwards. 3. Improve the property deterioration model - make the condition of

properties in each census tract depend on the conditions in neighboring census tracts. (Make use of the spatial indexing of the RTree that is built in to the GentrificationModel).

http://leafletjs.com/reference.html

Page 21: Geographic Data and Leaflet.js

justinmanley.io@outoftheyards

Justin [email protected]