Leaflet - map.fitBounds() / map.getBoundsZoom() BROKEN after resizing map?

Question

https://jsfiddle.net/MaxHeadroom/s6h40xrn/

If you resize the map size, the zoom level should be adapted to always show the orange rectangle at maximum possible size.

But fitBounds seems to be broken after resizing the map. Same problem with map.getBoundsZoom().

To reproduce the buggy behaviour, start with a small map size - increase it and decrease it then. Check the console output too.

Or is there some a mistake in my source code?

Answer 1

The problem is that you're locking the minZoom and the map can't jump to the next zoom level out to keep the bounds within the view.

The solution is set minZoom one zoom step smaller temporarily so the map can resize if it needs to:

function map_onResize(e){    
    map.setMinZoom(map.getZoom()-1)
    map.fitBounds(bounds, true);
    map.setMinZoom(map.getZoom());
}

Answer 2

You should call map.invalidateSize() after you change the map size. Or maybe try to wait

var corner1 = L.latLng(50.012, 8.227);
var corner2 = L.latLng(50.074, 8.125);
var bounds  = L.latLngBounds(corner1, corner2);
var rectangle = L.rectangle(bounds, {color: "#ff7800", weight: 3}).addTo(map);
function map_onResize(e){
    map.invalidateSize();
    //setTimeout(function(){
      map.fitBounds(rectangle.getBounds(), true);
    //},800)    
} 

Answer 3

Using this code also worked perfectly for me when replacing it in the given example: https://jsfiddle.net/MaxHeadroom/s6h40xrn/

function map_onResize(e){
    setTimeout(function(){
        const wantedZoom = map.getBoundsZoom(bounds, true);
        map.setMinZoom(wantedZoom-1);
        map.fitBounds(bounds, true);
    }, 500);
}