Leaflet bounds with padding

Question

I'm Trying to create caching mechanism instead of bringing the whole map. right now i use: getBounds() and receive all the points in the area the user is currently viewing.

What i would like to achieve is Padding for the Bounds. for example:

map.getBounds(50)

should bring the bounds the user currently is viewing X2 the area.. or maybe one zoom level lower area.. but without interrupting the user.

currently fitBounds (JSFiddle Demo Here) does more or less that just resulting in changing the view of the user :( .. I Also tried getting the bounds from the function it self (fitBounds) but it outputs center and zoom not bounds (and i didnt succeed in resulting correct bounds from them)

Answer 1

Have you tried the pad method on the L.LatLngBounds you get from map.getBounds()? It is specifically made to increase the size of some bounds.

Returns bigger bounds created by extending the current bounds by a given percentage in each direction.

For example if you want to increase the size of your bounds by 1 view port in each direction, you would do:

var newBounds = map.getBounds().pad(1)

Now if you want to double the area of the bounds (approximately, not taking projection into account), you would have to increase the total length in each axis by sqrt(2), hence increase the bounds in each direction by sqrt(2) / 2:

var doubleAreaBounds = map.getBounds().pad(Math.sqrt(2) / 2)