TransWikia.com

GeoJSON map color does not change

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

One Answer

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP