> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)

# Add cooperative gestures to a map

Use the `Map` object's [`cooperativeGestures`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) parameter to control [`scrollZoom`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler) 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.

> Example code:

**JavaScript**

```html
<!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.29.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.29.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>
    const map = new mapboxgl.Map({
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
        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/standard',
        cooperativeGestures: true
    });

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

</body>
</html>
```