We previously showed how to create a simple map of pubs using Overpass to extract data from OpenStreetMap and uMap to display the data on a simple zoomable map. In this short update we show how to manipulate the data so that all pubs are shown as points of interest rather than a mixture of points and polygons.

This update article follows on directly from our previous article on creating an always up to date map using Overpass to extract data from OpenStreetMap and uMap to display the data on a simple zoomable map. We encourage you to read that earlier article before proceeding. In the comments I noted that I did not like how some of the data was shown as points, whilst the rest of the data was shown as polygons. Thanks to Martin Raifer (osmtogeojson) and Yohan Boniface (uMap) we can now fix that problem!

It turns out that Overpass was already able to return the centroids of polygons via use of the center output, however uMap did not yet understand the outputs. Being open source data I requested that the functionality be added to uMap. This meant first adding the functionality to osmtogeojson, the data library that uMap uses to understand OpenStreetMap data. This was achieved within a matter of days and following a quick update to uMap we’re all set to go. Let see how it works:

• We follow the same steps as per our earlier article. Read more here.
• At step 5 we use the following adjusted Overpass data call instead (note the “center” part that requests centroid data from OpenStreetMap):
  http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];node[“amenity”=”pub”]({south},{west},{north},{east});out qt;way[“amenity”=”pub”]({south},{west},{north},{east});out body center;>;out skel qt;

It’s as simple as that! Let see the result:

We think it looks great, and a lot more consistent than the mixed point and polygon map.

Update: Pop-up data

I have been asked to show how to add pop-up data to the map points. This obviously requires the data to already exist in OpenStreetMap. Assuming it does it simple to add this data:

1. In uMap click the layers button (just under +/- ) and then click Edit (the pencil symbol).
2. In the right hand pane scroll down to the Popup content template section of the Advanced Options.
3. To add the pubs name and address to the pop-up simply edit this text box to include the following (based on the OpenStreetMap tags):
   # {name}
   {addr:street}
   {addr:city}

Note that only a few pubs are tagged with their full address in Stratford-upon-Avon so you may have to click on a few on the map above before you get a pop-up with all this data shown.

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.

Often we just want to produce a simple map showing data as a collection of pins (map markers). In this post we look at two tools that both use OpenStreetMap base maps; namely geojson.io and uMap. These are both potential alternatives to Google Maps Engine and Fusion Tables. 

OpenStreetMap has come a long way in the last 10 years; we’ve reached 1.7 million registered users, over 300,000 of whom are the last editor an an object in OpenStreetMap, and we’ve contributed over 2.4 billion nodes (points) and 248 million ways (linear features). This has led to OpenStreetMap being deployed by large companies such as Apple, Mapquest and Foursquare, and relief organisations such as Médecins Sans Frontières.

However when it comes to individuals – including those who associate themselves with the Open Source or Open Data communities – many people stick with what they know. More often that not that’s Google. OpenStreetMap is quite different; as it’s not a traditional company, most of the interesting stuff is going on outside of the core openstreetmap.org website. Let’s look at two online tools that use OpenStreetMap for the base map display.

Geojson.io

Geojson.io describes itself as “a quick, simple tool for creating, viewing, and sharing map”. It has a strong focus on input/output (io) as it supports major formats such GeoJSON, KML, GPX, CSV, TopoJSON, amongst other formats listed on the OpenStreetMap wiki. The inputs can be from a file, from a GitHub (including Gist snippets) or added manually via the website’s user interface. The final map can be exported to file, to GitHub or shared as an embeddable iframe or as a standalone URL. Visual customisation is limited to a choice of three map backgrounds.

Example:

In this example I have a geojson file of pubs in and around Stratford-upon-Avon. All the data is as points (nodes) and I want to produce a simple map to display in this blog post. Using geojson.io the steps are:

1. Go to geojson.io.
2. Click Open and load the source file. The map data can then be edited in the right hand pane (I used the table edit to drop some columns)
3. Pick a map background from the choice of Mapbox, Satellite and default OSM from the options in the bottom left.
4. Click Share and copy and paste the embeddable iframe.

Here is the result:

Quick, simple and effective.

uMap

Similar to geojson.io above, uMap describes itself as a way to “create maps with OpenStreetMap layers in a minute and embed them in your site”. It supports a number of import formats including geojson, csv, kml and also allows you to draw content directly on the map. On the export side, you can download the map data in three different file formats, or share it via an embeddable iframe or stand alone URL. Unlike geojson.io, uMap has numerous customisation options, for example you can pick from 16 map backgrounds, map data can be styled with a colour, fill opacity and line type, and the popup content can be adjusted to display additional information such as images and web links. uMap also enables you to easily work collaboratively on a map. This flexibility does however make the user interface more complicated than geojson.io’s.

Example:

This example uses a file of school locations in and around Lichfield. Most of the data is stored as polygons, however it also include point data. As before the aim is to produce a simple map to display in this blog post. Using uMap the steps are:

1. Go to umap.openstreetmap.fr or one of the alternate instances listed here.
2. Click Create a map.
3. Click Import data (the up arrow icon on the right or keyboard shortcut Ctrl+I).
4. Customise using the options on the right. Here I’ve changed the map background to MapQuest Open.
5. Click More on the left hand side, followed by Embed and share this map.
6. Copy and paste the embeddable iframe (I also had to click Current view instead of deafult map view in the iframe options box.

Here’s the result from uMap:

Advanced, customisable, and featureful.

Tell us what you think

Have a go and let us know what you think. How do they compare with what is available from Google or others, and what would make them better. Drop us a line in the comment box below or via our twitter account, @mappamercia.