Map Gestures & Interactions

Configure scroll zoom, drag, and touch interaction behavior Each library has its own approach: here's how they compare.

Quick Recommendations

Leaflet — Ideal when you need granular toggle of individual interactions (scrollWheelZoom, dragging, doubleClickZoom) via simple boolean options.

MapLibre GL JS — The right choice when you need cooperative gesture handling (Ctrl+scroll to zoom) for embedded maps with a clean overlay message.

OpenLayers — Makes the most sense when you need full control over the interaction stack: add, remove, or replace individual interaction instances.

MapTiler SDK — Works best for the simplest cooperative gesture setup: one option enables the Ctrl+scroll overlay automatically.

At a Glance

	Leaflet	MapLibre	OpenLayers	SDK
Coordinates	`[lat, lng]`	`[lng, lat]`	`fromLonLat([lng, lat])`	`[lng, lat]`
Rendering	DOM + Canvas (2D)	WebGL (GPU, 60fps)	Canvas + WebGL	WebGL (GPU, 60fps)
Bundle size	~42 KB gzipped	~250 KB gzipped	~290 KB gzipped (tree-shakeable)	~280 KB gzipped (includes MapLibre)
Learning curve	Easiest (simple API, great tutorials)	Moderate (source/layer model, expressions)	Steepest (projections, OGC standards, verbose API)	Easy (MapLibre API with convenience helpers)
3D support	No native 3D (2D only)	Full: terrain, fill-extrusion, globe, sky	Limited: WebGL layers, no native globe	Full (same as MapLibre)
Code lines	12	8	23	8

Code Snippets

Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.

Leaflet12 linesShow code

arrow_forwardFull example

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: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
map.on('click', () => map.scrollWheelZoom.enable());

MapLibre GL JS8 linesShow code

arrow_forwardFull example

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [13.405, 52.52],
  zoom: 11,
  cooperativeGestures: true
});
map.addControl(new maplibregl.NavigationControl());

OpenLayers23 linesShow code

arrow_forwardFull example

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY',
        attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>'
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([2.3522, 48.8566]),
    zoom: 13
  }),
  interactions: ol.interaction.defaults.defaults({
    doubleClickZoom: true,
    dragPan: true,
    mouseWheelZoom: true,
    pinchZoom: true,
    pinchRotate: false,
    altShiftDragRotate: false
  })
});

MapTiler SDK8 linesShow code

arrow_forwardFull example

maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.STREETS,
  center: [2.3522, 48.8566],
  zoom: 12,
  cooperativeGestures: true
});

Things to Know

Implementation-specific details that matter for map gestures & interactions.

Leaflet

Each interaction is an independent option (scrollWheelZoom, dragging, etc.); no built-in cooperative gesture mode.

MapLibre GL JS

cooperativeGestures option adds a Ctrl+scroll requirement with a semi-transparent overlay message for embedded maps.

OpenLayers

Interactions are objects in an array: you can pass ol.interaction.defaults({ mouseWheelZoom: false }) for fine-grained control.

MapTiler SDK

Cooperative gestures work identically to MapLibre; the overlay message and Ctrl+scroll behavior are inherited.

Which Library to Use?

Leaflet

Configure Leaflet map interactions including scroll wheel zoom, drag panning, double-click zoom, and touch gestures using L.map options.

check_circle

Ideal when you need granular toggle of individual interactions (scrollWheelZoom, dragging, doubleClickZoom) via simple boolean options.

MapLibre GL JS

Enable cooperative gestures and customize scroll zoom behavior to improve embedded map UX in MapLibre GL JS.

check_circle

The right choice when you need cooperative gesture handling (Ctrl+scroll to zoom) for embedded maps with a clean overlay message.

OpenLayers

Configure zoom, pan, and rotation interactions on an ol.Map using OpenLayers interaction defaults.

check_circle

Makes the most sense when you need full control over the interaction stack: add, remove, or replace individual interaction instances.

MapTiler SDK

Enable cooperative gesture handling so users must Ctrl+scroll to zoom the embedded map.

check_circle

Works best for the simplest cooperative gesture setup: one option enables the Ctrl+scroll overlay automatically.

auto_awesome

Build Maps with AI

Generate code like these examples using mapping library skills in your IDE.

auto_awesomeGet skills keyGet a free API key