Mapbox.GL: scroll zoom in and out to specific coordinates on custom mapbox map

Question

I have embedded a custom mapbox studio map onto my site and set the minZoom and maxZoom coordinates so it only zooms out to a certain zoom level and zooms in to a certain zoom level. BUT when the user zooms back in, the map goes where the user places their mouse pointer, rightly so, BUT I want it to zoom back to it's starting point, not where the user places their mouse pointer.
This is the closest example I found, but I don't want the narrative, I want the user to just scroll on the map: https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

How do I make it such that when the user scrolls down the embedded map zooms out to a certain set of coordinates and when the user scrolls back up, the embedded map zooms back in to a certain set of coordinates?

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-118.451784, 34.035947], // starting position
zoom: 11.66,
maxZoom: 11.66, // starting zoom
minZoom: 1.4, // ending zoom
doubleClickZoom: false,
dragRotate: false,
dragPan: false

});

Curiously enough, zooming to fixed coordinates happens to be the out-of-the-box behaviour if setting coordinates via React Mapbox GL. To get closer to the default mapbox behaviour, look at their onDragEnd event. — pzrq
– pzrq, Commented Nov 22, 2019 at 11:58

Lucas Wojciechowski · Accepted Answer · 2016-03-02 19:14:27Z

2

Unfortunately, this isn't easy with the existing mapbox-gl-js API. I recommend disabling all the built-in interaction handlers and writing your own event handler for the wheel event that calls Map#setZoom

answered Mar 2, 2016 at 19:14

Lucas Wojciechowski

3,84218 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Mapbox.GL: scroll zoom in and out to specific coordinates on custom mapbox map

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related