Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically change the color of a polygon in leaflet?

For anyone who is familiar with Leaflet, do you know a way to dynamically change a polygon's color? For example, take a circle defined like this:

window.circle = L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#ffffff',     fillOpacity: 0.5 }).addTo(map); 

Then later, after a user clicks a button somewhere on an interface (for example), I want to change the color of the circle like this:

window.circle.options.fillColor = "#dddddd"; 

The code changes the value for window.circle.options.fillColor, but the change is not reflected by a change to the color of the polygon on the map. I've searched around but haven't found anything. Any ideas?

Thanks.

like image 488
Owen Avatar asked Mar 25 '13 00:03

Owen


2 Answers

If you are looking for something like this:

const circle = L.circle([lat, lng], {    style: style,    onEachFeature: onEachFeature, }); 

These options are available for geoJson data ie: L.geojson()..... :D

So, for polygon . Try,

circle.setStyle({     color: 'red' }); 
like image 20
Bimal Grg Avatar answered Oct 10 '22 06:10

Bimal Grg


L.Circle extends L.Path (http://leafletjs.com/reference.html#path), that have method setStyle( <Path options> object ), and you can apply new style as window.circle.setStyle({fillColor: '#dddddd'});

like image 111
tbicr Avatar answered Oct 10 '22 08:10

tbicr