0

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> 
  );
}

1 Answer 1

1

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.
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.