Vous avez déjà consulté une carte affichant des centaines, voire des milliers de points d'intérêt ? Sans hiérarchisation visuelle, le résultat est souvent illisible : les marqueurs se superposent, la carte devient confuse et l'information se perd. C'est précisément pour résoudre ce problème que les cartes en cluster ont été conçues.
Qu'est-ce qu'une carte en cluster ?
Une carte en cluster regroupe automatiquement les points proches les uns des autres en grappes visuelles. Chaque grappe affiche le nombre de points qu'elle contient. Lorsque l'utilisateur zoome sur la carte, ces grappes se divisent progressivement en groupes plus petits, jusqu'à révéler les marqueurs individuels.
Cette approche présente plusieurs avantages :
- Lisibilité : même avec des milliers de points, la carte reste claire et exploitable
- Performance : le navigateur n'a pas à afficher simultanément tous les marqueurs
- Navigation intuitive : l'utilisateur contrôle le niveau de détail souhaité en zoomant
- Identification des zones denses : les clusters révèlent instantanément où se concentrent les données
Les cas d'usage sont nombreux : localisation de points de vente, cartographie d'entreprises, visualisation de données épidémiologiques, répertoires immobiliers, ou encore suivi de flottes de véhicules.
Pourquoi choisir Leaflet pour vos cartes en clusters ?
Pour créer des cartes en cluster sur le web, plusieurs solutions existent. Leaflet, associé au plugin Leaflet.markercluster, s'est imposé comme une référence grâce à sa simplicité d'utilisation et ses performances.
La mise en place d'un clustering avec Leaflet nécessite simplement d'intégrer le plugin (quelques lignes de code), de préparer vos données au format JSON, et de créer un groupe de marqueurs spécial qui gère automatiquement le regroupement. Le plugin s'occupe de tous les calculs complexes : distances entre points, animation des transitions, subdivision des grappes selon le niveau de zoom.
Les alternatives pour le clustering cartographique
Google Maps propose également du clustering via sa bibliothèque MarkerClusterer, performante mais soumise aux quotas et à la tarification de l'API. Mapbox GL JS offre des fonctionnalités de clustering natives avec des rendus visuels sophistiqués, mais demande plus de ressources. OpenLayers intègre le clustering de façon native et convient aux applications cartographiques complexes, au prix d'une courbe d'apprentissage plus raide.
L'avantage de Leaflet pour débuter : sa légèreté, sa gratuité totale, et la richesse de sa documentation. Pour afficher des milliers de points sur une carte web sans se perdre dans la complexité technique, c'est un choix judicieux.
Créer votre première carte en cluster : l'exemple viticole
Le livre "Cartographie web avec Leaflet" de Richard Carlier propose un exemple concret et pédagogique : la visualisation des producteurs de vin en Bourgogne-Franche-Comté. La suite de cette section est extraite du livre.
La mise en place d'une carte à cluster est assez simple : on intègre le JavaScript du plugin Leaflet
markercluster et sa CSS, on construit notre carte, et via une boucle, on crée un marqueur pour chacune de nos données, que l'on ajoute dans un L.markerClusterGroup (qu'il faudra ajouter au final à notre map).
Pour notre exemple, nous allons, grappes obligent, nous intéresser aux producteurs de vins en région Bourgogne-Franche-Comté. À cette fin, direction la base Sirene pour extraire les producteurs de vin (code NAF 01.21Z) que nous géolocalisons. À noter que le distingo n'est pas fait entre établissements et sièges d'entreprise (une même entreprise peut donc apparaître plusieurs fois si elle possède plusieurs établissements).
Le fichier data/viticole.json aura cette structure :
[{ "count":156,"insee_com":"71294","code_postal":"71640",
"commune": "Mercurey","lat": 46.8383,"lng": 4.7279},
Puis nous mettons en place les CDN du plugin, soit deux CSS et un JavaScript (bien mettre ce dernier après l'appel de Leaflet).
https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js
Notre carte sera centrée sur Mercurey (et j'en profite pour faire un coucou à mes parents qui y ont vécu quelques années).
let center = [46.8383, 4.7279];
let map = L.map("map").setView(center, 7);
L.tileLayer("https://tile.osm.org/{z}/{x}/{y}.png", {
attribution: `© OpenStreetMap contributors`,
}).addTo(map);
Nous chargeons alors notre fichier, qui fera appel à une fonction pour tracer les clusters :
fetch("data/viticole.json")
.then((response) => response.json())
.then((data) => {
drawClusters(data);
});
Le plugin fonctionne en utilisant des marqueurs, qu'il va automatiquement regrouper, s'ils sont dans une instance de L.markerClusterGroup(). Donc, petite boucle pour créer nos marqueurs, que nous ajouterons à notre map. Tout en utilisant notre classique fitBounds pour zoomer sur la zone.
function drawClusters(data) {
const markers = L.markerClusterGroup();
let bounds = L.latLngBounds();
data.forEach((point) => {
const marker = L.marker([point.lat, point.lng]);
marker.bindPopup(`<b>${point.commune}</b><br>
${point.count} producteur(s)`);
markers.addLayer(marker);
bounds.extend(marker.getLatLng());
});
map.addLayer(markers);
map.fitBounds(bounds);
}
Récapitulons
La mise en œuvre se déroule donc en quatre étapes :
- Intégration du plugin : ajout des fichiers CSS et JavaScript via CDN
- Création de la carte de base : initialisation d'une carte Leaflet classique
- Préparation des données : un fichier JSON contenant les coordonnées et informations de chaque producteur
- Génération des clusters : création d'un groupe de marqueurs spécial (
L.markerClusterGroup()) qui gère automatiquement le regroupement
Le plugin s'occupe de tout le travail complexe : calcul des distances, regroupement dynamique, animation des transitions lors du zoom. Vous vous concentrez uniquement sur vos données.
Ce qu'on observe sur la carte
Le résultat est particulièrement parlant : la carte révèle les zones de forte concentration viticole en Bourgogne-Franche-Comté. En zoomant, les grappes se subdivisent progressivement, révélant la répartition précise des établissements viticoles jusqu'aux marqueurs individuels.
