Comment afficher son parcours GPX sur son site web

Il arrive que l'on me demande comment je fais pour afficher mes parcours vélo sur mon blog, voici donc une petite aide

Noter que je crée mes parcours au format GPX via brouter.de sur mon PC ou via OpenTracks pendant mes randonnées vélo.
Si besoin je modifie mes GPX avec GpsPrune.
L'affichage d'un parcours sur le blog est propulsé par OpenStreetMap et Leaflet et vous aurez besoin de la bibliothèque Leaflet (leaflet.js, leaflet.css, leaflet.js.map) sans oublier les fichiers gpx.js, pin-icon-end.png, pin-icon-start.png et pin-shadow.png et bien sur votre fichier GPX.
D'autres fichiers sont utiles pour afficher des options par exemple j'utilise Control.FullScreen.js pour afficher la carte en plein écran.
Attention à bien indiquer dans les codes ci-dessous votre nom de domaine et les dossiers dans lesquels vous avez placé les fichiers js, css, gpx, etc.

Dans le head ça donne ceci

On appelle les fichiers nécessaire au bon fonctionnement entre les balises <head> et </head>

Le code complet

Il existe plusieurs façon d'afficher un fichier GPX sur son site web mais le code ci-dessous est simple et fonctionnel.
On peut bien sur y rajouter plein d'options comme par exemple leaflet-elevation (sans grand intérêt dans ma région)
Vous pouvez bien sur vous amuser à modifier le code ci-dessous.

<div id="map" style="width:100%; height:500px"></div>
<script>
var map = new L.Map('map', {
fullscreenControl: true,
fullscreenControlOptions: {
position: 'topleft'
}
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'
}).addTo(map);
var gpx = 'fichier.gpx';
new L.GPX(gpx, {async: true}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
<?php include('leaflet/carte-via-menu.php'); ?>
<?php include('leaflet/fond-de-carte.php'); ?>
L.control.layers(baselayers, overlayMaps).addTo(map);
<?php include('leaflet/options.php'); ?>
</script>

L'include carte-via-menu.php

Un seul fichier à modifier pour changer tous les fonds de carte du control-layers
Comme pour tout include c'est bien pratique pour modifier en une seule fois la même option sur plusieurs cartes.

var baselayers = {
"OpenStreetMap": L.tileLayer('https://tile.openstreetmap.org/${z}/${x}/${y}.png'),
"OpenStreetMapFrance": L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'),
"CyclOSM": L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png')
};

var layerControl = L.control.layers(baselayers).addTo(map);

L'include fond-de-carte.php

Cet include sert à definir le fond de carte par défaut dans le selecteur du control-layers

baselayers.OpenStreetMap.addTo(map);

L'include options.php

C'est dans ce fichier que l'on rajoute des options.

Dans le CSS style (version RWD)

Perso j'ai juste modifié la hauteur de la carte sur mobile (max-width: 768px)

#map {
height: 400px !important;
}

Les dossiers

Voici mes dossiers et leurs fichiers sur mon serveur (vous pouvez changer de dossier si vous souhaitez mais il faudra pointer dessus).
Dans le dossier "nom de domaine/js/" j'ai mis leaflet.js, leaflet.js.map, gpx.js, gpx.min.js, Control.FullScreen.js
Dans le dossier "nom de domaine/css/" j'ai mis leaflet.css et Control.FullScreen.css
Dans le dossier "nom de domaine/css/images/" j'ai mis toutes les images fournies avec Leaflet et les images du Control FullScreen.
Dans le dossier "nom de domaine/leaflet/" j'ai mis tous les includes leaflet comme par exemple les options.
Dans le dossier de chaque parcours j'ai mis un index.php, le fichier GPX du parcours, pin-icon-start.png, pin-icon-end.png et pin-shadow.png
(Perso j'ai personnalisé avec GIMP les icônes pin-icon-start.png et pin-icon-end.png).

Les liens utiles

- La bibliothèque JavaScript Leaflet
- gpx.js
- Control.FullScreen js et le css
- jquery (seulement si vous en avez besoin car pas obligatoire pour ce tuto)

Le code que vous venez de consulter sur cette page me sert actuellement pour afficher les parcours vélo de ce blog

informatique

Publié par Eric le 31 mars 2023
(Mise à jour le 19 juillet 2024)