Intégration Mapbox : carte intéractive pour Ornikar

Le contexte

Lors de la refonte du site d'Ornikar, nous avons déployé un module spécifique avec une cartes, des filtres et la géolocalisation en direct. À chaque ville correspond un ou plusieurs points de rendez-vous où les élèves retrouvent leur enseignant. Le composant « points de rendez-vous » est l'un des passages obligés du tunnel d'inscription : si je ne trouve pas de point près de chez moi, je n'avance pas.

Le besoin était double. D'un côté, donner au visiteur un moyen visuel et rapide de filtrer (boîte manuelle vs boîte automatique) et de zoomer sur sa zone. De l'autre, afficher des centaines de points sans que la carte ne devienne illisible. Typiquement le genre de challenge qu'on aime en tant qu'agence Webflow.

L'architecture

Trois briques, et c'est tout :

1. Un endpoint GeoJSON qui sert les points de rendez-vous (hébergé et maintenu côté Ornikar)
2. La librairie Mapbox GL JS, qui rend la carte dans le navigateur
3. Un script vanilla JS qui orchestre tout ça sur la page Webflow

Pas de backend custom, pas de proxy. Mapbox abat la majeure partie du travail. Notre script s'occupe du « collage » entre les éléments Webflow (boutons, inputs, templates) et l'instance Mapbox.

Étape 1 - La donnée au format GeoJSON

Les points de rendez-vous sont exposés au format GeoJSON - un standard que Mapbox sait digérer nativement. Chaque point est une Feature avec ses coordonnées, son adresse, sa ville, et deux propriétés métier qui nous intéressent : gearbox_type (boîte manuelle, auto, ou les deux) et instructors_count.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-1.5629627, 47.2212212]
  },
  "properties": {
    "address": "Nantes, Arrêt de tram Viarme-Talensac",
    "city": "Nantes",
    "zipcode": "44000",
    "gearbox_type": "Boite manuelle",
    "instructors_count": 1
  }
}

Aucune transformation côté front. Le navigateur télécharge le fichier, on le passe tel quel à Mapbox, c'est lui qui s'occupe du rendu et du clustering.

Étape 2 - Mapbox GL JS, chargé à la demande

Mapbox GL JS, c'est costaud : plusieurs centaines de Ko à télécharger. Pour ne pas plomber le chargement initial du site, le script utilise des dynamic imports; la librairie n'est récupérée qu'au moment où l'élément [data-component="map"] est détecté sur la page.

const [{ default: mbgl }, { default: Geocoder }] = await Promise.all([
  import('mapbox-gl'),
  import('@mapbox/mapbox-gl-geocoder'),
]);

Sur les pages sans carte - la home, le blog, la majorité du site - Mapbox n'est jamais chargé. Les Core Web Vitals restent verts, et la carte ne s'affiche que là où elle est utile.

Étape 3 - Le clustering : agréger plutôt qu'empiler

Avec 200+ points, afficher tous les markers dézoomés revient à dessiner une bouillie illisible sur la France. Mapbox propose un mécanisme natif de clustering : on déclare cluster: true sur la source GeoJSON, et la librairie regroupe automatiquement les points proches en fonction du niveau de zoom.

map.addSource('points', {
  type: 'geojson',
  data: mapLocations,
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50,
});

Au clic sur un cluster, la carte zoome pile au niveau où il se sépare - Mapbox donne ce niveau gratuitement via getClusterExpansionZoom(). Aucune ligne de logique à écrire pour gérer cette mécanique.

Le rendu visuel des clusters est custom : un cercle transparent qui sert de zone de clic, une image PNG par-dessus pour le visuel à la marque Ornikar, et un compteur centré qui affiche le nombre de points regroupés.

Étape 4 - Markers custom et filtre par type de boîte

Mapbox permet de coder la logique d'affichage des markers directement dans la définition de la layer, via ses expressions. On choisit l'image du marker en fonction de la valeur de gearbox_type et d'un état interne isActive (le marker sélectionné a son icône surélevée) :

'icon-image': [
  'match',
  ['get', 'gearbox_type'],
  'Boite manuelle', [...],
  'Boite auto',     [...],
  [...]
]

Le filtre boîte manuelle / boîte auto est branché sur les boutons posés dans Webflow (class .map_filters-gear). Quand on clique, on filtre allFeatures en JavaScript, on remet le résultat dans la source GeoJSON via setData(), et Mapbox redessine la carte. Aucun appel réseau supplémentaire car tout se passe en mémoire.

Étape 5 - La popup, hybride Webflow + Mapbox

Mapbox sait afficher une popup, mais son markup par défaut est rigide. Pour rester dans la charte d'Ornikar, on délègue la mise en page à Webflow.

L'astuce : on pose dans le designer Webflow un bloc [data-map="item-template"] stylisé comme on veut, masqué par défaut. Au clic sur un marker, le script clone ce bloc, remplit les champs (data-map="city", data-map="address", data-map="gearbox"…) avec les propriétés du point, puis injecte le résultat dans une popup Mapbox.

const template = document.querySelector('[data-map="item-template"]');
const popupContent = template.cloneNode(true);
popupContent.querySelector('[data-map="city"]').textContent = properties.city;
// …
new mapboxgl.Popup({ closeButton: false, closeOnClick: false })
  .setLngLat(coordinates)
  .setDOMContent(popupContent)
  .addTo(map);

Résultat : l'équipe Ornikar garde la main sur le design de la popup, le développeur garde la main sur la donnée injectée. Personne ne se marche sur les pieds.

Étape 6 - Recherche d'adresse et géolocalisation

Deux entrées possibles pour le visiteur qui cherche un point près de chez lui.

La recherche par ville ou code postal. On utilise MapboxGeocoder, configuré pour la France uniquement (countries: 'fr') avec une bounding box qui couvre l'hexagone. Le contrôle natif Mapbox est ensuite déplacé dans un wrapper Webflow personnalisé pour rester cohérent visuellement - un simple appendChild sur l'élément du DOM, et le design suit.

Le bouton « Autour de moi». Avant de demander la position au navigateur, on vérifie l'état de la permission via la Permissions API. Si le visiteur a déjà refusé, on lui propose un message clair plutôt que de déclencher une popup système qui ne donnera rien. En cas de succès, la carte fait un flyTo sur ses coordonnées au zoom 12.

Le détail SEO : un composant, autant de pages que de villes

Ornikar a une page par ville  (exemple « auto-école Rennes », « auto-école Lyon »). Pour que la carte soit déjà centrée sur la bonne ville à l'ouverture, le script lit deux data-attributes sur l'élément de page :

<body data-map-latitude="47.218" data-map-longitude="-1.553">

S'ils sont présents et valides, la carte s'initialise sur ces coordonnées au zoom 10. Sinon, vue France par défaut. Un seul composant alimente toutes les pages locales : pas de duplication de code, juste deux champs CMS Webflow à renseigner par ville (qui est rempli automatiquement via API en fonction de la donnée côté produit).

Déploiement : GitHub + Cloudflare

Le code source vit dans un dépôt GitHub. À chaque push sur la branche principale, Cloudflare prend le relais : il build le bundle, le minifie, et le sert depuis son réseau CDN mondial. Webflow le charge ensuite via une simple balise <script src="…"> dans le custom code de la page.

Concrètement : un développeur peut pousser une amélioration de la carte sans jamais toucher à Webflow, et le déploiement passe en moins de 30 secondes. L'équipe design garde l'autonomie sur Webflow, l'équipe dev garde l'autonomie sur le comportement de la carte.

Pourquoi pas une autre approche ?

• Un iframe Google Maps - pas de filtres custom, pas de design custom, pas de clustering propre, et un branding Google sur chaque pixel.
• Leaflet + tuiles open source - gratuit, mais l'expérience par défaut (tuiles, recherche d'adresse, géoloc) est nettement moins polie. Le temps gagné sur la licence est perdu en intégration.

Mapbox offre le meilleur compromis : un free tier qui couvre largement le trafic d'Ornikar, un design soigné, et toute la logique de clustering / expressions / popup gérée nativement.

Le résultat

Une carte qui se charge uniquement sur les pages où elle est utile, qui encaisse des centaines de points sans broutage, qui se filtre par type de boîte en un clic, et qui s'adapte automatiquement à chaque page ville pour le SEO local. Le tout déployé en continu depuis GitHub, sans jamais avoir à rouvrir l'éditeur Webflow.