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>
<script src="nom de domaine/js/leaflet.js"></script>
<script src="nom de domaine/js/gpx.js"></script>
<script src="nom de domaine/js/Control.FullScreen.js"></script>
<link rel="stylesheet" href="nom de domaine/css/leaflet.css" type="text/css">
<link rel="stylesheet" href="nom de domaine/css/Control.FullScreen.css" type="text/css">
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('include/carte-via-menu.php'); ?>
<?php include('include/fond-de-carte.php'); ?>
L.control.layers(baselayers, overlayMaps).addTo(map);
</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);
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 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
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
(Mise à jour le 12 juin 2023)
