Importing geojson to react-leaflet-draw

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)?

Root · Accepted Answer · 2018-10-26T14:52:20.727

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.

I don't understand how this answers the question. the component mounts long before map is visible, and indeed it requires user interaction for it become visible. i've transferred the setState call to `componentDidMount()`, and the code runs when `this.props.visible` changes. and i don't imagine it will make any difference. the data is there, its in the feature group, it just doesn't appear to render in the map — r3wt, Oct 26 '18 at 13:22
@r3wt Your question is that GeoJSON doesn't appear to be rendered into the map.Judging from your code,I find two problems.FIrst part,setState in _onFeatureGroupReady will lead to some problems, so I recommend to transfer it.The second part, the coordinates property in getGeoJson() is [longitude,latitude],you seems to set it [latitude,longitude]. — Root, Oct 26 '18 at 14:44
you are right, that worked. it all came down to the order of the longitude and latitude in the feature group. (but the order for center is in fact `latitude, longitude`, just as i had it) — r3wt, Oct 26 '18 at 14:57
no problem, i really appreciate your help. Thank you! I owe you a beer or a coffee :-) — r3wt, Oct 26 '18 at 14:58
how can we join a private chat, i don't mind to compensate you for your help — r3wt, Oct 26 '18 at 15:04
I'm glad that I can help you and you're welcome!:-) The reputation that I got is totally fine. — Root, Oct 26 '18 at 15:11
well in the bounty message i did say i was willing to pay for help, so if you wanted me to paypal you for your time that would be accepted — r3wt, Oct 26 '18 at 21:55

Importing geojson to react-leaflet-draw

1 Answers1