Creating an always up to date map

posted in: Use The Map | 9

In the previous post we showed that creating a map to show location data as a collection of pins (map markers) is easy using OpenStreetMap tools. But what if we wanted to keep that map up to date? In this article we’ll show how we keep our pubs map always up to date.

The landscape around is is always changing. Sometimes the changes are big and obvious, for example a new housing development, but changes can also be as subtle as a change in shop name. OpenStreetMap, which is commonly referred to as the wikipedia of maps, provides map data collected by a community of mappers. It emphasises local knowledge, with contributors keeping their local area up to date on the map. It is therefore the perfect source not only for the background base map, but also for the data we display on top of the base map.

Contributors use aerial imagery, GPS devices, and low-tech field maps to verify that OSM is accurate and up to date.

In the previous post we saw how uMap could be used to display map data in just the same way as Google Maps Engine/Fusion Tables. We have also previously seen how we can use Overpass to download data from OpenStreetMap. The uMap tool lets us link to Overpass to produce an always up to date map. Lets see how:

Map tutorial

Pubs are currently closing at a rate of 31 per week (source). Lets update our pubs map so that it’s automatically kept up to date by local OpenStreetMap contributors. As a secondary benefit the map will now work globally rather than just for Stratford-upon-Avon and surrounding land.

  1. Head to overpass-turbo.eu.
  2. Click Wizard and search for amenity=pub (learn about OpenStreetMap tags here)
  3. Click Export, Query, and then compact.
  4. Copy the query link as text and paste into a text editor (e.g. notepad). If you use the “copy link” feature of your browser you may first have to decode the URL by pasting in here and clicking Decode before copying to output to a text editor.
  5. Next we need to take this text and generalise it to work on any map area:
    1. Add “http://overpass-api.de/api/interpreter?data=” without quotes before the copied text.
    2. Replace the hard coded latitude and longitude coordinates with “({south},{west},{north},{east})” without quotes. This will need to be done three times; after node[“amenity”=”pub”], way[“amenity”=”pub”], and relation[“amenity”=”pub”].
    3. The final result should look like:
      http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];(node[“amenity”=”pub”]({south},{west},{north},{east});way[“amenity”=”pub”]({south},{west},{north},{east});relation[“amenity”=”pub”]({south},{west},{north},{east}););out body;>;out skel qt;
  6. Now navigate to umap.openstreetmap.fr or one of the alternate instances listed here.
  7. Click Create a map and pan/zoom in to the area of interest.
  8. Click the layers button (just under the +/- buttons) and then click Edit (the pencil symbol).
    1. In the right hand pane click Remote data and paste the URL we constructed in step 5 into the Url box.
    2. Select “osm” from the drop down Format list.
    3. Tick the dynamic checkbox.
    4. Optional: If you have a lot of data you may want to limit the display to certain zoom levels (so as to not put too much strain on the Overpass servers). You can do this by entering a min zoom level in the From Zoom box. Here I have entered 13 as my minimal zoom level.
  9. Customise using the options on the right. Here I’ve changed the map background to OSM monochrome and changed the colour of the overlay data.
  10. Click More on the left hand side, followed by Embed and share this map.
  11. Copy and paste the embeddable iframe (I also had to click Current view instead of default map view in the iframe options box.

The resulting map is shown below:


View full screen

Inspired to create your own map? Let us know what you make by posting a comment below or tweeting us on @mappamercia.

9 Responses

  1. One of the things I don’t like is that some data is shown as POI’s whilst other data is as polygons. I’ve raised a request on uMap to add an option to show all data as POI’s. It turns out that Overpass can export the required data, we just need to get this supported in a library that uMap uses. Watch this space :-)

    https://bitbucket.org/yohanboniface/umap/issue/108/display-ways-polygons-as-nodes-points

  2. Fantastic guide. I created a map for bike parking using your directions

    http://u.osmfr.org/m/16656/

    However, I’ve been unable to pull in more data for the pins, for example, the capacity, covered yes/no etc.

    Do you know if its possible to do this through overpass and uMap?

    • Yes I think it’s possible. I’ll have a look next week and get back to you. I also need to update this post as the polygon centre feature has now been added to uMap :-)

    • Andy Robinson

      Take a look at http://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide which explains the process of making more complex queries of the overpass api.

      For example, instead of the very simple syntax of the query that Rob used, ie: node[“amenity”=”pub”] your bicycle node example might look something like:

      <query type="node">
      <has-kv k="bicycle_parking" v=""/>
      <has-kv k="covered" v="yes"/>
      <bbox-query {{bbox}}/>
      </query>

      Which when compacted to a QL format and the bbox defined would create:

      http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];(node(node["bicycle_parking"]["covered"="yes"]({south},{west},{north},{east}););out body;>;out skel qt;

      This will get you any bike parking type nodes which are covered. You can then place these on the map in one colour for instance compared with those that are uncovered (by simply adding an additional overpass query that has the alternative covered=no attribute to a new layer in uMap).

      Additional data (tag information) that is returned by the api can also be added as description information to the umap popup boxes. You might for instance add the capacity attribute to display by default or when the icon is clicked to show the popup.

      The combination of Overpass and uMap and similar facilities is the real power behind OSM, offering huge potential for almost anyone to create bespoke maps.

  3. Rob Norris

    On the subject of pubs closing (or indeed for many POIs), it would be useful to note how one would mark a pub closed – i.e. by following the ‘disused:x’ lifecycle scheme.

    Such that an amenity=pub -> disused:amenity=pub

    See http://wiki.openstreetmap.org/wiki/Disused for further detail.

    Perhaps someone might want to adjust the tags for an ex pub in your area very near to your example on the A3400 North out of Stratford-Upon-Avon 😉

    http://www.openstreetmap.org/way/158021422

  4. I’m trying to send overpass-turbo query result to umap via direct link, i get no error but also no data:

    http://umap.openstreetmap.fr/it/map/new/?http://overpass-api.de/api/interpreter?data=%5Bout:json%5D%5Btimeout:25%5D;area(3600043144)-&gt;.searchArea;(node[“amenity”=”office”](area.searchArea);way[“amenity”=”office”](area.searchArea);relation[“amenity”=”office”](area.searchArea););out body;>;out skel qt;&dataFormat=osm

    Any suggestion… ?

  5. I’m amazed by how simple it is to create a map with these instructions. I’d made a query showing paved main roads on Overpass before (http://overpass-turbo.eu/s/7q8), and it took me minutes to turn it into a nice umap. Unfortunately, it seems to be a bit too heavy on either umap, overpass or my bad internet connection. It would be nice to be able to cache this data (which is a lot of course) to a umap server and just have it update itself from time to time.

  6. @RobJN
    (September 15, 2014) it’s a bit old, but…
    You can request the overpass-api to return centers instead of polygons too. It makes more sense if you just need the centroid to return the centroid instead of the polygon add request uMap to do the job.
    Yes Yohan did a great job!

Leave a Reply