How to get a border with a reaction brochure

Question

I want to get the borders of the current map so that I can search for these borders using the Overpass API.

In the worksheet, I know that the method is just map.getBounds (), but I don't know how to implement this in the reaction sheet.

class SimpleExample extends React.Component { constructor() { super(); this.state = { lat: 51.505, lng: -0.09, zoom: 13, }; } componentDidMount() { console.log(this.refs.map.getBounds()) } render() { const position = [this.state.lat, this.state.lng]; return ( <Map center={position} zoom={this.state.zoom} ref='map'> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' /> </Map> ); } } 

This is what I tried. The error says that this.refs.map.getBounds not a function.

Answer 1

Try this.refs.map.leafletElement.getBounds .

According to the documentation :

You can directly access the Flyer element created by the component using this.leafletElement in this component. This leaf element is usually created in the WillMount () component, with the exception of the Component Map, where it can only be created after the container is rendered.

which is a circle around the way they say they store the leaflet object as a leafletElement property on their component objects.