Estoy tratando de dibujar un conjunto de polígonos en un mapa y luego cambiar el color de acuerdo con un evento externo que actualiza una propiedad de MapContainer. En mi ejemplo, la propiedad es "ver". Puedo ver que el valor de la propiedad se actualiza correctamente pero los polígonos no se vuelven a representar. Es un conjunto simple de polígonos sin Tile (sin mapa geográfico, solo los polígonos). Probé tanto con color como con fillColor, pero nada cambia cuando actualizo "view". ¿Debo forzar de alguna manera una actualización del mapa? Si es así, ¿cómo?
<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>Bien, encontré la respuesta. Espero que esto pueda ayudar a otros. Tengo que modificar pathOptions.color y pathOptions.fillColor y no directamente color y fillColor. Funciona así para mí:
<Polygon key={`poly-${poly.id}`} pathOptions={{ color: poly.color[this.props.view], fillColor: poly.color[this.props.view] }} positions={poly.attributes.coordinates} > </Polygon>