Affichage de fichiers GPX sur une carte

Envie d'afficher toutes vos traces GPX sur votre site ? Voici un petit tutoriel en utilisant la bibliothèque Leaflet, 4 lignes de PHP (il faut que vous ayez accès au PHP) et quelques lignes de Javascript.

Si vos GPX sont stockés dans Strava, il faut d'abord demander une archive (par "Télécharger vos données"), puis copier tous les GPX dans un dossier de votre hébergement (dans cet exemple, le dossier "mymaps" à la racine).

Créer ensuite un fichier "gpxmap.php" à la racine de l'hébergement, et y copier le code suivant :


<?php
header('Content-Type: application/json; charset=utf-8');
$arr=array();
foreach (glob("mymaps/*.gpx") as $file) $arr[]=basename($file);
echo json_encode($arr);
?>


Le reste, c'est inclure les quelques scripts Javascript comme Leaflet, Omnivore ou l'éternel jQuery, et quelques lignes de javascript pour assembler le tout, comme pour faire un bon whisky. Un petit "Afficher le code source de la page", et il n'y a plus qu'à copier-coller.

Pour un exemple un peu plus élaboré (affichage des cartes IGN, sélection d'un GPX, affichage des coordonnées et de l'altitude), voir notre carte interactive de topos