How to get bounds with react-leaflet

Question

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() {
    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've tried. Error says that this.refs.map.getBounds isn't a function.

Macerate

Answer 1

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.

Torpedo

i kind of don't get the part except for the Map component where it can only be created after the container is rendered. am i able to get new bounds for each render? thank you – Fivefold

Access it in componentDidMount and componentDidUpdate – Torpedo

You can also take a look to #51399980 if this answer doesn't fix the problem (for me, the ref='map' part was missing) – Helsie

refs is deprecated – Outman

Answer 2

I stumbled upon this earlier, the way I solved it is by using the useMap hook from react-leaflet like this:

import { useMap } from "react-leaflet";

function ShowBounds() {
const mMap = useMap();
let newBounds = mMap.getBounds();
console.log(newBounds);
}

Worked for me. Hope this helps.

Paperboy