Embedding an OSM map with your track in web page

Afbeelding: Map of Whales van Ceridwen | Licentie: CC BY-NC

You have probably used Google Maps before to render a track on top of a map or the satelite imagery. And possibly, embed this on your webpage. An easy way to do this with Openstreetmap is missing. Here it is.

Just provide the link

Or at least, I was unaware of it. To embed an Openstreetmap slippy map with your GPX or KML file in your web page, all you have to do is to include the following snippet:


The “url-of-track” should be a direct link to your GPX or KML file. For example:


That’s all!

Customizing the layout of the track

You may add some variables to the URL which adjust the rendering of the GPX track on the Openstreetmap. The following are available:

sc the color of the track, by default this is red
sw the width of the track, by default this is 5
so the opacity of the track, by default this is 0.6


By adding “&sc=black&sw=10&so=0.4” you would set the track to appear as a thick black and highly transparant, where the default is a medium thick, red and half-transparant line.

Don’t forget to mention the license

The maps from Openstreetmap are published under the BY-SA license of Creative Commons. If you embed a map from Openstreetmap, make sure you adhere to this license. It should suffice to mention the map source and the license. All maps that are using the above script, have automagically added such a notification.

Things to note

The files with the tracks are cached. So, if you have just downloaded a track, it may take some time before the changes will appear on the embedded image. Keep in mind, this services runs on my private server. No guarantees of any kind.

For this moment, only *.gpx and *.kml files are supported and only the layout of GPX tracks may be changed. In due time, you will be able to change the appearance of the controls, the type of maps that are shown and other customisations as well.

The lack of an easy way to embed an OSM map with a track from my GPS is why this is here. Here are the basics.

If you have any comments, feel free to send me an e-mail.