Locate to specific bound by using fitBounds of react-mapbox-gl

Question

I want to make the map to relocate to constant bound by button click event. When page is loaded, it shows the bound that I get the bound that I calculated correctly. After loading, I need to navigate to the markers that I drew. After navigating to several markers, need to fly to original bound that I got first. But it is locating to London city. I am not sure why it is not relocating to original bound.

Here is my code

<CustomMapbox
    showAll={this.state.showAll}
    center={this.state.center}
    fitBounds={this.state.bound}
    zoom={[8]}
    containerStyle={{
       height: "100%"
    }} onClick={this.onClickMap}
>
     <Marker
        locations={this.state.places}
        data={this.state.product}
        onClick={this.onClickPosition} 
     />

      { (this.state.selectedPoint ) && (this.state.showPopup) &&
         <Popup key={`${this.state.selectedPoint[0]}_${this.state.selectedPoint[1]}`} coordinates={this.state.selectedPoint}>
              <StyledPopup>
                <div>{this.state.selectedUPCDate}</div>
              </StyledPopup>
         </Popup>
                }
</CustomMapbox>

As you can see my code I am using CustomMapbox component and props such as showAll, center, fitBounds for Map. showAll is to show all of the markers or not. When showAll is true, need to show all of the markers so is needed to be shown the area with fitBound. And when showAll is false, it is needed to be shown the center point.

I made the CustomMapbox to select the correct props by showAll variable. In CustomMapbox, if showAll is true, center props would be removed and or not, fitBounds props would be removed. Problem is to be shown correctly this area when page is loaded but not showing after doing the navigate to specific center.

Are there any solution to make this function with react-mapbox-gl?

Answer 1

everyone! I solved it myself. When using the fitBounds, need to use the center of that bound. It is working perfectly now

Don't need to use the showAll flag for fitBounds Just needed to use the fitBounds and its center value