fitbound function with progress direction

Question

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?

Answer 1

Not sure if I understand the question, but if I do, here are the points:

1. Learn about turf, a set of utilities that can help you. For example, its bbox function will calculate the bounding box (geojson) from an array or FeatureCollection.
2. Now, if you want to keep some padding, you can do so in the fitBounds method. Specifically, check out options.padding