Cómo añadir un cluster en Leaflet


En este tutorial veremos cómo añadir un cluster a nuestro proyecto de Leaflet.js.

Continuando con plugins de leafletjs que puedes utilizar para mejorar tus visualizaciones está markercluster. Lo puedes descargar en https://github.com/Leaflet/Leaflet.markercluster

Con este plugin podrás agrupar las features que añadiste a tu mapa para que la visualización sea más clara y menos recargada.

Es muy útil cuando tienes una gran cantidad de puntos en un espacio reducido, contribuyendo a no recargar demasiado la visualización.

Les muestro un ejemplo de una visualización con y sin plugin.



La forma de utilizarlo es muy sencilla. Después de descargar el archivo .zip del repositorio tienes que añadir como mínimo estos dos archivos.

Uno de hoja de estilos llamada markerCluster.Default.css y un script llamado markercluster.js:

					
<link rel="stylesheet" href="markerCluster.Default.css">
<script type="text/javascript" src="markercluster.js"></script>
					
				

Para utilizar el plugin en tu script, son solamente tres pasos. Crear un objeto markerClusterGroup, añadirle a ese objeto las features de tu layer y añadir el objeto al mapa.

El código sería algo así:

					
var map = L.map('map');
map.setView([-30.90033294, -60.6920008], 9);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
	attribution:'©<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
	contributors',
	updateWhenIdle: true,
	reuseTiles: true
}).addTo(map);
var markerCluster = L.markerClusterGroup();
var visitas = L.geoJson(visitas,{
	onEachFeature: function(feature, layer){
		markerCluster.addLayer(layer);
		layer.bindPopup("<p class='infoHeader'><strong>"+ feature.properties.Nombre +"</p>");
		layer.on('mouseover', function(e) {
			this.openPopup();
		});
		layer.on('mouseout', function(e) {
			this.closePopup();
		});
	}
});
map.addLayer(markerCluster);
					
				

Esa sería la forma más sencilla de aplicar el plugin, con las características que te da por defecto. También puedes personalizar tu cluster y cambiar varias propiedades para que se ajusten a lo que estás buscando.

Algunas propiedades son:

● showCoverageOnHover: Cuando pasas el ratón sobre un grupo, muestra los límites de sus marcadores. Por defecto está en True, pero lo puedes desactivar.

● zoomToBoundsOnClick: Cuando haces clic en un grupo, hacemos zoom a sus límites. Por defecto está en True

● spiderfyOnMaxZoom: Cuando haces clic en un grupo en el nivel de zoom inferior, lo modifica para que puedas ver todos sus marcadores.

● removeOutsideVisibleBounds: Los clústeres y marcadores demasiado lejos de la ventana gráfica se eliminan del mapa para mejorar el rendimiento.

● animate: split (Dividir)/ merge (fusionar) las features del grupo al hacer zoom.

● animateAddingMarkers:Si se establece en True (y la opción animar también es verdadera), podrás agregar marcadores individuales a MarkerClusterGroup después de que se haya agregado al mapa, agregará el marcador y lo animará en el clúster. El valor predeterminado es falso.

● disableClusteringAtZoom:Si se establece, en este nivel de zoom y por debajo, los marcadores no se agruparán. Este valor predeterminado es deshabilitado.

● maxClusterRadius: El radio máximo que cubrirá un grupo desde el marcador central (en píxeles). Predeterminado 80.

● singleMarkerMode: Si se establece en verdadero, anula el icono de todos los marcadores agregados para que aparezcan como un grupo de 1 tamaño.Los marcadores no se reemplazan por objetos de clúster, sólo se reemplaza su icono. Por lo tanto, todavía reaccionan a los eventos normales.

● spiderLegPolylineOptions: Le permite especificar PolylineOptions para rediseñar los clusters. Por defecto, son { weight: 1.5, color: '#222', opacity: 0.5 }.

● spiderfyDistanceMultiplier: Aumente de 1 para aumentar la distancia desde el centro. Es útil cuando estamos usando íconos de marcadores grandes.

● iconCreateFunction: Función utilizada para crear el icono de clúster.


Además podemos seguir personalizando nuestros cluster modificando el fichero markerCluster.Default.css, en el que podemos cambiar los colores, la posición o el tamaño de nuestros elementos:

					
.marker-cluster-small {
	background-color: rgb(103, 104, 194, 0.6);
}
.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
}
					
				




Sobre el Autor


Pedro Calás Blasco

Cartógrafo. Valenciano por el Mundo. He vivido en Mexico, Brasil y Argentina. Entusiasta de los mapas y las tecnologías Web Mapping. Fundador y coordinador de Mapearte. impulsamos y desarrollamos proyectos que contribuyan al desarrollo social a través de las tecnologías.


¿Eres desarrollador? Únete a la red