React-Leaflet: How to clear a Feature Group and add new components using state?

Question

I'm relatively new to react-leaflet and react and am having trouble drawing new components on my map. I've been stuck for a week now so hoping someone can help. I'm attempting to clear the components (layers?) from a Feature Group on the map then render new ones by changing the state of a parent component.

In my minimal example program located at this sandbox I have a few components:

Map parent component which contains states of map, markers, query data, map bounds, and select box value

  // state for initial map loading
  let [map, setMap] = useState(null);
  // states in Map component
  let [data, setData] = useState();
  let [bounds, setBounds] = useState(null);
  let [featureNum, setFeatureNum] = useState(1);
  // some random markers simulating user placed markers on map
  let [markers, setMarkers] = useState([
    [27.147144835991796, 31.530761718750004],
    [28.844673680771795, 33.662109375],
    [26.86328062676624, 35.804443359375]
  ]);

Select which is a dropdown menu that sets the state of featureNum when the select box value changes.

Line which is a Geojson feature that receives the data from data state and sets the state of markers. Exists in featuregroup.

Markers which creates Marker features using the state of markers. Exists in featuregroup.

After the initial rendering of the map, when the state of featureNum changes geojson data is gotten asynchronously via the fetch API in my Map component. The bounds of the newly received data are calculated on resolve and the state of data and bounds are set using the state setters. The featuregroup is cleared using a useRef hook and .clearLayers()

However, no new Line component appears on the map when data is set. The map flies to the new bounds where the component should appear. I tried setting the z-index of the featuregroup to be 9999 but that didn't work either.

On selecting a feature from the Select component, how do I clear the map of the featuregroup and show the new Line component on the map? Thanks!

score 1 · Accepted Answer · answered Sep 26 '21 at 13:09

It seems that this line of code does its job, It clears all layers that belong to the featureGroup. On the first render it does not go inside your if (map) statement because map is null but the second time it rerenders when you change the drop down if you log under setData call

console.log("setData", featureGroupRef.current.getLayers());

you will see that layers is an empty [].

So what you should do is first get rid of that line

featureGroupRef.current.clearLayers();

and then use this component to be able to both change the data of your GeoJSON as data prop is immutable, therefore changing the value won't trigger a rerender and maintain the style you had before. You will end up with the same code on your Line component but instead of react-leaflet's GeoJson component you will use GeoJsonWithUpdates of rename it to whatever you think it is more appropriate.

Demo

React-Leaflet: How to clear a Feature Group and add new components using state?

1 Answers1