Open Source Bridge '14

OpenStreetMap Workshop

Sample code for understanding OpenStreetMap data use.

Process

1. Go to the Overpass Turbo tool, which lets you easily query the live OSM database and export to a variety of formats.

2. Navigate the map to Portland, Oregon using the search field in the top-left of the map.

3. 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.

   

4. 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.

   

5. 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.

   

6. Start experimenting with different queries, styling, and features!

Next Steps

1. 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.

2. 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 in index.html.

   

3. Try some other Leaflet and Mapbox.js APIs to do new and different things with your queried OSM data.