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).

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.
  • a javascript widget for a better insertion on your website
To get the code to insert on your website, go to the page of your track.
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 script tag that references the javascript file located on the Trace de Trail server
    <script src="" type="text/javascript"></script>
  • 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!

Log in !

Forgotten password ?
Vous possédez un compte avec une connexion Facebook ou Apple ? Utilisez la fonctionnalité "Mot de passe oublié" pour basculer sur un compte classique.
Create an account