Insert a map on your website
Warning ! When you insert a Trace de Trail map on your website, you agree not to hide any element of the module (links to Trail Trail or Trail Connect banner).
How it works ?
To display a map on your website, Trace de Trail provides you two differents tools
- a webpage that you can use inside an iframe html tag.
To get the code to insert on your website, go to the page of your track.
Display in iframe
To get this code, you must go to your track page and open the More tools block. Then choose the layer that you want to display according to the location of your track.
You also need to choose the height and width of the iframe on your website. These dimensions can be easily modified in the code that you will copy.
All you have to do is copy this code and paste it into the html page of your website.
To use some layers, you will need an access key. To get it, go to your profile (Menu / My Info) : you will find tutorials to get these access keys.
Only specific pages whose URL is provided by Trace de Trail can be inserted on your website. You can not load another page of the site (the home page or the page of your track for example)
You can change the style of your track and profile from the track page and save it (More Tools / Save the style of my track) : this style will also be used for the page on your website.
This option is only available to Trailer Ultra (general public) or Premium + (professional) subscribers. It allows you to better manage Trace de Trail map integration within your website.
You must add two tags to your web page:
- a tag that will contain the widget (usually a div tag) and referenced by the identifier "widgetTdt"
<div id="widgetTdt" data-trace=63002 data-layer="osm" data-lang="fr" data-code=212328></div>
The div tag must contain several attributes: to get the code, the operation is the same as for the iframe.
The attributes that must contain the div tag are:
- data-trace : it's the track number
- data-layer : it's the names of the base layer you want to display
- data-lang : fr or en
- data-code : it's a personnal access code
- data-key : This parameter is optional, it allows to provide a map access key if necessary. If this key is not provided but needed, the widget will use the key specified on your profile (Menu / My Informations)
You can only insert one widget per webpage!