Control Map Gestures in Leaflet
LeafletConfigure Leaflet map interactions including scroll wheel zoom, drag panning, double-click zoom, and touch gestures using L.map options.
const map = L.map('map', {
scrollWheelZoom: false,
doubleClickZoom: false,
dragging: true,
zoomControl: true,
boxZoom: false
}).setView([51.5074, -0.1278], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
map.on('click', () => map.scrollWheelZoom.enable());How it works
Leaflet exposes map interaction options directly in the L.map() constructor. Setting scrollWheelZoom: false prevents accidental zooming while scrolling a page. You can disable or enable each gesture type independently: dragging, double-click zoom, box zoom, and scroll wheel.
A common UX pattern is to require a click before enabling scroll zoom. The example disables scroll wheel zoom initially, then enables it when the user clicks the map. This prevents the map from hijacking page scroll while still allowing intentional zoom interaction.
Key APIs
| API | Description | Docs |
|---|---|---|
scrollWheelZoom |
Scroll wheel zoom handler | leafletjs.com/reference.html#map-scrollwheelzoom |
dragging |
Pan handler | leafletjs.com/reference.html#map-dragging |
doubleClickZoom |
Double-click zoom handler | leafletjs.com/reference.html#map-doubleclickzoom |
FAQ
How do I re-enable scroll zoom after disabling it?
Call map.scrollWheelZoom.enable(). Each handler (dragging, scrollWheelZoom, doubleClickZoom) has .enable() and .disable() methods.
How do I make the map completely non-interactive?
Set dragging: false, scrollWheelZoom: false, doubleClickZoom: false, boxZoom: false, keyboard: false, and zoomControl: false.
Common mistakes
- Confusing
scrollWheelZoom(constructor option, boolean) withmap.scrollWheelZoom(handler object with enable/disable methods) - Forgetting that
zoomControl: falseonly hides the +/- buttons: it does not disable keyboard or scroll zoom - Disabling dragging on mobile without providing an alternative pan method
Build maps using Leaflet with AI
Generate code like this control map gestures in leaflet example using the Leaflet skill in your IDE.
Related Examples
- Initialize a Leaflet Map with MapTiler Tiles
- See how to do this in MapLibre GL JS, MapTiler SDK or OpenLayers