I have a list of markers. I am assigning an icon to each marker and creating that icon from a black .png circle. I want to change color of that marker based on input value from user.

I have searched this on Google and found out that we can apply filter to PNG to change color but its not working. Any other ideas ?

The problem is I have been provided the circle PNG from client and I have to use that.

  • 1
    Can you please provide a piece of your code that you by so far have? – Taras Mar 4 '19 at 5:34

If you are able to convert the .png to a .svg (inkscape is a good tool) then you can do something like:

var color = '#0DEAD0';
var svg = '<svg height="10" width="10"><circle cx="5" cy="5" r="4" fill="' + color + '" /></svg>';
var icon = L.divIcon({ html: svg, iconSize: [10, 10], iconAnchor: [10, 10] });
L.marker([51.5, -0.09], { icon: icon }).addTo(mymap);

Some style overrides may be required if there's transparency:

    .leaflet-div-icon {
      background: none!important;
      border: none!important;

I'm not aware of any way to change the color of a .png inside a browser.

Not the answer you're looking for? Browse other questions tagged or ask your own question.