CODEWITHSUNDEEP
scrollzoomingmapbox-gl-jspinchzoom
Take your Backpack
Take your Backpack

Reputation: 1

Mapbox: how to prevent page-scroll hijacking while allowing pinch to zoom

I'm inserting a Mapbox map with mapbox-gl-js as a full-width, full-height div into my website. The default behaviour is that scroll is used for zooming. But I don't want that as then the user can't scroll down the page anymore.

MAP.scrollZoom.disable(); solves that, however than I lose the option to zoom in/out by pinching on trackpad.

Is there a way to disable zoom by scroll, but keep zoom by pinch?

I found https://github.com/mapbox/mapbox-gl-js/pull/11029 which seems to be exactly what I am looking for, but I don't get it to work.

This is my current code:

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet"/>

mapboxgl.accessToken = 'xxx';
const MAP = new mapboxgl.Map({
    container: MAP_DIV,
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    bounds: <?php echo $mapBounds; ?>,
});
MAP.addControl(new mapboxgl.NavigationControl({showCompass: false}));
MAP.scrollZoom.disable();```

Upvotes: 0

Views: 22

Answers (0)

Related Questions