Disable drag once attained maximum bounds in Leaflet

Question

I am working on Leaflet with a custom image whose tiles are being generated using "zoomify". I am currently facing the issues below:

1) On minimum zoom level, the image should not be draggable which is achieved using map.dragging.disable().

But the issue arises when the image is currently at maximum zoom level and user is dragging, as I don't want the focus to go beyond the tiles, i.e user should not be able to see "grey border" once he reaches beyond the bounds limit. Is it possible to do using Leaflet. For example, user drags the image and once grey border is starting to appear, the drag gets disabled. Although it does come back to current position by setting bounceAtZoomLimits: false as well as map.fitBounds(), but that is only when user ends dragging.

2) On Pinch zooming, the user can zoom in/out as much he/she can. Hence the image could contract as much as the user pinch zooms IN as well as pinch zooms OUT. Is it possible to stop this behaviour, i.e the user can only pinch zoom IN to the maximum zoom level set as well as pinch zoom OUT to the minimum zoom level set?

Any help would be appreciated. Thanks :)

Answer 1

Leaflet checks bounds only after dragging. You need to add drag process listener to fix tile layer position in action:

map.setMaxBounds(bounds);
map.on('drag', function() {
    map.panInsideBounds(bounds, { animate: false });
});

Example: http://jsfiddle.net/asleepwalker/exqar2w4/

UPD: I wrote a small plugin to perform it. Here is it: https://github.com/asleepwalker/leaflet.hardbounds

Answer 2

This has been answered here.

In Leaflet 1.0.0+ there is an option maxBoundsViscosity to "slow down map dragging" or make "the bounds fully solid".