20

How can I temporary disable zoming/draging the Mapview in Leaflet.js Tried so many ways but without any luck. It's important to make it temporary and I also need the option to enable again.

  • Any ideas how to do this with CSS? I need to disable dragging on mobile using a media query. I tried setting a transparent layer on top of it but it clicks right through that layer. I even played with pointer-events but no luck. The proper approach is most likely through the use of -webkit-user-drag: none; but I have applied that to every element I can find and still no luck. Thanks. – user24972 Dec 16 '13 at 18:06
  • I answered this question below. – hayatbiralem Jul 6 '18 at 10:20
32

your going to want to do (assuming your map is call map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

turn it on again with

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';
  • 2
    Thank you very much. I was looking so wrong _ thought there must be a single method to do that. – Bernhard Mar 20 '13 at 13:59
  • 1
    This solution has some issues: The mouse cursor is still a hand. Page scrolling with touch gestures is not possible over the map. When the opening of a Popover moves the map it will never pan back. – netAction Mar 16 '15 at 11:35
  • @netAction, Do you have a solution to the touch gesture scrolling issue? – Chris Fremgen Jan 12 '17 at 14:57
  • @ChrisFremgen: map.dragging.disable(); does the trick that the map stops fetching scrolling gestures. – netAction Jan 12 '17 at 15:06
  • Is there a way to only disable zoomIn? – howard.D Mar 22 '17 at 4:09
5

If you don't want to disable each handler manually, you can loop over all of them and disable/enable them.

Disable

map._handlers.forEach(function(handler) {
    handler.disable();

});

Enable

map._handlers.forEach(function(handler) {
    handler.enable();

});
  • Beware that using non public properties (_handlers) may cause error in your code even on leaflet patch version changes as it is not guaranteed to remain unchanged. Feature request should be submitted to leaflet ;) – Luckylooke Sep 22 '17 at 7:35
0

I think, you can wrap your map with a helper container and you can disable it with simple CSS class like is-locked.

Here's what I'm talking about:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

I hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.