EN
Toutes les applications

Des itinéraires à pied qui échangent une minute contre une plus belle marche avec unmap

Comment est construite l'application Alive Maps d'unmap : le trajet à pied le plus rapide et des détours plus vivants devant des parcs, de l'eau, des rues loin de la circulation, des cafés et de l'art public, classés selon cinq curseurs que vous réglez.

Ouvrir l'applicationCode source

Cartes vivantes (Alive Maps) donne des itinéraires à pied qui échangent une minute contre une plus belle marche. Choisissez un départ et une destination, ou l'un des trois exemples de Calgary, puis appuyez sur Obtenir l'itinéraire : l'application trouve le trajet le plus rapide, puis des détours plus vivants devant des parcs, la rivière, des rues loin de la circulation, des cafés et de l'art public, et les note tous. Cinq curseurs disent ce qui rend une marche vivante pour vous et combien de minutes de plus vous acceptez, et les déplacer change le choix aussitôt. L'application tourne à apps.unmap.dev/alive-maps, et son code est un projet Next.js autonome que vous pouvez cloner et lancer avec votre propre clé.

Les trajets, parcs, plans d'eau, rues et lieux sont de vraies réponses d'unmap tirées d'OpenStreetMap. Deux éléments à l'écran n'en sont pas, et chacun est signalé là où on le voit : les trois exemples de trajets, et les images de mise en valeur, qui sont des illustrations générées par IA d'un genre de lieu, jamais des photos du lieu nommé.

Ce qu'elle fait

  • Trajet le plus rapide et détours plus vivants : le trajet le plus rapide d'abord, puis des détours devant des parcs, de l'eau, des rues loin de la circulation et des lieux, tous notés.
  • Cinq curseurs : ce qui compte comme vivant pour vous, et combien de minutes de plus vous acceptez. Le classement se refait pendant que vous les déplacez.
  • Le choix : tracé dans la couleur primaire du thème, avec une bulle de durée, jusqu'à trois cartes sur ce qu'il longe, et une carte « Pourquoi cet itinéraire » avec les cinq notes.
  • Partage : le lien suit le trajet à l'écran, par exemple ?from=-114.087,51.0525&to=-114.0614,51.0478, donc le copier partage le trajet que vous avez choisi; ?lang=fr l'ouvre en français.
  • Lacunes dites : quand les lieux ou les tuiles de notation ne peuvent pas être lus, les signaux qu'ils alimentent sortent du classement, leurs curseurs se désactivent, la carte « Pourquoi cet itinéraire » indique « Indisponible », et le panneau dit pourquoi.

Ce qu'elle coûte en appels d'API

Obtenir l'itinéraire dépense au plus 40 appels : un /route pour le trajet le plus rapide, jusqu'à 24 tuiles de fond de carte lues pour noter les parcs, l'eau et les rues (ce ne sont pas les tuiles d'affichage de la carte, qui sont à part), deux POST /places/along pour les cafés, commerces et repères, puis des paires de /route pour les détours et /match pour les trajets trouvés sur le graphe piéton, le tout dans ce budget, tuiles comprises. La réponse est gardée par départ et destination : redemander ne coûte rien, sauf si une source était indisponible, auquel cas redemander la réessaie. Les curseurs ne coûtent rien : les déplacer reclasse les trajets dans votre navigateur et n'appelle rien. Les champs de recherche appellent /geocode/autocomplete pendant la frappe, et la carte fait ses propres requêtes de style et de tuiles.

La clé qu'il faut

N'importe quelle clé de navigateur. La clé partagée des applications fonctionne, et aucun module complémentaire n'est nécessaire.

Construite avec le registre, sans modification

Toute la page est le bloc alive-route-explorer, avec le géocodeur et l'élément de carte en dessous, copiés sans modification; l'application ajoute le titre, le trajet tiré du lien et le bouton d'information. Installer le même bloc dans votre projet tient en une commande :

npx @unmap/cli add alive-route-explorer

Ce qu'elle ne fait pas

  • Photos : les images de mise en valeur sont des illustrations générées par IA, pas des photos des lieux.
  • Conditions en direct : fermetures, travaux, météo et heures d'ouverture ne sont pas pris en compte.
  • Autres modes : la marche seulement, ni vélo, ni auto, ni transport en commun.
  • Accessibilité : les trajets n'évitent ni les escaliers ni les fortes pentes.

Lancez-la vous-même

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

git clone --depth 1 https://github.com/unmap-dev/alive-maps.git
cd alive-maps
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:3210. La référence Routage couvre les trajets à pied, la référence Lieux couvre les lieux le long d'un trajet, et la référence API Maps couvre les fonds de carte.