Creating an always up to date map

posted in: Use The Map | 12

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 download/copy as umap remote data url.
  4. Paste the copied text in to a notepad and add “http://overpass-api.de/api/interpreter?data=” without quotes before it.
    1. 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;
  5. Now navigate to umap.openstreetmap.fr or one of the alternate instances listed here.
  6. Click Create a map and pan/zoom in to the area of interest.
  7. 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.
  8. 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.
  9. Click More on the left hand side, followed by Embed and share this map.
  10. 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.

12 Responses

  1. DaCor

    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?

    • RobJN

      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.

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

  3. marco

    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… ?

  4. joost

    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.

    • Andres

      Hi Joost,

      Im quite newbie in this fascinating universe, so take my advices with care, but seems to me thar cachin data to not stress server is as easy as switching it on on umap remote data options.

      You will find as CACHE PROXIED REQUEST, is the last option within REMOTE DATA section

  5. Bibi

    @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!

  6. derFred

    Hi Rob,
    1. FlexiRentjet from June 6, 2019 is SPAM
    2. your description doesn’t work anymore – do you have an idea what to change?

  7. RobJN

    I have been informed that the instructions can now be vastly simplified. On the Overpass-Turbo side, go to Export > Query > copy as umap remote data url . The URL should then simply work as a remote data URL in umap.

    I haven’t looked at this yet to confirm or update the article.

Leave a Reply to RobJN Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.