Add ability to fix map corner position during map.resize()

[lucaswoj]

No description provided.

[allthesignals]

Hmm any way to disable this? Or maybe I'm not understanding... after a map.resize(), the map adjusts, but its internal center also updates, meaning all it layer content is shifted over (if it's resizing to fit a now-larger container). This is a bit jarring for users...

[rychoo2]

Hello,
I am resizing map programatically and I have the same problem.
For time being I am using following wrapper function too keep top left map corner at the same position:

function resizeMapAndKeepNw(map) {
        let nw = map.getBounds().getNorthWest();
        map.resize();
        let newNw = map.getBounds().getNorthWest();
        let currentCenter = map.getCenter();
        let shiftVector = { x: newNw.lng - nw.lng, y: newNw.lat - nw.lat };
        let newCenter = new mapboxgl.LngLat(currentCenter.lng - shiftVector.x, currentCenter.lat - shiftVector.y);
        map.setCenter(newCenter);
}

see working example (toggle sidebar on/off):
https://codepen.io/anon/pen/NwOWJB

This solution only works well for horizontal resizing, not vertical.

[jfirebaugh]

I retitled this because the old title actually described the current behavior, and I think the intent was to request the alternative behavior.

[songololo]

This would be a very useful feature for dynamic resizing events.

[dagjomar]

Oh, yes this is actually very much wanted :)

[songololo]

Map pitch is also not visually consistent across resize events, so would be good if both location and pitch remain visually consistent so that the map doesn't jump when resizing the window div programmatically.

[andrewharvey]

Does anyone else expect the map bounds to stay similar on resize, thereby changing the zoom? As a user, I think this makes more sense as it keeps the view roughly the same across resize.

[jkarttunen]

Depends on breakpoint, I'm trying to reduce motion on resizes, by attaching top left corner. Now resize seems to be centered.

[herrethan]

For anyone else running into this issue, I've created a codesandbox that shows how you can anchor a map to one corner when it expands (plus some timing delay to make the panel always appear on top of the map), without any visually jarring adjustments. The trick is to:

• make sure .mapboxgl-canvas is anchored to the desired corner (eg top: 0, right: 0)
• calculate your new center and set it within a resize handler (ie not after .resize())

This could possibly be made more generic with some more math by adjusting center based on the new container's ∆x ∆y. But you'll always need to anchor the canvas with css to a desired corner to avoid unwanted movement.