EN
Toutes les applications

§ Application / Explorateur de sentiers

Créer un explorateur de sentiers de randonnée avec React et unmap

Comment l'Explorateur de sentiers d'unmap est construit : des sentiers de Parcs Canada sur une carte plein air avec relief et courbes de niveau, des profils d'altitude, l'import de fichiers GPX et l'itinéraire jusqu'au départ du sentier.

Ouvrir l'applicationCode source

L'Explorateur de sentiers présente des randonnées d'une journée autour de Banff et de Lake Louise sur une carte plein air en direct, avec ombrage du relief et courbes de niveau. Cherchez et filtrez les sentiers, choisissez-en un pour voir sa longueur, son dénivelé et un profil d'altitude synchronisé avec la carte, ouvrez votre propre fichier GPX, obtenez l'itinéraire routier jusqu'au départ du sentier et partagez un lien vers le sentier. L'application est en ligne à apps.unmap.dev/trail-explorer, et son code source est un projet Next.js autonome que vous pouvez cloner et exécuter avec votre propre clé.

Rien sur la carte n'est inventé. Les sentiers sont de vraies données ouvertes, le jeu de données Sentiers APCA de Parcs Canada, utilisé sous la Licence du gouvernement ouvert - Canada : 20 randonnées d'une journée de 1,5 à 25 km, choisies de façon mécanique et récupérées par un script qui vérifie d'abord la licence. Elles forment un instantané daté, pas des données en direct. La carte, les profils d'altitude, la recherche de lieux et les itinéraires proviennent d'unmap en direct.

Ce qu'elle fait

  • Une carte plein air : le style outdoor, avec ombrage du relief, courbes de niveau et sentiers OpenStreetMap, et des libellés en français ou en anglais.
  • Recherche et filtres : par nom, sans tenir compte des accents ni de la casse, et par distance, dénivelé et difficulté. Les filtres de dénivelé et de difficulté n'apparaissent que si les données contiennent ces valeurs.
  • Fiche du sentier : longueur, dénivelé et difficulté selon la cote de Parcs Canada, puis surface, pente, obstacles et le reste, tels que Parcs Canada les publie en français et en anglais. Chaque sentier indique sa source, sa licence et la façon dont chaque valeur a été calculée.
  • Profil d'altitude : jusqu'à 500 points échantillonnés le long du sentier, avec le gain, la perte, le point le plus bas et le plus haut. Survolez le graphique et un repère suit sur la carte; survolez le tracé et le graphique suit.
  • Import de GPX : ouvrez un fichier .gpx et ses traces, itinéraires et points de repère sont lus dans votre navigateur. Son profil n'est demandé que lorsque vous appuyez sur le bouton, et seuls les points échantillonnés sont envoyés.
  • Itinéraire jusqu'au départ du sentier : à partir d'un lieu que vous cherchez ou de votre position, en voiture, avec des indications virage par virage en français ou en anglais. Il est présenté comme un itinéraire routier, pas comme une navigation sur le sentier.
  • Un lien vers le sentier : ?trail=<id>, avec ?lang=fr pour le français.

Des valeurs vérifiables

Le dénivelé enregistré avec chaque sentier a été échantillonné aux mêmes points que ceux du profil d'altitude de l'application : le profil affiche donc les mêmes valeurs. La longueur est la somme des distances le long du tracé publié. Le départ du sentier est le début de ce tracé, qui n'est pas un point de départ arpenté ni un stationnement, et chaque sentier porte une note sur la méthode derrière chaque valeur.

Les requêtes ne partent que lorsque vous agissez : choisir un sentier, demander un itinéraire ou le profil d'un fichier. Le profil attend une pause, une requête remplacée par une plus récente est annulée, et rien n'est demandé quand vous déplacez la carte.

Construite à partir du registre, sans modification

La carte, les tracés des sentiers, le profil d'altitude, la recherche, les indications et le repère du départ sont des éléments du registre copiés sans modification, et le code propre à l'application n'appelle l'API que par @unmap/sdk. Installer les mêmes pièces dans votre projet tient en une commande :

npx @unmap/cli add map geojson-layer route-line elevation-profile geocoder route-steps marker-popup map-controls

Ce qu'elle n'affiche pas

L'Explorateur de sentiers n'est pas un outil de navigation ni de sécurité, et il l'indique à l'écran en tout temps :

  • Conditions et fermetures. Les conditions des sentiers, les fermetures, les restrictions saisonnières, les avertissements sur la faune et les risques d'avalanche ne font pas partie de ces données et ne sont pas affichés. Consultez Parcs Canada avant de partir.
  • La navigation sur le sentier. L'itinéraire mène par la route jusqu'au début du tracé publié. Les itinéraires unmap ne guident pas sur les sentiers, et l'application n'est pas une carte hors ligne.
  • Tous les sentiers des parcs. La collection est un échantillon de randonnées d'une journée. Les tracés sont tels que Parcs Canada les a publiés à la date de récupération et peuvent être incomplets ou périmés.
  • Un dénivelé exact. Le gain et la perte proviennent d'un modèle numérique d'élévation échantillonné tous les 30 m ou plus : considérez-les comme approximatifs.

L'exécuter vous-même

Il vous faut Git, Node.js 24, pnpm et une clé de navigateur du tableau de bord qui autorise http://localhost:3203.

git clone --depth 1 https://github.com/unmap-dev/trail-explorer.git
cd trail-explorer
pnpm install --frozen-lockfile
cp .env.example .env.local

Définissez NEXT_PUBLIC_UNMAP_KEY dans .env.local avec votre clé, lancez pnpm dev et ouvrez localhost:3203. Les données des sentiers sont fournies dans data/trails.geojson, et pnpm fetch-trails les actualise à partir de Parcs Canada. Pour afficher vos propres sentiers, écrivez vous-même ce fichier sous forme de lignes GeoJSON avec leur source et leur licence : parseTrails() dans lib/trails.ts le vérifie et liste chaque problème trouvé. La référence de l'API d'altitude décrit les profils, et l'exemple de carte plein air décrit le style avec relief et courbes de niveau.