Leaflet Map - Groupement de markers

Ajout de 900 markers à une carte

Dernière mise à jour le 12/12/2020
leaflet1.6.0

Comme dans le tutoriel de groupement de markers avec l'API Google Maps, nous affichons ici les 878 villes (et cedex) françaises commençant par la lettre 'H'. Pour plus d'information sur la notion de groupement, merci de vous reporter à ce tutoriel.

La librairie utilisée

En plus de l'API Leaflet, ce tutoriel utilise une librairie nommée Marker Clustering plugin for Leaflet (il faut télécharger la version (release) et récupérer les fichiers dedans pour les inclure dans votre projet). Elle offre par défaut des comportements intéressants :

Initialisation

Nous initialisons la carte avec le Layer StamenToner comme dans le précédent tutoriel.

var map = L.map('cluster').setView([46.90296, 1.90925], 6);

var stamenToner = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 20,
	ext: 'png'
});

map.addLayer(stamenToner);

Ajout des markers

La mise en oeuvre du groupement de markers se fait très simplement avec la classe L.MarkerClusterGroup. Il suffit ensuite d'ajouter chaque marker au cluster construit. Enfin on ajoute notre cluster à la carte en tant que nouveau Layer.

var markersCluster = new L.MarkerClusterGroup();

var cities = getCities();
for (var i = 0; i < cities.length; i++) {
	var latLng = new L.LatLng(cities[i][1], cities[i][2]);
	var marker = new L.Marker(latLng, {title: cities[i][0]});
	markersCluster.addLayer(marker);
}

map.addLayer(markersCluster);

La fonction getCities est visible dans le code source de la page. Les options sont détaillées sur le site de la librairie mais n'hésitez pas à poser vos questions ici.

Pour ne pas s'arracher les cheveux

Info: Si vous avez d'abord ajouté les markers à votre carte et qu'ensuite vous vous êtes dit qu'un regroupement serait préférable, n'oubliez pas de supprimer de votre code le .addTo(map) de vos markers. Merci à Damien pour cette astuce qui peut éviter de perdre du temps en se retrouvant à la fois avec les markers et les regroupements.

Personnalisation des markers

Il est possible de modifier les clusters pour les personnaliser soit avec une image particulière soit avec un style CSS choisi. Il suffit pour cela de modifier la construction du L.MarkerClusterGroup et d'ajouter une entrée CSS.

var markersClusterCustom = new L.MarkerClusterGroup({
	iconCreateFunction: function(cluster) {
		return L.divIcon({ 
			html: cluster.getChildCount(), 
			className: 'mycluster', 
			iconSize: null 
		});
	}
});
.mycluster {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background-color: #3498db;
	color: white;
	text-align: center;
	font-size: 20px;    
	line-height: 40px;
	margin-top: -20px;
	margin-left: -20px;
}

Cette version est assez simple car c'est toujours la même icône qui est utilisée. La librairie Leaflet met à disposition un objet L.divIcon qui peut être utilisé pour les clusters. Il comprend dans notre exemple un code html qui contient juste le nombre de fils contenus dans le cluster, la classe CSS utilisé et il ne faut pas oublier de mettre iconSize à null pour laisser le CSS géré la taille.

Pour faire varier l'icône il faut ajouter une condition sur cluster.getChildCount() et modifier la classe CSS ou choisir une image particulière en fonction du nombre d'enfants. Dans l'exemple suivant la classe sera ainsi associée au nombre de chiffres du nombre d'enfants sur le cluster. Cela permet de dessiner des cercles plus gros et d'utiliser une police différentes. Cet exemple est entièrement repris de ce site.

var markersClusterCustomPlus = new L.MarkerClusterGroup({
	iconCreateFunction: function(cluster) {
		var digits = (cluster.getChildCount()+'').length;
		return L.divIcon({ 
			html: cluster.getChildCount(), 
			className: 'cluster digits-'+digits,
			iconSize: null 
		});
	}
});

Le code CSS est en revanche beaucoup plus long car il faut un style par nombre de chiffres.

.cluster {
	background: #3498db;
	border-radius: 50%;
	text-align: center;
	color: white;
	font-weight: 700;
	border: 1px solid #3498db;
	font-family: monospace;
}
.cluster:before {
	content: ' ';
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	border: 1px solid white;
}
.digits-1 {
	font-size: 14px;
	height: 28px;
	width: 28px;
	line-height: 28px;
	margin-top: -14px;
	margin-left: -14px;
}
.digits-2 {
	font-size: 16px;
	height: 34px;
	width: 34px;
	line-height: 35px;
	margin-top: -17px;
	margin-left: -17px;
}
.digits-2:before {
	border-width: 2px;
}
.digits-3 {
	font-size: 18px;
	height: 48px;
	width: 47px;
	line-height: 47px;
	border-width: 3px;
	margin-top: -24px;
	margin-left: -24px;
}
.digits-3:before {
	border-width: 3px;
}
.digits-4 {
	font-size: 18px;
	height: 58px;
	width: 58px;
	line-height: 57px;
	border-width: 4px;
	margin-top: -29px;
	margin-left: -29px;
}
.digits-4:before {
	border-width: 4px;
}

VOUS POURRIEZ AIMER


Leaflet Maps - Création d'une carte de chaleur (heatmap)

Leaflet Map - Heat Map

Carte des tremblements de terre depuis 1900

Trafic du métro parisien avec Leaflet et D3JS

Trafic des stations du métro de Paris

Trafic entrant dans chaque station du métro parisien (Leaflet & D3JS)

Diagramme de Voronoi avec D3JS sur une carte Leaflet

Liste des aéroports français

Leaflet & D3JS & Voronoi

comments powered by Disqus