React-map-gl: Getting map bounds

[G2Jose]

Is there an easy way to get the bounds of a map displayed?

I have an application that shows a large number of markers (https://wheresmybus-16093.firebaseapp.com/), and I would like to be able to optimize this by only computing markers that would be visible within the window.

[ibgreen]

Is there an easy way to get the bounds of a map displayed?

@G2Jose In v2 there is a fitBounds function exported by react-map-gl but it depended on internal mapbox functions and it hasn't been ported to v3 yet.

[pranspach]

I don't know if you landed on a solution yet @G2Jose , but if you store a ref of the map, then you can call:

const mapGL = this.mapRef.getMap();
const bounds = mapGL.getBounds();
doSomethingWithTheBounds({
        north: bounds._ne.lat,
        south: bounds._sw.lat,
        west: bounds._sw.lng,
        east: bounds._ne.lng,
});

In v2, getMap is _getMap. It would be nice to have a wrapper in react-map-gl, but this works for now.

[abmai]

@pranspach can you elaborate on what you mean by wrapper in react-map-gl?

[pranspach]

It would be nice to call getBounds() on the ref you get back from , instead of getMap().getBounds(). Maybe it's there and I missed it?

[G2Jose]

Thanks @pranspach, that works really well! I'm going to close this issue.

[MikeKerrBBC]

@pranspach if I'm using element how do get mapRef?

This is what's inside my react component

<ReactMapGL
    className={`${styles.mapbox}`}
    {...viewport}
    onViewportChange={this.updateViewport}
    mapboxApiAccessToken={mapboxToken}
    >
    {distributors.map(this.renderCityMarkers)}
     {this.renderPopup()}

  <div className={styles.nav}>
      <NavigationControl
          className={styles.row}
          onViewportChange={this.updateViewport}
       />
    </div>
</ReactMapGL>

[eddydg]

@MikeKerrBBC To set this _mapRef_ (the DOM element of the map) you can add
ref={ map => this.mapRef = map } to the _\

Then you would be able to use it here for example:
componentDidMount() { const myMap = this.mapRef.getMap(); }

Further explained here https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

[AriLFrankel]

@pranspach It seems like the API for this might have changed? I don't seem to have a getMap method on the ref. I am using V3. Do you have any insights?

This is what my code looks like

const MapBoxRender = ReactMapboxGl({
      ...
    });

class elem extends PureComponent{
constructor(){
...
this.mapRef = React.createRef()
}

componentDidMount(){
  console.log(this.mapRef) // doesn't include getMap
}

render(){
  ...<MapBoxRender ... ref={map => this.mapRef = map}><ViewController .../> ... </MapBoxRender>
}
 }

[muhaimincs]

I can't get this working. FYI, i use useRef to set the ref on the map.

useEffect(() => {
    const m = theMap.current.getMap();
    const bounds = m.getBounds();
    if (viewport.latitude) {
      const vwport = new WebMercatorViewport(viewport);
      const { longitude: lng, latitude: lat, zoom: zm } = vwport.fitBounds(
        [
          [90.5921481191778, 137.08799930997225],
          [12.710538577152647, -1.726891421151251],
        ],
        {
          padding: 40,
        }
      );
      onViewportChange({ longitude: lng, latitude: lat, zoom: zm });
      console.log(bounds);
    }
  }, []);

[jtvargas]

@muhaimincs Try using forwardRef, like this:

const MapWrapper = forwardRef((props, ref) => {
  const { children } = props;

  return (
    <ReactMapGL
      ref={ref}
      {...props}
    >
      {children}
    </ReactMapGL>
  );
});