Turf.js along method is giving wrong results

Question

I tried to use truf js and plot the route and i am getting horizontal line along with route. I dont know what else to do as it works for other types of routes.

for (let i = 0; i < lineDistance; i += steps) {
    const segment = turf.along(route.features[0], i);
    arc.push(segment.geometry.coordinates);
}

above code is how i calculate arc to plot on map.

The route coordinates has two checkpoints/routepoints as showing in diagram. LA(USA) and Tokyo (Japan).

const route = {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': routePoints
                        }
                    }
                ]
            };

Ref: https://maplibre.org/maplibre-gl-js-docs/example/animate-point-along-route/

Codepen: https://codepen.io/hasanac/pen/JjLmZqd (Seems it is issue for city in east to City in west)

Answer 1

Change "i" to start at "1" instead of "0" and the arc will calculate properly.

for (let i = 1; i < lineDistance; i += steps) {
    const segment = turf.along(route.features[0], i);
    arc.push(segment.geometry.coordinates);
}

Explanation... The first point along the route is "wrong" when calculating an arc across the pacific, so it wraps around the earth for the 2nd point (a bug?).

Discovered this by printing each segment to the console.log() and noticed the first point (i=0) is very different from the other points.

for (let i = 0; i < lineDistance; i += steps) {
    const segment = turf.along(route.features[0], i);
    console.log(segment.geometry.coordinates);
    arc.push(segment.geometry.coordinates);
}