Leaflet: Adicione a capacidade de definir estilos css no DivIcon

Oi,
o que significa a cor do ícone? Eu defini a cor de fundo em css e o DivIcon mudou a cor

não é o que você precisa? Você pode por gentileza ser mais específico?

Olá @ samik88 ,

Como especifiquei no caso de uso, a cor (um código de cor RGB) do ícone do marcador é recuperada de um banco de dados com as coordenadas do marcador, portanto, não é possível defini-lo em uma classe css (para fazer isso envolveria a criação de 16777215 classes css (uma para cada código de cor rgb sem incluir opacidade), o que seria uma coisa estúpida de se fazer).

Você pode alterar seu exemplo para ver o caso de uso adicionando um campo de texto no qual você pode inserir uma cor rgb para o marcador e então você descobrirá que não pode definir isso no DivIcon e, portanto, não pode alterar a cor do ícone do marcador.

Fazer isso envolveria ser capaz de definir o atributo de estilo css no DIV gerado

Esta funcionalidade pode ser coberta pelo método getElement() de L.Marker , por exemplo:

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';

Veja um exemplo prático .

Este é um caso extremo, então eu prefiro recomendar estender a classe L.DivIcon para adicionar algum estilo personalizado, leia os tutoriais sobre como escrever plug-ins. 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;
    }
})

Pessoalmente, não acho que esse seja um recurso amplamente usado, então vou encerrar isso por enquanto.