Importing geojson to react-leaflet-draw - reactjs

Question

I am trying to import some GeoJSON to the FeatureGroup in _onFeatureGroupReady event handler, but it doesn't appear to be rendered into the map. The code is mostly based on the example from the library react-leaflet-draw here. Strangely, the edit menu becomes usable, indicating that the data is maybe there, but just not being rendered.
I'm not sure what's happening, as I'm a beginner to maps in general. The relevant code is in the else if(this.props.data) { block. The console.log() statements all show the data being there and in the correct format.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
37.79,
-122.45
],
[
37.79,
-122.42999999999999
],
[
37.77,
-122.42999999999999
],
[
37.77,
-122.45
],
[
37.79,
-122.45
]
]
]
}
}
]
}
Here is the code where I'm trying to import this data into the FeatureGroup:
_onFeatureGroupReady = (ref) => {
console.log('_onFeatureGroupReady');
console.log(ref);
if(ref===null) {
return;//bug???
}
this._editableFG = ref;
// populate the leaflet FeatureGroup with the geoJson layers
if(this.state.data) {
console.log('importing service area from state');
let leafletGeoJSON = new L.GeoJSON(this.state.data);
let leafletFG = this._editableFG.leafletElement;
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
}else if(this.props.data) {
console.log('importing service area from props');
this.setState({data:this.props.data},()=>{
console.log(this.state.data);
let leafletGeoJSON = new L.GeoJSON(this.state.data);
console.log(leafletGeoJSON);
let leafletFG = this._editableFG.leafletElement;
console.log(leafletFG);
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
})
}
}
What might I be doing wrong (or even better, any way I can achieve this)?

Answer 1

Hope this will help you.First,it's not recommended to use this.setState in _onFeatureGroupReady,it will lead to multiple render in map.May be transfer it to componentDidMount which is invoked before the map rendered.And about the return in _onFeatureGroupReady,it's not exactly a bug, but it will return undefined.
_onFeatureGroupReady = (ref) => {
console.log('_onFeatureGroupReady');
console.log(ref);
if(ref===null) {
return;
}
this._editableFG = ref;
// populate the leaflet FeatureGroup with the geoJson layers
if(this.state.data) {
console.log('importing service area from state');
let leafletGeoJSON = new L.GeoJSON(this.state.data);
let leafletFG = this._editableFG.leafletElement;
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
}else if(this.props.data) {
console.log('importing service area from props');
console.log(this.state.data);
let leafletGeoJSON = new L.GeoJSON(this.state.data);
console.log(leafletGeoJSON);
let leafletFG = this._editableFG.leafletElement;
console.log(leafletFG);
leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
}
}
Then,about the Map.The latitude and longitude in coordinates of center and coordinates are opposite.So ,maybe the coordinates you set in getGeoJson() is wrong.
<Map center={[37.79,-122.45]} zoom={13} zoomControl={false}>
<FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }>
...
</FeatureGroup>
</Map>
function getGeoJson():
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-122.45,
37.79
],
[
-122.42999999999999,
37.79,
],
[
-122.42999999999999,
37.77
],
[
-122.45,
37.77
],
[
-122.45,
37.79
]
]
]
}
}
And,here is my result.