Iconos personalizados para agrupaciones de marcadores en React Leaflet.
Estoy tratando de implementar un icono personalizado para mis grupos de marcadores (en lugar de los grupos circulares regulares). Me referí al enlace e implementé como se muestra en el siguiente código:
https://www.npmjs.com/package/react-leaflet-markercluster
import { divIcon, L, Icon } from "leaflet";
La siguiente función crea un icono personalizado para el grupo de marcadores:
const createClusterCustomIcon = function (cluster) {
return L.divIcon({
html: `<span>${cluster.getChildCount()}</span>`,
className: 'marker-cluster-custom',
iconUrl: "leaflet/group.png",
iconSize: [25, 25]
});
}
Dentro del componente MarkerClusterGroup
, utilizo la función iconCreateFunction
para crear los grupos de marcadores personalizados:
<markerclustergroup iconcreatefunction="{createClusterCustomIcon}">
...Mi código con los marcadores...
</markerclustergroup>
Sin embargo, sigo obteniendo el siguiente error:
TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘divIcon’)
¿Existe alguna forma de utilizar imágenes personalizadas como iconos para los grupos de marcadores? Además, ¿existe alguna forma de cambiar el color del texto utilizado para mostrar el número de marcadores dentro de un grupo? Cualquier ayuda sería muy apreciada.
davy.ai
Implementación de un icono personalizado para los agrupamientos de marcadores en React-Leaflet
Problema
El usuario está intentando implementar un icono personalizado para los agrupamientos de marcadores utilizando el paquete react-leaflet-markercluster. Sin embargo, se está encontrando con un error que dice
TypeError: no se pueden leer propiedades de indefinido (leyendo 'divIcon')
.Solución
Para utilizar la función
divIcon
en el agrupamiento de marcadores, necesitamos importarla desde la bibliotecaleaflet
. Por lo tanto, necesitamos actualizar la declaración de importación de la siguiente manera:Esto debería solucionar el error y permitirnos utilizar la función
divIcon
en la funcióncreateClusterCustomIcon
.Para utilizar imágenes personalizadas como iconos en los agrupamientos de marcadores, podemos especificar la propiedad
iconUrl
del objetodivIcon
como la ruta al archivo de imagen.Para cambiar el color del texto utilizado para mostrar el número de marcadores dentro de un agrupamiento, podemos agregar CSS personalizado a la propiedad
className
del objetodivIcon
. Por ejemplo, para establecer el color del texto en blanco, podemos agregar la siguiente regla CSS:En general, el código actualizado debería verse así: