Skip to main content

Add cooperative gestures to a map

Additional Developer Resources

Use the Map object's cooperativeGestures parameter to control scrollZoom and touchPan actions.

When setting cooperativeGestures to true, scroll-to-zoom requires using the control or command key while scrolling to zoom the map, and panning on touch devices requires using two fingers to pan the map. This allows the user to scroll the page without unintentionally zooming or panning the map.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add cooperative gestures to a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        zoom: 12.5,
        center: [-77.01866, 38.888],
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        cooperativeGestures: true
    });

    map.addControl(new mapboxgl.FullscreenControl());
</script>

</body>
</html>
This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.
Additional Developer Resources
Was this example helpful?