So, I have started running with the Zombies, Run! 5k training app which is excellent, and their own tracklog map is great, here’s an example. But they have the option of downloading the tracklogs as .gpx files, and that made me want a personal map to see all my tracklogs on the same map. And I wanted to add some of Stamen Design’s beautiful map designs. This is not very hard, but I still want to share how to do this in case someone wants a similar map.
The different map styles I have for my map, from top left going clockwise: Stamen watercolour, Stamen toner, OpenStreetMap CycleMap and Mapnik (the normal Openstreetmap).
The OpenStreetMap wiki has a good article on how to make this kind of map, and my map is based on that code. So I will not go into the details on how to to make the html file. To get the Stamen layers in my map I found the necessary pieces of code here. If you look at the sourcecode of my map (right click, view sourcecode if you didn’t know how to find it) you will see the code below (but not this nice looking, this is from the editor). I added the stamen layers before the OpenStreetMap layers since I wanted the watercolour to be the default layer of my map.
After adding the two Stamen layers I uploaded the .gpx tracks to my hosting area and gave them all a simple name (Run1, Run2, Run3 and so on). In the html file I then just had to link to each .gpx file and change the name of the file, like in this example:
In this example, you see that I named the track April 1 2014 (this name shows up in the layer selection box) and changed the url to Run6.gpx. The .gpx files obviously have to be in the same folder as the html file for this to work. This piece of code was then copied for each tracklog and changed to fit each track. The style of each track can be changed by changing the style attributes (strokeColor, strokeWidth, strokeOpacity).
The layer selection box of the finished map.
The size of the map can be changed with the width and height code on the bottom of the html file. To make my map more personal I added a title and reused a css file I had. For this map the css file only gives the map page a coloured background and a black border around the map, but the html and css files can be changed to get many different styles, or more text around the map for explanations. Here the possibilities are endless. Happy mapping, and feel free to comment if you make yor own map, I always like to see maps and trips done by others.