setting `maxBounds` on `equirectangular` projection has different results based on the map container size

[pflopez]

mapbox-gl-js version: v3.6.0

browser: Chrome

Steps to Trigger Behavior

1. Set two maps, one with a smaller vertical container than the other. Both maps have the same configuration, using equirectangular projection.
2. Set the same maxBounds to both maps.
3. Notice that the maxBounds for the first map and the second map do not behave the same.

Link to Demonstration

https://codepen.io/pflopez/pen/xxvbZdB

Expected Behavior

Both maps should have the same max bounds, regardless of the size of the map container.

Actual Behavior

The max bounds of each map are different.

[pflopez]

In a way, related to https://github.com/mapbox/mapbox-gl-js/issues/12391, as Im trying to manually fix the extraneous empty space issue via setting max bounds.

[1ess]

In a way, related to #12391, as Im trying to manually fix the extraneous empty space issue via setting max bounds.

Has the problem been resolved?

[lennartjakob]

I have found that the current version of the GL JS Lib uses the maps center point to calculate the bounds-fit. This leads to the following bahavior when zooming out: The map will zoom out, take the current center at zoomed out state see that they are not within the bounds and will jump to a much higher zoom level, where the center will be inside of the bounding box. This is dumb. it should just pan the map.

I have a log here: Zoom in from 6.5 by one wheel step zoomstart zoomlevel 6.563274841349729 Center Object { lng: 9.054503306039123, lat: 52.59350357817857 } Bounds _ne: Object { lng: 9.1, lat: 52.8 } _sw: Object { lng: 8.8, lat: 52.5 } Bounds.contains true

zoomend zoomlevel 6.679573200605708 Center Object { lng: 9.1, lat: 52.58227928838798 } Bounds _ne: Object { lng: 9.1, lat: 52.8 } _sw: Object { lng: 8.8, lat: 52.5 } Bounds.contains true

Here the map was showing at level 6.6795... and i initiated a zoom out by one wheel step

zoomstart zoomlevel 10.872674880270765 Center Object { lng: 9.1, lat: 52.5 } Bounds _ne: Object { lng: 9.1, lat: 52.8 } _sw: Object { lng: 8.8, lat: 52.5 } Bounds.contains true

zoomend zoomlevel 10.872674880270765 Center Object { lng: 9.099999999999994, lat: 52.5 } Bounds _ne: Object { lng: 11.65, lat: 54 } _sw: Object { lng: 6.7, lat: 51.27 } Bounds.contains true