Le Localisateur de magasins trouve la succursale la plus proche dans un réseau de commerces. Cherchez une ville, un code postal ou une adresse, et les succursales sont classées selon le vrai temps de trajet en voiture ou à pied, avec la distance à vol d'oiseau à côté; choisissez-en une pour voir ses heures, l'itinéraire virage par virage et la zone accessible depuis elle en 10 ou 20 minutes. L'application est en ligne à apps.unmap.dev/store-locator, et son code source est un projet Next.js autonome que vous pouvez cloner et exécuter avec votre propre clé.
Les magasins appartiennent à Prairie Lantern Co., un commerce fictif de 20 succursales placées à des points approximatifs dans de vrais quartiers de Calgary. Chaque nom, adresse, numéro de téléphone, heure d'ouverture et service est une donnée d'exemple, et l'application l'indique partout où il apparaît. La carte, la recherche, les temps de trajet et les itinéraires proviennent d'unmap en direct. Remplacez l'exemple par vos propres magasins et le localisateur devient le vôtre.
Ce qu'elle fait
- Recherche d'une ville, d'un code postal ou d'une adresse, avec une préférence pour Calgary, en français ou en anglais. Ou utilisez votre position : la géolocalisation du navigateur, jamais conservée.
- Classement par temps de trajet, en voiture ou à pied, à partir d'une requête de matrice par tranche de 10 succursales, envoyées ensemble. La première du classement porte la mention « La plus proche ». Le classement par distance est aussi offert, calculé dans le navigateur et indiqué comme une distance à vol d'oiseau.
- Itinéraire vers une succursale : durée et distance, indications virage par virage en français ou en anglais, et tout avertissement que l'API ajoute, comme un point de départ déplacé vers la route la plus proche. Survoler une indication met en évidence son tronçon.
- Zone accessible : des bandes de 10 et 20 minutes autour d'une succursale, en voiture ou à pied.
- Fiche de succursale : adresse, téléphone, heures de la semaine avec la journée en cours marquée, services, et si elle est ouverte en ce moment. La liste se filtre par service.
- Charger vos magasins : ouvrez votre propre fichier GeoJSON. Il est lu et vérifié dans votre navigateur, indiqué comme « Votre fichier », et n'est jamais téléversé.
Des requêtes seulement quand vous agissez
Le Localisateur de magasins appelle l'API quand vous cherchez, changez de mode ou appuyez sur les boutons d'une succursale, jamais quand vous déplacez la carte. Une requête remplacée par une plus récente est annulée, et les tests de navigateur de l'application échouent si le même appel est fait deux fois.
Chaque échec s'affiche là où sa réponse aurait paru, en français ou en anglais, avec le message de la passerelle et une option de réessayer quand attendre peut aider. Une succursale pour laquelle la matrice n'a pas de temps affiche « Aucun temps de trajet », avec une note qui précise que cela ne prouve pas qu'aucune route n'existe. Là où la matrice est désactivée sur un déploiement, la liste revient à l'ordre à vol d'oiseau.
Construite à partir du registre, sans modification
La carte, la boîte de recherche, les regroupements de succursales, les fenêtres contextuelles, le tracé d'itinéraire et les indications 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 geocoder cluster-layer marker-popup route-line route-steps geojson-layer map-controlsL'URL est l'état
La recherche, la succursale choisie, le mode de déplacement, le tri et la langue vivent dans la chaîne de requête (?from=&label=&store=&mode=&sort=&lang=) : un lien rouvre donc la même liste et la même succursale.
Ce qu'elle n'affiche pas
- De vrais renseignements commerciaux. unmap ne fournit ni noms de magasins, ni heures, ni numéros de téléphone, ni services : ce sont donc les données d'exemple. « Ouvert » et « fermé » sont calculés dans votre navigateur à partir des heures d'exemple, sans heures des jours fériés.
- La circulation en temps réel. Les temps de trajet viennent du réseau routier sans circulation en direct : ils sont typiques, pas actuels.
- Comptes, réservations et gestion de magasins. C'est un localisateur, pas un système de gestion de magasins.
La recherche et les itinéraires couvrent le Canada.
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:3201.
git clone --depth 1 https://github.com/unmap-dev/store-locator.git
cd store-locator
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:3201. Commencez par remplacer data/stores.sample.json par vos propres magasins : parseStores() dans lib/stores.ts vérifie le fichier et liste chaque problème trouvé, et STORE_TIME_ZONE définit le fuseau horaire de vos heures. Le tutoriel du localisateur en construit le cœur étape par étape, et la référence de l'API d'itinéraires décrit la matrice derrière le classement.
