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:
<iframe src="https://rejo.zenger.nl/topo/osm/?fn=[url-of-track]" width="[width-of-embedded-image]" height="[height-of-embedded-image]" frameborder="0"> </iframe>
The “url-of-track” should be a direct link to your GPX or KML file. For example:
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|
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.
If you have any comments, feel free to send me an e-mail.