OpenStreetMap

Creating a map with markers imported from OpenStreetMap

Posted by wille on 7 November 2013 in English (English)

I've mapped the bicycle sharing stations of Salvador (Bahia, Brazil) and I would like to show these stations on a map. When there was only five stations I created manually a GeoJSON file using geojson.io and it generated a map to embed in a page. But now there is 19 sharing stations! It would be a lot of repeated work to map the stations on OSM and after create the geojson manually.

So I discovered the osmfilter, a useful software to filter OSM data. Combining osmfilter and geojson.io you can extract data from OSM and show that information on a personalized map. So let's go to the instructions.

JOSM and a big part of the data of Salvador

The first step is to download the OSM data from the region you want. On my case, I used JOSM to download all the data of the city and saved the .osm file on my disk.

Now we need to use osmfilter to extract the desired data from the osm file. Access the page osmfilter in the OpenStreetMap wiki to see the installation instructions. The command I used to filter only the bicycle sharing stations was:

./osmfilter salvador.osm --keep="amenity=bicycle_rental" > bikesalvador.osm

You can combine more than one filter, for example if you want to filter all the italian restaurants you would use --keep="amenity=restaurant and cuisine=italian". The last part of the command is the file to where you want to save the filtered data.

Now go to geojson.io, click on the button "Open" and import the osm file generated by osmfilter.

geojson.io interface

You will see all the data you filtered including the metadata. If some metadata isn't important to you, you can drop one or more columns. You will need an account on GitHub to save your geojson. After save, GitHub will give you a gist page of your geojson including a embed code that you can use to put the map on another webpage.

Image of the result map of geojson.io

See the page with the interactive map generated by geojson.io.

If you want to learn how to add a GeoJSON layer to Leaflet, I recommend that tutorial by Lyzi Diamond.

Location: Ondina, Salvador, BA, Brazil

Comment from Vincent de Phily on 7 November 2013 at 10:14

Nice howto, thanks :)

Hide this comment

Comment from malenki on 8 November 2013 at 17:14

Instead of downloading all data of the region you could just download amenity=bicycle_rental via the Overpass API using the mirrored download plugin with JOSM.

Or go all the way with the Overpass API and use it to display the query like here: http://overpass-turbo.eu/s/1rl
(hopefully you aren't too disappointed that you can get a result similar to yours with one minute's work equivalent)

Hide this comment

Comment from wille on 11 November 2013 at 02:06

Thank you, malenki!

One of the aims of this blog post was to discover new ways to do that. Overpass turbo is great!!!

Hide this comment

Comment from sabas88 on 25 November 2013 at 09:56

Also Overpass Turbo can export to geojson.io via a gist :-)

Hide this comment

Comment from Dotevo on 10 December 2013 at 09:04

I'm using overpass api for http://gdzie.bl.ee/index.php#!17/51.10972/17.03158/

I will upload source code to github today.

Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

    [Text](URL)
  • Image

    ![Alt text](URL)

Login to leave a comment