Update viewport state after fitBounds is called

Question

I have created a map using react-map-gl. Whenever I zoom or pan on the map, the viewport updates as the onViewStateChange prop calls an _updateViewPort function which sets the new state. The issue I am having is, when I zoom into somewhere using the mapbox function fitBounds the onViewStateChange does not seem to fire, and as a result the viewport state never changes. As a result, next time I pan or zoom on the map, it takes me back to where I was before I called the fitBounds method. Has anyone experienced this before, and have a solution?

Answer 1

What ended up working is calculating the new latitude, longitude, and zoom for my new extent I was zooming to using WebMercatorViewport, and then set that as the new viewport state. I used the FlyToInterpolator method that react-map-gl offers to fly to that location.

const {longitude, latitude, zoom } = new WebMercatorViewport(this.state.viewport)
.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]], {padding: {top: 82, bottom: 30, left: leftPadding, right: 30}});
const viewport = {
  ...this.state.viewport,
  longitude,
  latitude,
  zoom,
  transitionDuration: 2000,
  transitionInterpolator: new FlyToInterpolator()
}
this.setState({viewport});