map.fitBounds has weird animation "jerk" in right conditions

[bdullemond]

When the map is the right dimensions (i.e. thinner than it is tall) and the map.fitBounds method is called for a approximate world wide zoom event (eg: map.fitBounds([-179, -89, 179, 89]); ), the zoom animation seems to animate with the left edge of the map lined up with the left edge of the element and then when animation is complete, jump to place the centre of the bounds in the middle of the map.

maplibre-gl-js version: 1.14.*, 1.15

browser: Chrome and Edge

Steps to Trigger Behavior

1. Create a map that does not fit the whole world width when at minimum zoom level (eg map that is width: 220px; height: 520px;)
2. call map.fitBounds([-179, -89, 179, 89]);

Link to Demonstration

https://codepen.io/Terribill/pen/qBmxyqR

Expected Behavior

I expect the map to animate with the centre of the bounding box in the centre of the visible map area.

Actual Behavior

The map animates showing the left most area of the bounds, then when animation is complete, jumps to show centre of the bounding area.

[HarelM]

Interesting... Probably an edge condition as can be indicated by the parameters you set.
It world help a lot of you could try and debug this.

[j5kay]

Spanning the antimeridian under mapbox/maplibre has been an issue since the beginning. To fix it would require a lot of work, as there are many (wrong) assumptions made on the given coordinates for a bounding box throughout the rendering engine (all revolving around the false basis that the west longitude is always less than the east longitude).

Luckily, there is a work-around -- simply go past the max longitude extent whenever you want to span the antimeridian.

In your example, change:

map.fitBounds([-179, -89, 179, 89]);

to

map.fitBounds([-179, -89, -181, 89]);

and it should work as expected.

[bdullemond]

Hi j5kay, thanks for the response. I guess my sample code pen was not clear. I do want the map to end up over centered over africa as my data is spread out world wide (although the trick for spanning the antimeridian is going in the toolbox for later!). Its the animation with the jerk that I am hoping to avoid.

I've updated my codepen above with a point at 0,0 to show that is where i want to be centered without the animation jerk.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[wipfli]

Is this related to #1299?

[HarelM]

Was this fixed? Can you check latest versions?

[bdullemond]

So I checked the demo I made for this here: Link to Demonstration
https://codepen.io/Terribill/pen/qBmxyqR

Which is using latest: ```

<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>```

And it still occurs.