Zooming in and out also pans in and out. ¿Does anyone know why that happens?

[inigopanos]

"mapbox-gl": "^2.15.0", When I zoom in or out, my map also pans to the top of the map (if zooming in) or out (if zooming out), and I have not found any kind of information about this specific problem.

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/api/map/

[mourner]

@inigopanos can you share a link to a page where this happens, or a minimal reproducible test case (e.g. on JSFiddle)?

[inigopanos]

Hello, I have tried an am sadly unable to provide either, due to a) problems with npm resolving dependencies between vue and mapboxgl which block me deploying it on netlify and b) not being able to to a js fiddle because it keeps throwing errors I don't have in my code. I put here a snippet of the code I have, and a video recording of my screen of how I see it.

https://github.com/mapbox/mapbox-gl-js/assets/47386848/ab653e95-cc2f-4487-8aa4-bafb6ac2ee6f

As you can see, when zooming in and out it also pans to the north or south. Another problem I am having is the marker not staying at the point it's supposed to, due to the previous problem I imagine.

This is the HTML code I am using `

`

And these are my map settings, pretty standard I think.

` const initMap = async (userLocationFromWatcher: [number, number]) => {

  await Promise.resolve();

  const userLocation = userLocationFromWatcher;

  if (!mapElement.value) throw new Error('Div Element no existe');
  if (!userLocation) throw new Error('User Location no existe');
  if (!ruinCoords) console.log('No hay coordenadas de ruinas');

  console.log('Se ha resuelto la promesa del mapa', userLocation);

  const map = new mapboxgl.Map({
    container: mapElement.value, // container ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: userLocation, // starting position [lng, lat]
    zoom: 13, // starting zoom
    }); 

  map.scrollZoom.enable();
  map.boxZoom.enable();
  map.dragPan.enable();

  const myLocationPopup = new mapboxgl.Popup({offset:[0, -45]})
  .setLngLat(userLocation)
  .setHTML(`
  <h4> Aquí estoy </h4>
  <p>${userLocation}</p>
  `);

  const myLocationMarker = new mapboxgl.Marker()
  .setLngLat(userLocation)
  .setPopup(myLocationPopup)
  .addTo(map);

}`

Sorry for the inconvenience of not being able to deploy it, I will try to help in whatever way I can.

[inigopanos]

So, a small update. I have been able to limit the problem by using setMaxBounds, and now it's not as discernable to the viewer as it was before. Nevertheless, the problem still stands as I am unable to properly set markers in the map, as they change locations depending on the zoom. I attach a video of current marker behaviour. Any suggestion is welcome.

https://github.com/mapbox/mapbox-gl-js/assets/47386848/fe92b8ed-fca8-47d2-b226-b9056d44ef27