Cambiar el color del icono del grupo de marcadores del folleto, heredando el resto de las propiedades CSS predeterminadas

Luego de de nuestra prolongada recopilación de información resolvimos este atasco que pueden tener algunos los lectores. Te ofrecemos la respuesta y deseamos resultarte de mucha apoyo.

Solución:

su iconCreateFunction debería verse algo como esto

iconCreateFunction: function (cluster) 
 var childCount = cluster.getChildCount();
 var c = ' marker-cluster-';
 if (childCount < 10) 
   c += 'small';
  
 else if (childCount < 100) 
   c += 'medium';
  
 else 
   c += 'large';
 

 return new L.DivIcon( html: '
' + childCount + '
', 
  className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) );
 

y dale a css algo como esto

.marker-cluster-small 
background-color: rgba(218, 94, 94, 0.6);

.marker-cluster-small div 
background-color: rgba(226, 36, 36, 0.6);

.marker-cluster-medium 
background-color: rgba(241, 211, 87, 0.6);

.marker-cluster-medium div 
background-color: rgba(240, 194, 12, 0.6);


.marker-cluster-large 
background-color: rgba(253, 156, 115, 0.6);

.marker-cluster-large div 
background-color: rgba(241, 128, 23, 0.6);

vea el plunker a continuación para ver un ejemplo de trabajo completo

https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview

Comentarios y puntuaciones

Recuerda dar difusión a este enunciado si te fue útil.

---

---

Utiliza Nuestro Buscador