Mapbox-gl-js: Add ability to fix map corner position during map.resize()

[lucaswoj]

[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.