Leaflet: Add the ability to set css styles on DivIcon

Hi,
what does color of the icon mean? I set background-color in css and the DivIcon changed the color

isn't it what you need? can you please be more specific?

Hi @samik88,

As I specified in the use case, the colour (an RGB colour code) of the marker icon is retrieved from a database with the marker coordinates, so it is not possible to define it in a css class (to do so would involve creating 16777215 css classes (one for each rgb colour code not including opacity), which would be a stupid thing to do).

You can change your example to see the use case by adding a text field that you can enter an rgb colour for the marker and then you will find you cannot set that on the DivIcon and so cannot change the marker icon colour.

To do that would would involve being able to set the css style attribute on the generated DIV

This functionality can be covered by the getElement() method of L.Marker, e.g.:

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

See a working example.

This is kinda an edge case, so I'd rather recommend extending the L.DivIcon class to add some custom styling, read the tutorials on writing plugins. It would be something like

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;
    }
})

I personally don't think that this would be a widely used feature, so I'll close this for now.