Leaflet - Groupement de markers

Ajout de 900 markers à une carte

Dernière mise à jour le 23/06/2018
leaflet1.3.1

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 récupérer les fichiers CSS et JS présent dans le dossier dist). 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.

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;
}

A suivre : Leaftlet - Heatmap Voir le tutoriel

comments powered by Disqus