map.fitBounds does not account for padding options when used with globe projection

[simengjermundsen]

I am making a globe where countries of the world can be highlighted.
I am adding a padding to the map (shown using showPadding-debug), and moving the map using fitBounds like this:

map.current.fitBounds( [ [west, south], [east, north] ], { duration: ANIMATION_TIME, easing: easeInOutCubic } );

The bounds sent to fitBounds are the same used to draw the blue-ish area in the video.

When clicking smaller countries this works like a charm, but there are major issues on larger areas like USA and Russia, and also when selecting countries near the north pole (Norway).
There are completely viable configurations of zoom and translation available, like I am trying to illustrate in the video by manually moving/scaling the wrongly positioned areas.

Am I doing something wrong here, or is fitBounds simply not adapted completely for globe-projections?

FitBoundsIssue.mp4

[karimnaaji]

Hello @simengjermundsen . We added support for fitBounds with globe in later version than the one that included globe support. It might be that the version that you are using didn't yet include it. If possible, could you test that on the latest beta version https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.12.0-beta.1 and report back?

[simengjermundsen]

I tried this one from npm. No difference unfortunately :(

"node_modules/mapbox-gl": {
"version": "2.12.0-beta.1",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.12.0-beta.1.tgz",
"integrity": "sha512-opkeB2dVgdUdbMhwDIcikUBr4BRG80nszeeB5CAA5Pw3c6eWFOijySKJgX/Oh9MchVWiJt9q4UDFJ6Q8FkslHw==",
"dependencies": {
"@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
"@mapbox/mapbox-gl-supported": "^2.0.1",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/tiny-sdf": "^2.0.5",
"@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0",
"csscolorparser": "~1.0.3",
"earcut": "^2.2.4",
"geojson-vt": "^3.2.1",
"gl-matrix": "^3.4.3",
"grid-index": "^1.1.0",
"murmurhash-js": "^1.0.0",
"pbf": "^3.2.1",
"potpack": "^2.0.0",
"quickselect": "^2.0.0",
"rw": "^1.3.3",
"supercluster": "^7.1.5",
"tinyqueue": "^2.0.3",
"vt-pbf": "^3.1.3"
}
},

[karimnaaji]

Are you using any extra padding on either the viewport to offset the vanishing point or as a parameter to this API? And does removing it make any difference?

[simengjermundsen]

Yes!
I just came back after testing more to say exactly that :)
I removed the padding, and when the padding is not there everything seems to scale correctly.
When I add the padding, either to the camera by a simple easeTo when initializing, to the fitBounds-call, or to cameraForBounds (and then using flyTo) it behaves as before where most of the smaller countries work as expected, but the huge ones fail and fill the screen anyway.

Without any padding all countries scale perfectly to the entire screen. (I need the padding though :) But this probably narrows things down?)

[karimnaaji]

But this probably narrows things down?)

Yes it does! Thanks for the information :) I'll reword the title to be more precise and flag as a bug; it's an overlook and padding options are not currently accounted for in that specific code path.

[simengjermundsen]

Thank you!

[simengjermundsen]

Same issue with cameraForBounds also btw, but I guess it uses the same functionality under the hood.

[zimonitrome]

Hey @simengjermundsen I am trying to do pretty much exactly what you are doing in your video example.

I am currently using a cameraForBounds and then an easeTo but encounter the same problem. Did you find a good solution?

I am having a difficult time understanding what this exactly means by @karimnaaji:

Are you using any extra padding on either the viewport to offset the vanishing point or as a parameter to this API? And does removing it make any difference?

For me, I am only using a mapbox-gl canvas that occupies 100% of my page's width and height. Is there some other padding you guys are talking about?

[DirkKaris]

Padding is accounted for on initial map load -- my guess is that the fitBounds call in the Map constructor occurs before the style is loaded and the transform is set to Globe rather than Mercator. But then on subsequent calls to fitBounds, with the exact same fitBoundsOptions object, it doesn't work. Which is frustrating because I'm trying to implement a "return to original pan/zoom" button. Would be great to get this fixed or a reasonable workaround.

[jonasnoki]

Hey everyone!
This issue hasn't been solved yet I suppose. So I took the time to create a reproducible example which illustrates the error:

https://jsfiddle.net/jonasnoki/1k86sb3y

One observation I've made is that only larger bounds are not respecting the padding of the map. This insight might aid in identifying the cause of the issue.

[jonasnoki]

Hey everyone! I created a pull request that should fix this. Can someone have a look at it please?