This is a map of 2 years running around Washington DC with RunKeeper.

I always wanted to make a [heat]map with all my tracks. I finally got some time to play with TileMill and Mapbox to make it. The map above is the result, and these are the steps to make your own:

1. Run a few routes :)
2. Get your data from RunKeeper.
3. Import in TileMile
4. Style at will.
5. Use Mapbox for hosting and base layer.

Get your data

Click on “export data” link under Settings page in RunKeeper. Select the dates, you might want all your data so just select a wide range. You´ll get the link on your email in a few minutes.

Import your tracks into TileMile

You need first to export the gpx tracks into a Shapefile. I got some help from the awesome people at Mapbox and it turns to be as simple as:

 ogr2ogr runs first-track.gpx

Then append the rest of the files in the folder:

#!/bin/bash
directory=gpx/
for file in $( ls $directory )
do
ogr2ogr -append runs $directory$file
done

You will have new folder that contains shapefiles with tracks for each race, and also another shapefile with all measured positions (trackpoints). I´ll only use the tracks.

In TileMill (available for free here) create a new project. Then click on add layer, select the shapefile with the tracks, and click “style and save”.

Style at will.

My idea here was to create a heatmap for the routes. The closest thing I could think in TileMill is to style the tracks with a wide and very transparent trace. E.g. with a transparency of 0.2 you need 5 tracks to get a completely opaque trace.

You can, and should (it´s fun!) play with the styles. I ended up styling them as blood arteries, with a green shade around. Zoomed out you get the heatmap idea, and if you zoom in, you can see all the individual tracks. This gives a funny highway aspects to places I tend to use a lot. Here is the style I used:

#tracks::extraglow[zoom <8] {
line-width:5;
line-color:#0c7205;
line-opacity:1;
line-smooth:0;
}
#tracks::extraglow[zoom >8] {
line-width:13;
line-color:#0c7205;
line-opacity:0.18;
line-smooth:0.6;
}
#tracks::glow {
line-width:5;
line-color:#ffce09;
line-opacity:0.4;
}
#tracks::base {
line-width:1;
line-color:#fd0505;
line-opacity:0.6;
}

The trick to add more than one styling to the track is to use :: like in track::glow

Note that I am not putting any base map. The reason is that I want to add one of the basemaps MapBox provides. More on this later. While styling you might want to add some background, you can do that activating the MapBox streets layer plugin (under settings) or adding a quick style only while you play with the styling:

@base: #ffffff;
Map { background-color:@base; }

To activate the tooltip when you put the mouse over the track, you need to go to the “Templates” tab (the icon with the hand), then “Teaser”. Use the drop-down menu to select the only layer (“tracks”) as the source of data and, under Content write the text. In my case I just use the name column in the shapefiles: }

Use Mapbox for hosting and base layer.

Once styled, it´s very easy to host this layer online with MapBox. I´ll also use Mapbox to add a nice base map.

To upload it, you need to authenticate with MapBox under Setting in TileMill.

Once done, you only need to Click on Export -> Upload. In the setting window select the area you want to render tiles, the center by default and available zoom levels. The bigger the area, and the smaller the zoom level, the longer it will take to process. Areas scale exponentially, so keep it small.

Once finished, you can see it on your MapBox Account. Make a New Map, and click on Add a New Layer to add you track´s layer.

For the base map, MapBox offers quite some options. My idea here was something plain, to let the heatmap shine, so I chose “Light”. You can still style the color palette at will to get exactly what you want, and even add markers if you want.

Last step, once saved, it´s to embed it. You only need to click on the share button.

If you end up making a map with your runs, please send over a link, it´d be great to see it.

Happy styling!