mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.23k stars 2.23k forks source link

[BUG] Different values of bearing causes zoom to reset the bearing #13284

Open azro352 opened 2 months ago

azro352 commented 2 months ago

mapbox-gl-js version: "mapbox-gl": "^3.6.0"

browser: chrome 128.0.6613.138

Steps to Trigger Behavior

  1. take the example https://docs.mapbox.com/mapbox-gl-js/example/georeference-imagery/
  2. add a bearing of 6
  3. zoom on the map
  4. the bearing is reset

Whereas you set the bearing to 7, you zoom, bearing doesn't change

Link to Demonstration

import { useEffect, useRef } from "react";

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

export const MapboxExample = () => {
    const mapContainerRef = useRef();
    const mapRef = useRef();

    useEffect(() => {
        mapboxgl.accessToken = "ACCESS_TOKEN";

        mapRef.current = new mapboxgl.Map({
            container: mapContainerRef.current,
            style: "mapbox://styles/mapbox/streets-v12",
            center: [-122.619991, 45.536023],
            zoom: 10.5,
            bearing: 6, 
        });

        mapRef.current.on("load", () => {
            mapRef.current.addSource("portland", { type: "raster", url: "mapbox://examples.32xkp0wd", });
            mapRef.current.addLayer({id: "portland", source: "portland", type: "raster", });
        });

        return () => mapRef.current.remove();
    }, []);

    return <div ref={mapContainerRef} id="map" style={{ height: "100%", minHeight: 700 }}></div>;
};

Expected Behavior

You zoom in/out or drag the map and the bearing doesn't change

Actual Behavior

When you zoom in/out or drag the map, with some bearing value (I saw it with bearing less then 6), then the bearing is reset and you see the map rotate as like there is no bearing setting set