Geographic Information Systems Asked by Johnny Kang on June 20, 2021
I am trying to code save/load function. I can say my save and load function works properly because it displays on console that for example when I load "Canada" file from database, it shows that Canada’s properties.color has been changed from default color "green" to red. But it seems like I ran into an issue of not updating. How can this be fixed?
//Map.jsx
import React from 'react';
import { MapContainer, GeoJSON,} from "react-leaflet";
const Map = ({countries}) => {
const onEachCountry = (country, layer) => {
console.log(country.properties.color) //This shows me that some of the country colors has been changed
layer.options.fillColor = country.properties.color; // this should change the color of the map according to country.properties.color. But even after an update in country.properties.color, the color of the map does not change.
}
return (
<div>
<MapContainer>
<GeoJSON style = {countryStyle} data = {countries} onEachFeature={onEachCountry}/>{/*Displays the map */}
</MapContainer>
</div>
);
}
Use setStyle()
instead of modifing the property.
const onEachCountry = (country, layer) => {
console.log(country.properties.color) //This shows me that some of the country colors has been changed
layer.setStyle({fillColor: country.properties.color}); // this should change the color of the map according to country.properties.color. But even after an update in country.properties.color, the color of the map does not change.
}
Answered by Falke Design on June 20, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP