Leaflet: Agregue la capacidad de establecer estilos CSS en DivIcon

Hola,
¿Qué significa el color del icono? Configuré el color de fondo en css y DivIcon cambió el color

¿No es lo que necesitas? ¿Puedes ser más específico por favor?

Hola @ samik88 ,

Como especifiqué en el caso de uso, el color (un código de color RGB) del icono del marcador se recupera de una base de datos con las coordenadas del marcador, por lo que no es posible definirlo en una clase css (hacerlo implicaría crear 16777215 clases css (una para cada código de color rgb sin incluir opacidad), lo cual sería una estupidez).

Puede cambiar su ejemplo para ver el caso de uso agregando un campo de texto en el que puede ingresar un color rgb para el marcador y luego encontrará que no puede establecer eso en DivIcon y, por lo tanto, no puede cambiar el color del icono del marcador.

Hacer eso implicaría poder establecer el atributo de estilo css en el DIV generado

Esta funcionalidad se puede cubrir con el método getElement() de L.Marker , por ejemplo:

var marker = new L.Marker(myCenter, {
  icon: L.divIcon()
});
map.addLayer(marker);

marker.getElement().style.border = '5px dotted lime';
marker.getElement().style.width = '50px';
marker.getElement().style.height = '50px';

Vea un ejemplo funcional .

Este es un caso marginal, por lo que prefiero extender la clase L.DivIcon para agregar un estilo personalizado, lea los tutoriales sobre la escritura de complementos. Seria algo como

L.DivIcon.CustomColor = L.DivIcon.extend({
    createIcon: function(oldIcon) {
           var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
           icon.style.backgroundColor = this.options.color;
           return icon;
    }
})

Personalmente, no creo que esta sea una función ampliamente utilizada, así que cerraré esto por ahora.