How to Map Where You’ve Mapped in OpenStreetMap

April 16 2012 by Chad Lawlis

Over the last month we’ve been tracing satellite imagery in OpenStreetMap, most recently the Sahel region of West Africa and Brasilia. A major focus throughout the process has been on how best to analyze and fix OpenStreetMap data to make it the best world map available, including ways to track your own contributions. Here’s a quick step-by-step tutorial on how to visualize the areas of the world that you have mapped on OpenStreetMap, like we have in the example below. If you want to get involved in improving OpenStreetMap, check out our public issue tracker.

Our team’s contributions to Burkina Faso

Tools to start visualizing

Before getting started, you’ll want to be familiar with OpenStreetMap’s open source desktop editor JOSM and the process of tracing satellite imagery. Then to begin download the region you want to visualize and save the layer as an .osm file.

Next you need to convert this OSM file to GeoJSON format for styling in TileMill, which will require installing Python 2.7 if you don’t have it. To do this Tom wrote a python script that outputs each node as a geo-referenced point along with the user associated and a timestamp marking when it was created.

from xml.etree.ElementTree import ElementTree
from datetime import datetime
import time
from sys import argv
import json
tree = ElementTree()

if (len(argv) < 3):
    print "specify an input & output filename, and year. input is osm, output is geojson"
    exit()

tree.parse(argv[1])

geojson = { "type": "FeatureCollection", "features": [] }

nodeidx = {}

print 'mapping nodes'

for n in tree.iterfind('node'):
    if (n.attrib.has_key('user')):
        pt = {
            "type": "Feature",
            "geometry": {
                "type": 'Point',
                "coordinates": [float(n.attrib['lon']), float(n.attrib['lat'])]
            },
            "properties": {
                "user": n.attrib['user'],
                "version": n.attrib['version'],
                "timestamp": time.mktime(datetime.strptime(n.attrib['timestamp'], '%Y-%m-%dT%H:%M:%SZ').utctimetuple())
            }
        }
        geojson['features'].append(pt)

json.dump(geojson, open(argv[2], 'w'))

Copy and paste this code into a text editor and save the file as converts-times.py to the same directory housing your OSM file. Then navigate to this directory in terminal and run the following command:

python converts-times.py ouagadougou.osm ougadougou-time.json

This will output the oouagadougou-time.json file in the same directory. Now you are ready to import into TileMill. In TileMill create a new project and navigate to the layer list in the toolbar to add a layer.

In the Datasource browser navigate to your .json file, give it an ID, and save the layer.

Styling in TileMill

Now comes the fun part - styling your visualization. For our purposes, we wanted to gauge the progress being made in the regions we were mapping while also providing the context to allow viewers to locate where they are in the world. With that in mind, we went with a dark gray marker fill for the layer as a whole, while styling each individual user differently with bright colors to make their contributions pop.

Style.mss

Map { background-color:#000; }

#countries {
  line-color:#fff;
  line-join:round;
  line-width:0.5;
  }

@blue: #00aacc;
@magenta: #ff0094;
@green: #0F0;
@red: #fc0303;
@yellow: #FF0;
@grey: #2d2c2c;

#ouagadougou {
  marker-width:1;
  marker-line-opacity:0;
  marker-allow-overlap:true;
  marker-fill:@grey;
  [timestamp >= 1330581600] [version = '1'] {
  [user = 'Chad Lawlis'] { marker-fill: @magenta;} 
  [user = 'Rub21'] { marker-fill: @blue;}
  [user = 'Dan Wood'] {marker-fill: @yellow;}
  [user = 'mayar'] {marker-fill: @green;}
  }
}

We also wanted to limit points for each user to only nodes created (excluding nodes altered or tagged) to provide the most honest representation of OSM growth, while limiting individual contributions by date added. We went with all nodes created on or after March 1, 2012, using the unix timestamp 1330581600, which you can convert with any time stamp translator online.

With a bit of html/css in the legend, you are ready to export the visualization. Navigate to Export in the main toolbar and select PNG.

Hold shift while dragging over the area you wish to export, enter the file size and name, and select export.

Once the file has uploaded, hit save. You now have a visualization of where you have mapped in OpenStreetMap.

Remember to include OSM attribution where appropriate, and be sure to check out our public issue tracker for OpenStreetMap contributions if you are looking to get involved.