react-leaflet add layers dynamically

Question

I'm starting to use react-leaflet and I came across a question: In my application the user fills out a form that then requests a rest service that returns a GeoJSON, which is then added as a new layer on my map. My question: How do I implement adding layers dynamically in react-leaflet?

Thank you.

Answer 1

The best approach is to create GeoJSON Layer wrapper for react-leaflet. There is a similar implementation of GeoJSON layer with clustering available in react-leaflet's plugins section. Then you should add this layer to your map component and change it's data when you need to. So there is no need to add the layer dynamically but dynamically change data for it. Check the leaflet's GeoJSON example to get the idea http://leafletjs.com/examples/geojson/.

The approach will work if you have one layer with changing data. But if you have different data sets you will need to add a GeoJSON layer for each of them.

<Map ...>
{this.props.datasets.map((ds, ix) => {
  return (<GeoJSONOverlay data={ds} key={ix} />);
})}
</Map>