Mapbox-gl-js: Option to disable zooming outside of map when renderWorldCopies is false

[shotor]

When renderWorldCopies is set to false and you zoom out far enough, you see grey around the map:

Screenshot is a bit unclear, but I've zoomed out then dragged the map to the left. The grey area is the background of my webpage.

I'd like to lock the zoom when it reaches the last zoom level where the map fits.

I tried maxBounds

          maxBounds: [
                [-180, 90],
                [180, -90]
          ],

but it just caused the map to flicker and then hide itself. minZoom doesn't quite work as well.

I'd rather not resort to something like calculate how much someone can zoom then disabling the zoom on scroll.

Is there another way to achieve this, or can such a function be implemented?

[mollymerp]

I think the problem is that your maxBounds are not in [sw, ne] order – when I created an example w maxBounds: [[-180,-90],[180,90]] it worked well.

https://jsfiddle.net/jb6ngpf5/1/

Please re-open if your issue persists

[shotor]

Thanks @mollymerp, I totally missed that.

However it's still possible to drag the map vertically out of range. Do you know if there's some way to "clamp" dragging vertically?

[BoyBouw]

Had the same issue as mentioned above by shotor. "Fixed" it currently by setting my bounds to -180, -85, 180, 85. Hope this helps others