Open Source Bridge '14
OpenStreetMap Workshop
Sample code for understanding OpenStreetMap data use.
Process
-
Go to the Overpass Turbo tool, which lets you easily query the live OSM database and export to a variety of formats.
-
Navigate the map to Portland, Oregon using the search field in the top-left of the map.
-
Start with the default query or paste this one in:
<query type="node"> <has-kv k="amenity" v="drinking_water"/> <bbox-query {{bbox}}/> </query> <print/>
Then click Run. The query will show drinking fountains (
amenity=drinking_water
) on the map. -
Click the Export button, choose GeoJSON as the format, and copy and paste the text into the
index.html
file source at the appropriate place. -
Open the
index.html
file in your web browser. This file uses Mapbox.js, a plugin for Leaflet, to load a default basemap with JavaScript, then to add the drinking fountain data as styled markers on top. You can click the markers to open popups with basic info and a link to see the individual node on OSM. -
Start experimenting with different queries, styling, and features!
Next Steps
-
Consider changing the type of feature on the map. You could query for streets and add them as polylines or for buildings and add them as polygons.
-
You could signup for a free Mapbox account and then create a custom basemap style. You'll obtain a map ID which you can use in the
L.mapbox.map()
call inindex.html
. -
Try some other Leaflet and Mapbox.js APIs to do new and different things with your queried OSM data.