Maps est une application cartographique Web complète, sous une forme que tout le monde connaît déjà : une boîte de recherche, une fiche de lieu, des itinéraires, des catégories à proximité, des zones de temps de trajet, des événements routiers et le transport en commun. Elle est en ligne à apps.unmap.dev/maps, et son code source est un projet Next.js autonome que vous pouvez cloner et exécuter avec votre propre clé.
Elle existe pour deux raisons. Elle montre les API unmap dans une interface que personne n'a à apprendre, et elle est le premier vrai consommateur du registre de composants : la carte, le géocodeur, les marqueurs, le tracé d'itinéraire et le profil d'altitude sont des éléments du registre copiés exactement comme shadcn add les écrit.
Ce qu'elle fait
- Recherche avec saisie semi-automatique parmi les adresses et les lieux canadiens, et une fiche de lieu pour le résultat.
- Qu'y a-t-il ici? : cliquez n'importe où pour obtenir l'adresse la plus proche, sa municipalité et son territoire de traité, l'altitude et le fuseau horaire.
- Itinéraires en voiture, en transport en commun, à vélo, à pied ou en camion, avec des indications virage par virage. Les itinéraires à vélo et à pied tiennent compte des pentes, et un curseur règle à quel point les éviter.
- À proximité : une catégorie comme les cafés ou les pharmacies autour d'un point, avec « Rechercher dans cette zone » après un déplacement de la carte.
- Zones de temps de trajet : la zone accessible en 5, 10 et 15 minutes depuis un point.
- Un bilan 15 minutes : lesquels de neuf services essentiels du quotidien se trouvent à moins de 15 minutes à pied ou à vélo.
- Couches en direct : incidents, fermetures et conditions routières, et arrêts de transport en commun avec leurs départs prévus.
Chaque requête est à l'écran
L'inspecteur d'API liste chaque appel que la page fait à la passerelle, au moment où il se produit : le chemin, le statut, la latence, la réponse et la ligne @unmap/sdk qui fait le même appel. Les tuiles, les glyphes et les sprites sont exclus pour que la liste reste lisible.
L'inspecteur enregistre au niveau de fetch, pas à l'intérieur du SDK. Les composants du registre construisent leurs propres clients : une enveloppe autour de window.fetch est donc le seul endroit qui voit chaque requête, et ce qu'elle affiche est ce qui a réellement transité.
Construite à partir du registre, sans modification
L'application ne modifie pas ses composants. Quand un panneau a besoin de quelque chose qu'un élément ne fait pas, l'élément change dans le registre puis est recopié, et un test échoue si une copie s'écarte de sa source. L'application est ainsi un aperçu honnête : chacune de ses pièces peut être installée dans votre propre projet.
Elle utilise les jetons shadcn par défaut plutôt que la marque unmap, parce que c'est ce que vous obtenez en installant les mêmes composants.
L'URL est l'état
Chaque écran a sa propre adresse, sous des formes déjà familières :
/@51.0443,-114.0631,13z la carte à une position
/dir/<from>/<to>?mode=bicycle&hills=0.3 un itinéraire
/reach/-114.06,51.04?minutes=5,10,15 des zones de temps de trajet
?map=canopy-dark&layers=transit&lang=fr style, couches et langue des libellés
Un nouvel écran s'ajoute à l'historique pour que le bouton Retour fonctionne, et un déplacement de la carte le remplace : un lien rouvre donc toujours ce que vous regardiez.
Ce qu'elle n'affiche pas
Ce sont des limites de l'API ou des données, et l'application le dit au lieu de les combler :
- Heures d'ouverture, numéros de téléphone, photos et avis. Les données de lieux ne les contiennent pas.
- Itinéraires de rechange et guidage vocal. Une requête d'itinéraire renvoie un seul itinéraire, avec des indications écrites.
- Vitesses de circulation. Les événements routiers sont des incidents, des fermetures et des conditions, pas la circulation en temps réel.
- Transport en commun en temps réel. Les départs sont des heures prévues.
- Les descriptions de terres légales exigent le module
legal-land. Une clé qui ne l'a pas voit plutôt le badge du module.
Le géocodage et les itinéraires couvrent le Canada; le fond de carte couvre le monde entier.
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:3100.
git clone --depth 1 https://github.com/unmap-dev/maps.git
cd maps
pnpm install --frozen-lockfile
cp .env.example .env.localDéfinissez NEXT_PUBLIC_UNMAP_KEY dans .env.local avec votre clé, lancez pnpm dev et ouvrez localhost:3100. Commencez par changer la position initiale de la carte dans lib/config.ts, puis les panneaux dans components/maps/. Le guide de démarrage explique les clés et les origines autorisées, et la page Composants explique comment installer les mêmes pièces dans une application existante.
