I have an issue with my interactive map, I have a react-leaflet map with GeoJSON layers. Also, I have added some state components like cascader with some name of countries options, like Austria, Belgium, etc... I want to have it like this. After the state from cascader is done (so after I click on a country in cascader), I want to change the color of the selected country from that cascader and display it on the map. For example, if I choose Austria, I want to have colored Austria on the map. Also, cascader is from the Ant Desing library. And selectedCountries
is another state that is not important.
function onEachCountry(country, layer) {
const countryName = country.properties.ADMIN
if (currentValueCascader.includes(countryName)) {
layer.setStyle({ fillColor: 'yellow', weight: 2, fillOpacity: 5 })
} else {
layer.setStyle({ color: "#000000", fillColor: "white", weight: 1 })
}
}
return(
<Cascader
showSearch
style={{ width: 256 }}
options={countries}
onChange={(e) => {
setCurrentValueCascader(e)
}}
placeholder="Search country"
value={currentValueCascader}
multiple
/>
<MapContainer
style={{ height: "80vh", width: "auto" }}
zoom={2.3}
scrollWheelZoom={true}
minZoom={2.3}
center={[30, 0]}>
<TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' />
<GeoJSON data={features} onEachFeature={(a, b) => { onEachCountry(a, b, selectedCountries) }} style={(a, b) => { onEachCountry(a, b, selectedCountries) }}} />
</MapContainer>
)
I think that somehow the Leaflet map is not re-rendering that chosen option or maybe that GeoJSON, but don't know how to solve it.