Jake Hm Jake Hm - 1 year ago 246
React JSX Question

How to get bounds with react-leaflet

I want to get bounds of the current map so that I can search those bounds with the Overpass API.

For leaflet I know the method is just map.getBounds(), but I don't know how to implement that in react-leaflet.

class SimpleExample extends React.Component {
constructor() {
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,

componentDidMount() {

render() {
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom} ref='map'>
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

This is what I've tried. Error says that
isn't a function.

Answer Source

Try this.refs.map.leafletElement.getBounds.

According to the documentation:

You can directly access the Leaflet element created by a component using this.leafletElement in this component. This leaflet element is usually created in componentWillMount(), except for the Map component where it can only be created after the container is rendered.

which is a round about way of saying they store the leaflet object as leafletElement property on their component objects.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download