Due to our lack of English skills, we use translators to communicate, please understand.

We are currently developing maps using React and Mapbox.

We use the following coding because we want to set the initial position of the map when the page loads.

[coding]

const bounds = new mapboxgl.LngLatBounds();


     cgoData?.forEach((cgoItem: any) => {


       bounds.extend([cgoItem?.prtLogt, cgoItem?.prtLat]);


     });

     mapRef.current?.fitBounds(bounds, {

      duration: 1000,

});

However, the "fitBounds" function sets the nearest center point as the initial position.

We want to set the initial position, including the direction the ship is heading, which is not always the shortest distance.

[The screen you see now]

[Screen we want]

How to set it up?