0

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.

closed as off-topic by ahmadhanb, Erik, whyzar, Vince, Dan C Mar 4 at 15:13

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – ahmadhanb, Erik, whyzar, Vince, Dan C
If this question can be reworded to fit the rules in the help center, please edit the question.

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

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:

<style>
    .leaflet-div-icon {
      background: none!important;
      border: none!important;
    }
</style>

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.