Accessing map instance from within leafletElement about react-leaflet HOT 6 CLOSED

What about using refs?

...

onEachFeature() {
  // let map = this.refs.map.leafletElement
}

render() {
  return (
    <Map
      ref='map'
    >
    ...
    <GeoJson
      data={geoJSON}
      color='red'
      fillColor='green'
      onEachFeature={onEachFeature.bind(this)} />
    </Map>
  )
}

Calling bind is only necessary with ES6 classes.

from react-leaflet.

GeoJson is a descendant of MapLayer which adds the map prop to all children here. This means you have access to map via this.props.map inside the GeoJson component.

How are you trying to use the map prop?

from react-leaflet.

Ok, I think I wasn't clear enough, or maybe I am missing something.

I want to access the map from onEachFeature() function for my GeoJson layer. So I have this code:

<Map
    ...
    <GeoJson
        data={geoJSON}
        color='red'
        fillColor='green'
        map={this}
        onEachFeature={onEachFeature} />
</Map>

Now in onEachFeature(feature, layer) function I can access color and fillColor through this.color and this.fillColor respectively. But this.map is undefined even if I add it to <GeoJson> as map={this} along with color and fillColor.

What am I doing wrong?

from react-leaflet.

I think in your case the best solution is to implement a custom GeoJson component pretty much the same way as it is done in https://github.com/PaulLeCam/react-leaflet/blob/master/src/GeoJson.js
All you need is to add the onEachFeature handler to the props variable in componentWillMount, it would have access to the map directly.

from react-leaflet.

Thanks for responses. Using ref worked like a charm!

from react-leaflet.

Great :)

from react-leaflet.