En el artículo anterior vimos cómo personalizar marcadores con Leaflet Map: iconos propios, tooltips, popups con HTML y marcadores con Font Awesome usando [leaflet-extramarker].
En este artículo vamos a dar un paso más con el plugin Extensions for Leaflet Map: clustering para mapas con muchos puntos, listas de marcadores navegables y marcadores desde archivos GeoJSON.
Si todavía no tienes el plugin instalado, ve a Plugins > Añadir nuevo, busca Extensions for Leaflet Map e instálalo. Necesitas tener Leaflet Map instalado y activo previamente.
Clustering con [cluster]
Cuando tienes muchos marcadores en el mapa, el clustering es una técnica que permite agrupar los puntos cercanos en un único elemento que muestra el número de marcadores que contiene. Al hacer zoom, los clusters se separan hasta mostrar los marcadores individuales.
Imagina que tienes que mostrar ocho monumentos de Granada en tu mapa. ¿Qué pasará cuando el usuario se aleje tanto que se vea un único punto? Especialmente, si tenemos otro grupo de monumentos en otra ciudad, este problema hará que no sepamos cuántos puntos de interés hay en cada una de las ciudades y, mucho menos, que podamos distinguirlos entre sí. Pues para facilitar esta información se utiliza esta técnica. Veamos este ejemplo:
[leaflet-map zoom=14 lat=37.18 lng=-3.59]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Alhambra"]Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994 title="Catedral de Granada"]Catedral de Granada[/leaflet-marker]
[leaflet-marker lat=37.1771 lng=-3.5902 title="Museo de la Alhambra"]Museo de la Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1804 lng=-3.5862 title="Jardines del Generalife"]Jardines del Generalife[/leaflet-marker]
[leaflet-marker lat=37.1805 lng=-3.5918 title="Palacio de Carlos V"]Palacio de Carlos V[/leaflet-marker]
[leaflet-marker lat=37.1811 lng=-3.5975 title="Monasterio de San Jerónimo"]Monasterio de San Jerónimo[/leaflet-marker]
[leaflet-marker lat=37.1823 lng=-3.5889 title="Museo Arqueológico"]Museo Arqueológico de Granada[/leaflet-marker]
[leaflet-marker lat=37.1779 lng=-3.5943 title="Capilla Real"]Capilla Real[/leaflet-marker]
[cluster]
El shortcode [cluster] va siempre al final, después de todos los marcadores. Éste será el que de la orden de agruparlos en cuanto no sea eficiente mostrarlos a la vez.
Controlar el radio del cluster
Este shortcode ([cluster]) tiene un parámetro (maxClusterRadius) que permite controlar el radio del cluster:
[cluster maxClusterRadius=40]
Con maxClusterRadius=40 los clusters son más pequeños y se separan antes al hacer zoom. El valor por defecto es 80.
Desactivar el clustering a partir de un nivel de zoom
También podríamos desactivar el clustering a partir de un nivel determinado de zoom:
[cluster disableClusteringAtZoom=15]
En este caso, a partir del zoom 15 los marcadores se muestran individualmente aunque estén cerca.
disableClusteringAtZoom con el valor 15, al llegar a este valor, deja de funcionar la agrupación de marcadores.Otros parámetros
Otros parámetros que podríamos utilizar para mejorar nuestros clusters serían los siguientes:
showCoverageOnHover: muestra el área que cubre el cluster al pasar el ratón (1/0, por defecto1). Puede ser útil, aunque también puede confundir un poco porque se ve como una especie de polígono, que representa los límites que circunscriben a los marcadores.zoomToBoundsOnClick: hace zoom al área del cluster al hacer clic (1/0, por defecto1).spiderfyOnMaxZoom: en el zoom máximo, despliega los marcadores en espiral para ver todos (1/0, por defecto1)
💡
[cluster]también funciona con [leaflet-gpx],[leaflet-kml]y[leaflet-geojson], no solo con[leaflet-marker].
Estrategias de despliegue con [placementstrategies]
Puede ocurrir que varios marcadores se encuentren exactamente en el mismo punto geográfico. En este caso, el clustering estándar los solaparía aunque hagas zoom al máximo. Para darle solución a este problema, [placementstrategies] controla cómo se distribuyen visualmente esos marcadores cuando se despliega el cluster.
Veamos un ejemplo que quizá se entienda un poco mejor:
[leaflet-map zoom=14 lat=37.18 lng=-3.59]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 1"]Marcador 1[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 2"]Marcador 2[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 3"]Marcador 3[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 4"]Marcador 4[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 5"]Marcador 5[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 6"]Marcador 6[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 7"]Marcador 7[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 8"]Marcador 8[/leaflet-marker]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Marcador 9"]Marcador 9[/leaflet-marker]
[placementstrategies elementsPlacementStrategy="default" maxClusterRadius=40]Como podemos ver, todos los marcadores están ubicados justo en el mismo punto. Esto hace que solo se pueda ver uno. Al establecer la estrategia de ubicación con placementstrategies, aparece un cluster con todos los marcadores agrupados.
Pero, al hacer clic, los marcadores se desplegarán con la estrategia que hayamos elegido. En este ejemplo hemos elegido la estrategia por defecto, que es una especie de espiral. Esto no quiere decir que los marcadores estén ubicados formando esa espiral, sino que es una forma de verlo más «amigable».
Este comando también lo puedes utilizar con [leaflet-extramarker].
Como siempre, los valores por defecto de cada parámetro los podrás configurar en Ajustes > Leaflet Map > Extensions for Leaflet Map y podrás sobreescribirlos en el shortcode de cada mapa.
Marcadores desde GeoJSON con [geojsonmarker]
Añadir marcadores con [leaflet-marker] o con [leaflet-extramarker] está muy bien para cuatro o cinco marcadores, diez echándole paciencia. Pero si has trabajado alguna vez con un GIS, sabrás lo cómodo que es generar datos desde este tipo de software, gestionarlos y exportarlos posteriormente a formatos compatibles como es el formato GeoJSON.
Pero no te preocupes, si no has tenido nunca contacto con un GIS, o ni siquiera sabes de lo que te estoy hablando, hay alternativas muy cómodas. Antes de nada, que sugiero que leas este artículo para saber qué es un GIS. Y, si no necesitas una herramienta tan avanzada, te puede servir geojson.io, una herramienta online que nos permite pintar puntos, polígonos, etc, asociarles datos a cada uno de ellos tal y como haríamos con un GIS, y generar un GeoJSON que podremos importar a nuestro WordPress para mostrar datos más complejos.
Por tanto, como decíamos, si tienes datos en formato GeoJSON, [geojsonmarker] permite diferenciar visualmente los marcadores según las propiedades de cada feature, sin definir cada punto con un shortcode independiente. Lo cual nos ahorra muchos dolores de cabeza.
Para seguir este ejemplo, sube el archivo monumentos-granada.geojson a tu WordPress (en Medios > Añadir nuevo) y copia la URL que te asigna.
⚠️ Seguramente tendrás que usar un plugin para permitir subir nuevos tipos de archivo como WP Add Mime Types.
El archivo tiene ocho monumentos incluidos con una propiedad Tipo que toma los valores: monumento, iglesia, museo y jardin. Esto nos va a permitir diferenciar los marcadores por tipos, de la siguiente forma:
[leaflet-map fitbounds]
[leaflet-geojson src="https://tudominio.com/wp-content/uploads/monumentos-granada.geojson"]{name}[/leaflet-geojson]
[geojsonmarker property=Tipo auto]
Con auto, el plugin asigna colores diferentes a cada valor de la propiedad Tipo sin que tengas que definirlos. Funciona hasta 16 valores distintos para marcadores estándar y 14 para ExtraMarkers.
Pero ahora veamos un ejemplo con los colores definidos manualmente:
[leaflet-map fitbounds]
[leaflet-geojson src="https://guorpre.com/wp-content/uploads/2026/04/monumentos-granada.geojson"]{Texto}[/leaflet-geojson]
[geojsonmarker property=Tipo values="Monumento,Iglesia,Museo,Jardín" iconprops="red,blue,green,orange" groups="Monumento,Iglesia, Museo,Jardín" icondefault=blue]
Si queremos controlar los grupos y mostrar u ocultar categorías, haremos lo siguiente:
[leaflet-map fitbounds]
[leaflet-geojson src="https://tudominio.com/wp-content/uploads/monumentos-granada.geojson"]{name}[/leaflet-geojson]
[geojsonmarker property=tipo values="monumento,iglesia,museo,jardin" iconprops="red,blue,green,orange" icondefault=blue groups="Monumentos,Iglesias,Museos,Jardines" visible=1,1,1,1 position=topright]Con groups aparece un control en el mapa que permite al usuario mostrar u ocultar cada categoría. visible define cuáles están visibles al cargar (1 visible, 0 oculto).
Tienes un montón de puntos en el GeoJSON y quieres añadir clustering. Pues es tan fácil como seguir los pasos que ya vimos anteriormente para los marcadores habituales.
[leaflet-map fitbounds]
[leaflet-geojson src="https://tudominio.com/wp-content/uploads/monumentos-granada.geojson"]{name}[/leaflet-geojson]
[geojsonmarker property=tipo auto maxClusterRadius=60]
Los parámetros de [cluster] los puedes añadir perfectamente al shortcode [geojsonmarker].
Lista de marcadores con [listmarker]
El comando [listmarker] genera un panel junto al mapa con los títulos de los marcadores. Al hacer clic en un elemento de la lista, el mapa se centra en ese marcador y abre su popup, lo cual puede ayudar a que el usuario no se pierda en el mapa. Aunque no conviene utilizarlo si la lista es extremadamente larga.
⚠️ El parámetro
titlees obligatorio en[leaflet-marker]y[leaflet-extramarker]para que el marcador aparezca en la lista. Sintitle, el marcador no se incluye.
Veamos un ejemplo de cómo funciona [listmarker]:
[leaflet-map zoom=14 lat=37.18 lng=-3.59]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Alhambra"]Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994 title="Catedral de Granada"]Catedral de Granada[/leaflet-marker]
[leaflet-marker lat=37.1771 lng=-3.5902 title="Museo de la Alhambra"]Museo de la Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1804 lng=-3.5862 title="Jardines del Generalife"]Jardines del Generalife[/leaflet-marker]
[listmarker]
Ahora imagina que queremos mostrar la lista colapsada por defecto y el hover activado. Solo tendrás que añadir estos dos atributos a [listmarker]:
[listmarker collapse=true hover=true]
Con hover=true, al pasar el ratón por un elemento de la lista el mapa resalta ese marcador sin necesidad de hacer clic.
Si usas [cluster], ten en cuenta que el shortcode debe ir después de [listmarker]:
[leaflet-map zoom=14 lat=37.18 lng=-3.59]
[leaflet-marker lat=37.1760 lng=-3.5880 title="Alhambra"]Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1767 lng=-3.5994 title="Catedral de Granada"]Catedral de Granada[/leaflet-marker]
[leaflet-marker lat=37.1771 lng=-3.5902 title="Museo de la Alhambra"]Museo de la Alhambra[/leaflet-marker]
[leaflet-marker lat=37.1804 lng=-3.5862 title="Jardines del Generalife"]Jardines del Generalife[/leaflet-marker]
[listmarker update=true]
[cluster]
Con update=true (valor por defecto), la lista muestra solo los marcadores visibles en el viewport actual. Al hacer zoom o mover el mapa, la lista se actualiza.
Si estás utilizando GeoJSON, tendrás que especificar qué propiedad del archivo se usa como nombre en la lista:
[leaflet-map fitbounds]
[leaflet-geojson src="https://tudominio.com/wp-content/uploads/monumentos-granada.geojson"]{name}[/leaflet-geojson]
[listmarker propertyname=name]Conclusión
Como has podido comprobar tanto en el anterior artículo como en éste, con Leaflet Map y Extensions for Leaflet Map tienes cubiertos prácticamente todos los escenarios habituales de marcadores para WordPress.
Ahora puedes llenar tus mapas de marcadores como un profesional. A lo loco…
