I am trying to draw a set of polygons on a map and then change the color according to an external event which updates a property of the MapContainer. In my example the property is "view". I can see that the property value is updated properly but the polygons are not re-rendered. It's a simple set of polygon without Tile (no geographical map, only the polygons). I tried both with color and fillColor, but nothing changes when I update "view". Should I somehow force a map refresh? If yes, how?
<MapContainer
id="leaflet-map"
center={center}
zoom={zoom}
>
{this.props.data.map((poly, index) => {
return (
<Polygon
key={`poly-${poly.id}`}
color={poly.color[this.props.view]}
fillColor={
poly.color[this.props.view]
}
positions={poly.attributes.coordinates}
>
</Polygon>
);
})}
</MapContainer>
OK, I found the answer. I hope this can help others. I have to modify pathOptions.color and pathOptions.fillColor and not directly color and fillColor. It works like this for me:
<Polygon
key={`poly-${poly.id}`}
pathOptions={{
color: poly.color[this.props.view],
fillColor: poly.color[this.props.view]
}}
positions={poly.attributes.coordinates}
>
</Polygon>