React-map-gl: Set max bounds for pan

[ahmadsholehin]

Is there an easy way to set the max bounds of the map when panning?

Tried

<MapGL
        { ...viewport }
        onViewportChange={ this._onViewportChange.bind( this ) }
        maxBounds={ [ [ ..., ... ], [ ..., ... ] ] }
>
...
</MapGL>

as well as

mapRef.getMap().setMaxBounds( [ [ ..., ... ], [ ..., ... ] ] );

Also tried to hook onto a custom map control via _onPan

_onPan( event ) {
   const viewport = this.getMapState()._viewportProps;

   // only if within bounds
   if ( ... ) {
       this._onPanMove( event );
   }
}

but that'll get everything stuck once the bounds have been reached.

[Pessimistress]

@ahmadsholehin The easiest way to handle this is in the _onViewportChange callback by clamping latitude and longitude, e.g.

_onViewportChange(viewport) {
  if (viewport.longitude > 0) {
    viewport.longitude = 0;
  }
  this.setState(viewport);
}

Your custom control doesn't work because the viewport props is already out of bounds, and by aborting you never update the viewport to be valid again.

[ahmadsholehin]

Thanks @Pessimistress. For anyone looking out for the same, got it working via _onViewportChange callback:

_onViewportChange( viewport ) {
    if ( viewport.longitude < MyOverlay.maxBounds.minLongitude ) {
      viewport.longitude = MyOverlay.maxBounds.minLongitude;
    }
    else if ( viewport.longitude > MyOverlay.maxBounds.maxLongitude ) {
      viewport.longitude = MyOverlay.maxBounds.maxLongitude;
    }
    else if ( viewport.latitude < MyOverlay.maxBounds.minLatitude ) {
      viewport.latitude = MyOverlay.maxBounds.minLatitude;
    }
    else if ( viewport.latitude > MyOverlay.maxBounds.maxLatitude ) {
      viewport.latitude = MyOverlay.maxBounds.maxLatitude;
    }
    this.setState( {
      viewport: { ...this.state.viewport, ...viewport }
    } );
  }

Define a static maxBounds getter in MyOverlay (your overlay class).