Customiser ses clusters Leaflet

Comment créer des clusters sous forme de Pie Chart avec Leaflet ?

Je reprend ici la suite de mon précédent article sur les cartes personnalisées créées avec Leaflet.

Afficher des clusters personnalisés

L’idée ici est d’afficher des icônes de clusters personnalisées, tout en utilisant le plugin markerCluster.js  et awesome-marker.js.
Je vous invite à consulter mon précédent tuto pour comprendre la manière dont j’ai procédé pour créer toute ma carte.

La différence pour un affichage en camembert de mes clusters réside dans à peine quelques lignes de code. Celles-ci m’ont été fournies par Ivan Sanchez, l’auteur du plugin L.marker.Stack.

Deux rendus en fonction du navigateur

Ici on utilisera la propriété css icon-gradient, qui malheureusement, ne fonctionne pas sur firefox ou IE. A la place on utilisera donc le linear-gradient classique.

Voici un exemple de rendu possible avec icon-gradient

et avec linear-gradient

Se faciliter la vie avec awesome-marker.js

L’idée est de créer une petite formule mathématique pour récupérer le nombre de marqueurs pour chaque « catégorie » de marqueurs, et de remplir la couleur d’arrière plan du cluster en fonction des proportions obtenues. Comme j’utilise le plugin awesome-marker.js., et que la couleur de mes icônes est défiinie au préalable dans le code, je n’ai pas vraiment besoin de css additionnel .

Chaque marqueur possède donc une couleur, le pourcentage du nombre de marqueurs va donc afficher la couleur directement.

Voici ce code, commenté pour explication:

 var clusters = L.markerClusterGroup({ // on instancie notre cluster
        spiderfyOnMaxZoom: false, // ici j'annule l'effet de toile d'araignée pour l'affichage des marqueurs
        showCoverageOnHover: false, // ici j'annule l'affichage du zone bleue par défaut qui définie la zone de couverture du cluster
        zoomToBoundsOnClick: true, // ici je garde l'effet de zoom lorsque je clique sur le cluster
		/* This part was made with the kind help of @IvanSanchez*/
		iconCreateFunction: function (cluster) { // fonction de création d'un cluster personnalisé
			var markers = cluster.getAllChildMarkers(); // on récupère tous les marqueurs du cluster ciblé
			var childCount = cluster.getChildCount(); // on en récupère le nombre
			console.log(markers); // on vérifie ce qu'on a en console
			var stops = []; // création du tableau de nos propriété css

			for (let i=0, l=markers.length; i<l; i++) { // boucle qui itère à travers le tableau de marqueurs
				var color = markers[i].defaultOptions.icon.options.markerColor;		// là il faut vérifier en console le chemin vers vos icône, pour moi c'est	defaultOptions.icon.options.markerColor;
				let startPercent = 100 * (i/l); // on crée la formule permettant de récupérer le pourcentage du nombre de tel ou tel marqueur
				let endPercent = 100 * (i+1)/l; // pareil
				stops.push(color + ' ' + startPercent + '%'); // on afficher le pourcentage
				stops.push(color + ' ' + endPercent + '%');    	
			}
			var html = '<div class="circleMarker" style="background: conic-gradient(' + stops.join(',') + '" >' + markers.length + "</div>"; // on utilise ici la propriété css coni-gradient
			return L.divIcon({ html: html, className: "marker-cluster", iconSize: L.point(40, 40) }); // on afficher notre cluster

		  },
	});

Et voici le rendu final. Agrandissez la fenêtre en allant directement sur CodePen ou en cliquant sur 0.5 ou 0.25 tout en bas de la fenêtre !

See the Pen
Leaflet custom Map with custom Pie Charts style culsters (conic-gradient css) by blogob (@yuyazz)
on CodePen.

Par Copier coller | Dans jQuery