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:
- Go to geojson.io.
- 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)
- Pick a map background from the choice of Mapbox, Satellite and default OSM from the options in the bottom left.
- 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:
- Go to umap.openstreetmap.fr or one of the alternate instances listed here.
- Click Create a map.
- Click Import data (the up arrow icon on the right or keyboard shortcut Ctrl+I).
- Customise using the options on the right. Here I’ve changed the map background to MapQuest Open.
- Click More on the left hand side, followed by Embed and share this map.
- 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.
RobJN
Good timing. A “What’s new in uMap” post is available at: http://www.openstreetmap.org/user/ybon/diary/23611
One of my favourite maps from this is a brilliant storymap (slideshow map) as demoed at:
http://umap.openstreetmap.fr/en/map/reconstitution-de-laffaire-alexandre-junca_11107
Stéphane
Briliant! Thank you so much for this post! I consider myself an OSM enthusiast but didn’t know of any of those!
Excited to play around with those two amazing tool 🙂
Keep up the great work!
Linhares
You are right. Many people stick to Google when it really comes to using the map.
It’s been some time that I’m using uMap to plot some riding tracklogs. And more recently I’ve migrate to a brazilian alternative: http://www.mapascoletivos.com.br/
RobJN
@Linhares: Oh that looks good. Is there a version in English?
Rob Norris
It might be handy to explain exactly how you got the source data into the formats used.
It could be as simple as a simple OverPass query, but it would be good to illustrate the full cycle of:
Planet OSM Data -> Data Extract -> Data Usage.
Cheers.
RobJN
Thanks Rob. I’ve covered how to extract data from OpenStreetMap using overpass turbo in the past so wanted to keep this post focused on producing the map (the overlay data could come from anywhere). There’s a follow up post planned where I will show how to link uMap to Overpass so that your map is always up to date with what’s in OpenStreetMap. Hopefully this should answer your question. 🙂
Jamesy
Hi there! I invite you to try http://gpx2kml.com/, a free and easy to use converter tool that easily make gpx to kml format and the other way around, when you need it. It worked for me, see if it helps for you too.
Robertf
Your example for Geojson.io doesn’t show up for me. I see ‘Firefox prevented this page from loading in this way because the page has a content security policy that disallows it.’ Do you know what that’s about? Thanks.
Dan Jacobson
In chromium I just see a blank area where the Geojson.io example is.
timtak (Timothy Takemoto)
I wonder if one can download ones own instance of uMap and host it on ones server, since for one thing, the french instance is saying that it is impermanent and slow.
I can’t see the Geojson.io example and the uMap version is not showing the tiles (Map) to me so it is just the map that I think you created, on a blank background.
Stefan Keller (@sfkeller)
Yes, you can run your own instance of uMap.
There are instances run by other OSM chapters.
See:
* Info https://wiki.openstreetmap.org/wiki/UMap
* Installation: https://github.com/umap-project/umap
* Mailinglist / Support: https://lists.openstreetmap.org/listinfo/umap