Insérer une carte sur votre site web
Attention ! En insérant une carte Trace de Trail sur votre site web, vous vous engagez à ne masquer aucun élément du module (liens vers Trace de Trail ou bannière Trail Connect), que ce soit en utilisant l'iframe ou le widget.
Comment ça marche ?
Pour afficher votre trace sur votre site web, Trace de Trail vous met à disposition deux outils différents :
- une page web que vous pourrez utiliser à l'intérieur d'une balise html iframe
- un widget javascript qui vous permet de mieux maîtriser l'insertion sur votre site web
Pour récupérer le code à insérer sur votre site web, rendez-vous sur la page de votre trace.
Affichage en Iframe
Pour récupérer code, vous devez vous rendre sur la page de la trace, puis ouvrir le bloc Plus d'outils. Choisissez alors le fond de carte que vous souhaitez afficher en fonction de la localisation de votre parcours.
Il vous faut également choisir la hauteur et la largeur du bloc iframe sur votre site web. Ces dimensions pourront être facilement modifiées dans le code que vous allez obtenir.
Il ne vous reste plus qu'à copier ce code pour le coller dans la page html de votre site web.
Pour utiliser certaines cartes, vous aurez besoin d'obtenur une clé d'accès. Pour cela rendez vous sur votre profil (Menu/Mes Infos) : vous y trouverez des tutoriels pour obtenir ces clés d'accès.
Seules des pages spécifiques dont l'url est fourni par Trace de Trail peuvent être insérées sur votre site web dans une balise iframe. Vous ne pouvez pas charger une autre page du site (la page d'accueil ou la page de votre trace par exemple)
Vous pouvez modifier l'apparence de votre trace et de son profil depuis la page de votre trace et l'enregistrer (Plus d'outils/Sauvegarder le style de ma trace). Ainsi, ce style sera également utilisé pour l'affichage sur votre site web.
Affichage avec le widget javascript
Cette option n'est accessible qu'aux abonnés Trailer Ultra (grand public) ou Premium + (professionnels). Elle permet de mieux gérer l'intégration de la carte Trace de Trail au sein de votre site web.
Vous devez pour cela ajouter deux éléments sur votre page web :
- une balise script qui référence le fichier javascript situé sur le serveur de Trace de Trail
<script src="https://tracedetrail.fr/assets/javascript3/mapTraceTdt.js" type="text/javascript"></script>
- une balise qui contiendra le widget (habituellement une balise div) et référencée par l'identifiant "widgetTdt"
<div id="widgetTdt" data-trace=63002 data-layer="osm" data-lang="fr" data-code=212328></div>
La balise div doit contenir plusieurs attributs : pour récupérer le code, le principe est le même que pour l'iframe.
Les attributs que doit contenir la balise div sont les suivants :
- data-trace : il correspond au numéro de trace
- data-layer : c'est le nom de la couche de cartes que vous souhaitez afficher
- data-lang : fr ou en
- data-code : c'est le code d'accès qui vous est personnel
- data-key : ce paramètre est facultatif, il permet de fournir une clé d'accès aux cartes si nécessaire. Si cette clé n'est pas fournie mais qu'elle est nécessaire, le widget utilisera la clé spécifiée sur votre profil (Menu/Mes Infos)
Quand vous utilisez une balise iframe, c'est la page web de Trace de Trail qui appelle les cartes, tandis que si vous utilisez le widget, c'est votre site web. Pour l'accès aux cartes IGN, il faut donc spécifier l'adresse de votre site web pour la sécurisation de la clé.
Vous ne pouvez insérer qu'un seul widget par page web !