Lines not drawn correctly on globe projection

[mrjbq7]

I am using mapbox to render an airplane flight from San Francisco, CA to Dubai. The flight should be rendered using the "shortest direct distance" over the north pole, but is rendered by MapBox GL incorrectly as flying east across the US and over the Atlantic Ocean.

The ideal shortest path is about 7000 nm and the path as displayed is approximately 9200 nm.

mapbox-gl-js version: 3.2.0

browser: Safari 17.4 (19618.1.15.11.12)

Steps to Trigger Behavior

1. Draw a line from -122.375, 37.61899948120117 to 55.3643989563, 25.2527999878

Link to Demonstration

https://codepen.io/mrjbq7/pen/JjVEKgm

Expected Behavior

Actual Behavior

[mrjbq7]

I tried to use the arc.js plugin version 0.1.0, but it has weird rendering artifacts over the north pole, and I don't understand why a LineString wouldn't render correctly anyway.

<script src="https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js"></script>

    let arcs = [];

    let start = { x: -122.375, y: 37.61899948120117};
    let end = { x: 55.3643989563, y: 25.2527999878};

    var generator = new arc.GreatCircle(start, end);
    var line = generator.Arc(100, { offset: 20});
    arcs.push(line.json());

    map.getSource('LineString').setData({
        'type': 'FeatureCollection',
        'features': arcs
    });

[chboing]

You should try mapbox-gl-draw-geodesic instead. https://www.npmjs.com/package/mapbox-gl-draw-geodesic Mapbox is not drawing geodesic by default.

For the north pole bug . . there are already some issues around here.

You'll soon notice that it's above 85N or below 85S, and probably linked to the lack of map texture there. Seems like a common thing. Google maps or others have no tiles above or below this limit.

[mrjbq7]

@chboing thanks, I also looked at mapbox-gl-draw-geodesic, and it renders the lines in the correct orientation, but also has the North Pole drawing bug...