Leaflet – Bounds from getBounds Changed After Rendering

leaflet

Leaflet Version: 1.4.0. At the time of render, we are saving bounds by calling getBounds() on the layer.
After the map is rendered, zoomend event is called and the bounds captured are different from previous getBounds(). This looks weird.

We want to persist the bounds and apply them after reopening. So we are capturing bounds on zoomend event. As these bounds are different, we see variation of the extents.
Code sample:

polygonLayer.getBounds(); //This will give bounds of the layer
-----
mymap.on('zoomend', function(event) {   
  var bounds = event.target.getBounds();
});

These two are different as shown below. If I need to save my extent and apply again what should be done.

enter image description here

Best Answer

I'm not sure I follow the logic you are trying to achieve by using zoomend event, but when you fit to bounds, the zoom doesn't necessarily change - it might be that only the bounds have changed.
Try checking the results from moveend event

mymap.on('moveend', function(event) {   
  var bounds = event.target.getBounds();
});

You might also want to prevent animation in the first panning:

map.fitBounds(polygonLayer.getBounds(), {
    animate: false,
})
Related Question