Disable drag and drop after reaching maximum borders in the sheet

Question

I am working on a sheet with a custom image whose fragments are created using “scaling”. I am currently facing issues below:

1) At the minimum zoom level, the image cannot be dragged, which is achieved using map.dragging.disable() .

But the problem arises when the image is currently at the maximum zoom level, and the user drags, because I do not want the focus to go beyond the tiles, that is, the user should not see the “gray border” as soon as it reaches beyond the limit borders. Can I use the Flyer. For example, the user drags the image, and as soon as the gray frame begins to appear, the drag and drop is disabled. Although it returns to its current position by setting bounceAtZoomLimits: false as well as map.fitBounds() , it only happens when the user finishes dragging and dropping.

2) When scaling a Pinch, the user can zoom in / out as much as he can. Consequently, the image can be compressed as much as a custom tweezer scales IN, and a pinch scales OUT. Is it possible to stop this behavior, i.e. Can the user only zoom in to the maximum zoom level, and also increase the OUT scale to the minimum zoom level?

Any help would be greatly appreciated. Thanks:)

Answer 1

The flyer checks only after . You need to add a drag and drop listener to fix the position of the tile layer 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 execute it. Here it is: https://github.com/asleepwalker/leaflet.hardbounds

Answer 2

This was answered here .

In flyer 1.0.0+ there is a maxBoundsViscosity option maxBoundsViscosity “slow down the drag map” or make “solid boundaries”.