Comment construire un store locator avec une API cartographique

Un store locator est cette petite fonctionnalité dont toute entreprise multi-sites finit par avoir besoin : le champ de recherche de magasin qui transforme un code postal en une liste courte et classée de points de vente sur une carte. Vu de l'extérieur, cela paraît trivial, et le happy path est effectivement simple. Mais un bon store locator accomplit discrètement trois tâches : il comprend des saisies de localisation approximatives, il classe les points de vente selon leur proximité réelle, et il affiche le résultat sur une carte exploitable par un humain.

Ce guide détaille le fonctionnement réel d'un store locator, les quatre étapes pour en construire un avec une API cartographique, et les détails qui séparent une démo d'un produit que vous mettriez en production. Chaque carte de cet article est rendue avec l'API MapAtlas elle-même.

Ce que fait réellement un store locator

Retirez l'habillage graphique : un store locator est un pipeline en trois étapes.

1. Géocoder la saisie du visiteur. « 1012 Amsterdam », « SW1A 1AA » ou une position GPS partagée doivent toutes devenir une unique latitude et longitude.
2. Classer par proximité les magasins. À partir de cette coordonnée et de votre liste de points de vente, identifiez les plus proches dans un rayon raisonnable.
3. Afficher les résultats. Placez les magasins classés sur une carte sous forme de marqueurs, chacun avec son adresse, ses horaires et un lien vers l'itinéraire.

La carte ci-dessous correspond exactement à cette troisième étape, rendue avec les tuiles MapAtlas : six points de vente dans le centre d'Amsterdam, épinglés selon leur distance au visiteur. Il s'agit ici de supermarchés, mais la carte reste identique que les marqueurs proviennent d'un jeu de données de POI ou de votre propre liste de magasins.

L'ordre des couleurs correspond au classement. Le visiteur a lancé sa recherche depuis le centre de la carte, et les marqueurs sont les points de vente les plus proches dans l'ordre, le plus proche en premier.

Étape 1 : géocoder la saisie du visiteur

Le visiteur saisit un code postal, une ville ou une adresse complète, et il vous faut une coordonnée. C'est du géocodage direct (forward geocoding).

// Turn what the visitor types into a coordinate (autocomplete geocoding)
const res = await fetch(
  `https://gateway.mapmetrics-atlas.net/autocomplete/` +
  `?token=${API_TOKEN}&text=${encodeURIComponent(query)}` +
  `&focus.point.lat=52.37&focus.point.lon=4.89` // bias toward your service area
);
const { features } = await res.json();
const [lon, lat] = features[0].geometry.coordinates; // [lon, lat]
const label = features[0].properties.label;          // "Damrak, Amsterdam, North Holland, Netherlands"

Deux détails comptent ici. Transmettez un focus.point proche de votre zone de chalandise pour que « Cambridge » se résolve sur la bonne, et traitez le cas où le visiteur partage le GPS de son appareil plutôt que de saisir du texte : vous disposez alors déjà de la coordonnée et cette étape disparaît entièrement.

Étape 2 : classer vos magasins par distance

Vous disposez désormais de la coordonnée du visiteur. Les magasins, eux, sont vos propres données : une liste de points de vente, chacun avec une latitude et une longitude, stockée dans votre base. Les classer relève d'un simple calcul de distance à vol d'oiseau (haversine), sans aucun appel d'API :

// Your branches, each with a lat/lon. Rank by distance from the visitor.
const ranked = stores
  .map(s => ({ ...s, distance_m: haversine(lat, lon, s.lat, s.lon) }))
  .sort((a, b) => a.distance_m - b.distance_m)
  .slice(0, 6);

C'est tout ce dont un store locator basique a besoin. Pour un réseau étendu, vous filtreriez d'abord sur une bounding box autour du visiteur afin de ne pas mesurer la distance à chaque point de vente à chaque requête, puis vous trieriez les survivants. En sortie : une liste courte des points de vente les plus proches, chacun avec son distance_m.

Étape 3 : classer par distance, puis affiner par temps de trajet

La distance à vol d'oiseau constitue le bon comportement par défaut. Elle est rapide, ne nécessite aucun appel supplémentaire et, pour un réseau dense, elle est généralement juste. Mais le magasin le plus proche à vol d'oiseau n'est pas toujours le plus rapide à atteindre : un point de vente situé à 400 mètres de l'autre côté d'un fleuve peut représenter un détour de dix minutes jusqu'au pont le plus proche.

Pour un store locator où « le plus proche » signifie réellement « le plus rapide à atteindre », reclassez les quelques meilleurs candidats selon le temps de trajet réel via un appel directions ou matrix :

// Re-rank the closest stores by real drive time (MapAtlas Matrix API)
const res = await fetch(`https://gateway.mapmetrics-atlas.net/matrix/?token=${API_TOKEN}`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    sources: [{ lat, lon }],
    targets: top3.map(s => ({ lat: s.lat, lon: s.lon })),
    costing: 'auto', // 'auto' | 'bicycle' | 'pedestrian'
  }),
});
const { sources_to_targets } = await res.json();
const row = sources_to_targets[0]; // one entry per target, each with .time (seconds)
const byTime = top3
  .map((s, i) => ({ ...s, time: row[i].time }))
  .sort((a, b) => a.time - b.time);

Vous ne procédez ainsi que pour la poignée de candidats les plus proches : cela reste un unique appel peu coûteux, et non un appel par magasin.

Étape 4 : afficher les magasins sur une carte

La dernière étape est la carte elle-même. Déposez un marqueur pour chaque magasin classé, ajoutez un popup avec l'adresse et les horaires, et cadrez la vue pour que tous les résultats soient visibles. Avec une API cartographique qui sert les tuiles, le géocodage et la recherche depuis un seul fournisseur, l'ensemble du store locator repose sur un seul prestataire et un seul système de coordonnées, de bout en bout. C'est précisément sur cela qu'est construite la carte présentée plus haut.

Donnez à chaque marqueur un popup contenant l'essentiel pour que le visiteur puisse agir : nom, adresse, distance, horaires et un lien « Itinéraire » qui transmet la coordonnée à un moteur de routage.

Les détails qui séparent une démo de la production

Résultats vides. Quelqu'un lance une recherche depuis une région où vous n'avez aucun point de vente. Décidez en amont : élargir automatiquement le rayon, afficher l'unique magasin le plus proche quelle que soit la distance, ou annoncer honnêtement « aucun magasin dans un rayon de 50 km ».

Horaires d'ouverture. Un store locator qui présente un magasin fermé comme l'option la plus proche est frustrant. Filtrez ou signalez selon les horaires pour faire de « ouvert maintenant » une option de premier plan.

Saisies ambiguës. « Cambridge » existe en Angleterre et dans le Massachusetts ; « Springfield » existe des dizaines de fois. Le biais par pays à l'étape de géocodage élimine l'essentiel du problème, et proposer l'autocomplétion pendant la saisie règle le reste.

GPS mobile et consentement. Sur mobile, la meilleure expérience reste le bouton « utiliser ma position », mais lire le GPS de l'appareil relève des données de localisation et exige un consentement. Demandez d'abord, et repliez-vous sur la saisie texte si le visiteur refuse.

Confidentialité. La localisation du visiteur devient une donnée personnelle dès l'instant où elle lui est rattachée. Géocodez à la demande, évitez de stocker la coordonnée brute et utilisez une API basée dans l'UE afin que la localisation ne quitte jamais l'EEE. Consultez notre guide des cartes conformes au RGPD pour le tableau complet.

Construire un store locator avec MapAtlas

MapAtlas vous fournit tout le pipeline depuis une seule API et un seul système de coordonnées. L'API de géocodage transforme codes postaux et villes en coordonnées avec biais par pays ; vous classez votre propre liste de points de vente par rapport à cette coordonnée ; les API Directions et Matrix reclassent les meilleurs candidats selon le temps de trajet réel ; et les tuiles Dynamic Maps affichent le résultat, exactement comme dans cet article. Comme tout s'exécute par défaut à l'intérieur de l'UE, la localisation du visiteur reste dans l'EEE, ce qui maintient le store locator conforme au RGPD sans travail supplémentaire.

Les formats complets de requête et de réponse de chaque endpoint figurent dans la documentation de l'API MapAtlas. L'API Search mérite également le détour si vous souhaitez que votre store locator découvre les points d'intérêt autour du visiteur, et pas uniquement vos propres points de vente.

Un store locator est une petite fonctionnalité qui renferme beaucoup de jugement discret : comprendre des saisies vagues, classer selon une proximité réelle, et respecter le fait qu'une localisation constitue une donnée personnelle. Réussissez ces trois points et le champ de recherche de magasin cesse d'être un détail pour devenir l'un des éléments les plus utilisés de votre site.