mapbox-gl-js

mapbox-gl-js copied to clipboard

mapbox-gl-js version: 2.15.0

browser: Firefox 114.0.2 (or latest chrome also)

Steps to Trigger Behavior

1. Try to fly from somewhere far east in the eastearn hemisphere to somewhere west in the western hemisphere.

With a globe projection, the map will go westwards (around the world), while other projections like the mercator projection will go eastwards (the shorter route). This is related to #2071 and #1853.

Link to Demonstration

https://github.com/mapbox/mapbox-gl-js/assets/64247965/8aa6fd6a-744f-441c-9e3c-6456bb41fde9

Code to reproduce:

map.flyTo({
  center: [180, 0],
});
setTimeout(() => {
  map.flyTo({
    center: [-180, 0],
  });
}, 2500);

Expected Behavior

Take the shortest possible path.

Actual Behavior

Stays on w=0 and goes "the wrong way around" the globe.

Issue still exists in v3.0.1

Example

Plotting line between San Francisco and Auckland does not render shortest path:

    <Map
      mapLib={import("mapbox-gl")}
      initialViewState={{
        longitude: -100,
        latitude: 40,
        zoom: 1,
      }}
      style={{ width: "100vw", height: "100vh" }}
      mapStyle="mapbox://styles/blumk/clqrgy8cf00cu01ob4nrufv5k"
      mapboxAccessToken={mapboxToken}
      onRender={(event) => event.target.resize()}
    >
      <Source
        id="polylineLayer"
        type="geojson"
        data={{
          type: "Feature",
          properties: {},
          geometry: {
            type: "LineString",
            coordinates: [
              [174.7917, -37.008],
              [-122.375, 37.6188],
            ],
          },
        }}
      >
        <Layer
          id="lineLayer"
          type="line"
          source="my-data"
          layout={{
            "line-join": "round",
            "line-cap": "round",
          }}
          paint={{
            "line-color": "rgba(3, 170, 238, 0.5)",
            "line-width": 5,
          }}
        />
      </Source>
    </Map>