map.fitBounds doesn't work properly with center argument

[dtkagi]

mapbox-gl-js version: 3.12

browser: not important

When providing center to map.fitBounds it doesn't' work as expected - that is showing the bounds inside view but with camera at center

I need to workaround it like that:

if (center) {
	let maxDistanceFromCenter = 0;
	poisToFit.forEach(poi => {
		const distance = getDistanceFrom(poi, { latitude: center[1], longitude: center[0] });
		if (distance > maxDistanceFromCenter) {
			maxDistanceFromCenter = distance;
		}
	});

	const centerPoint = turf.point(center);
	const directions = [0, 90, 180, 270]; // North, East, South, West
	const bounds = new mapboxgl.LngLatBounds([center[0], center[1]], [center[0], center[1]]);

	directions.forEach(bearing => {
		const dest = turf.destination(centerPoint, maxDistanceFromCenter, bearing, { units: "meters" });
		const [lng, lat] = dest.geometry.coordinates;
		bounds.extend([lng, lat]);
	});

	const options: mapboxgl.EasingOptions = defined({
		padding,
		animate: true,
		duration: 1000,
	});
	map.fitBounds(bounds, options);
}

While I would prefer to have something like this:

map.fitBounds(bounds, {
	padding,
	animate: true,
	duration: 1000,
	center: center ? { lng: center[0], lat: center[1] } : undefined,
});

I also spotted that this api doesn't work well when passing undefined so that's why use of defined by me (removes undefined values from object)

[ibesora]

Can you provide an example of a fitBounds call not doing what you expect and the center value you expect?
Thanks!

[dtkagi]

When I provide center it simply ends camera on center point but ignores bounds passed from my experience.

That's why I just calculate max distance from center point to my points and create single bound from this to use fitBounds without center if that makes sense.

So when I get your example for fit bounds from https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/
and modify fitBounds call to use center a bit to west: https://jsfiddle.net/8ourdeyv/2/ (need to setup key)

Then I don't see the whole thing - I expected to keep my center and see all bounds passed.
If I would put center more to left I wouldn't see any line.

I guess it should work as the code I pasted above, so if center is passed you simply calculate max distance from center and call fit bounds without center option internally and end up with all things showing on screen.

Expectation in short:

• Move camera to center and zoom enough (also calculating padding) that all things (bounds) will fit into view after fitBounds call

IMAGES:

1. Your normal example without center setup:

2. After me adding center a bit to west (IMO wrong):

3. The camera I expect:

[ibesora]

Thanks for the detailed explanation @dtkagi .
Unfortunately I think this is working as expected. The docs for fitBounds say that it uses the provided bounds to "center these bounds in the viewport and use the highest zoom level ... that fits them in the viewport". Adding center to fitBounds just moves the camera after the zoom level has been determined.

Taking your JSFiddle as an example, what you can do to get your desired result is to extend bounds by your desired center.

bounds.extend([-77.1414, 38.897])

and you will get a similar result

Let me know if that fixes your issue!