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
    Commented Dec 16, 2013 at 18:06
  • I answered this question below. Commented Jul 6, 2018 at 10:20

4 Answers 4


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

if (map.tap) map.tap.disable();

turn it on again with

if (map.tap) map.tap.enable();
  • 2
    Thank you very much. I was looking so wrong _ thought there must be a single method to do that.
    – Bernie
    Commented Mar 20, 2013 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
    Commented Mar 16, 2015 at 11:35
  • @netAction, Do you have a solution to the touch gesture scrolling issue? Commented Jan 12, 2017 at 14:57
  • @ChrisFremgen: map.dragging.disable(); does the trick that the map stops fetching scrolling gestures.
    – netAction
    Commented Jan 12, 2017 at 15:06
  • Is there a way to only disable zoomIn?
    – howard.D
    Commented Mar 22, 2017 at 4:09

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


map._handlers.forEach(function(handler) {



map._handlers.forEach(function(handler) {

  • 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
    Commented Sep 22, 2017 at 7:35

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.


I'm using react-leaflet with quite a few custom event handlers added to my leaflet map. I can't just stop propagation on the leaflet domevent because doing so caused issues (esp. with components from other frameworks I'm using such as material-ui).

So in case anybody is in the same boat, here's a solution that's working for me!

import React, { useEffect, useRef } from 'react'
import { DomEvent } from 'leaflet'
import { useLeaflet } from 'react-leaflet'

const PreventLeafletControl = (props) => {
  const controlRef = useRef()
  const leaflet = useLeaflet()
  useEffect(() => {
    if (controlRef) {
      const eventsClone = leaflet.map._events
      const eventsEmpty = Object.keys(eventsClone).reduce((accumulator, key) =>
        accumulator[key] = []
      , {})
      DomEvent.addListener(controlRef.current, 'mouseover', () => {
        leaflet.map._events = eventsEmpty
        leaflet.map._handlers.forEach(handler => handler.disable())
      DomEvent.addListener(controlRef.current, 'mouseout', () => {
        leaflet.map._handlers.forEach(handler => handler.enable())
        leaflet.map._events = eventsClone

  return <div ref={controlRef}>

export default PreventLeafletControl

Just wrap <PreventLeafletControl> around your custom UI component and you should be good.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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