Skip to content

greatCircle returns array of NaN if start and end is the same #2342

@laurenceks

Description

@laurenceks

@turf/great-circle 6.5.0

If the coordinates passed to greatCircle are the same it returns an array of NaNs.

This has happened during a line animation along a greatCricle. The animation draws a line up to the progress marker so that the line is divided in colour to show progress. Effectively the initial complete greatCircle line is being painted over by the same line (this is in mapbox-gl).

As the progress percentage in the first frame is 0% the coordinates passed to greatCricle are the same for start and end points. greatCricle returns a linestring with coordinates of [[NaN, NaN], [NaN, NaN]...], which cannot be used and cause an error.

Expected output would be an array of all coordinates the same (the start point).

Example

This does not work when coordinates.start.arrayLongLat and progressMarkerCoordinates are equal:

const progressRouteCoordinates = greatCircle(coordinates.start.arrayLongLat, progressMarkerCoordinates).geometry.coordinates;

Comparing the start and end and substituing a simple linestring if they are the same prevents this issue, but I feel shouldn't be necessary

const progressRouteCoordinates = progressMarkerCoordinates[0] === coordinates.start.long && progressMarkerCoordinates[1] === coordinates.start.lat ? [coordinates.start.arrayLongLat, progressMarkerCoordinates] :
            greatCircle(coordinates.start.arrayLongLat, progressMarkerCoordinates).geometry.coordinates;

Code context

const animateMap = (durationInMs = mapAnimationDurationInMs) => {
    //make sure the event listener only fires once
    scrolledIntoFrame.unobserve(document.querySelector("#map"));
    const easing = BezierEasing(0.16, 1, 0.3, 1); //easeOutExpo to match countUp
    let startTime = null;
    const progressAnimation = (timestamp) => {
        if (!startTime) {
            startTime = timestamp;
        }
        const runtime = timestamp - startTime;
        const progressPercent = easing(runtime / durationInMs);

        //calculate new coordinates based on current progress
        const progressMarkerCoordinates = along(linestring(route.data.geometry.coordinates),
            sheetsData["Total distance"] * progressPercent, {
                units: "kilometers"
            }).geometry.coordinates;

        //**ISSUE IS HERE** - without comparison, greatCircle returns array of NaN because the line hasn't progressed yet and so the start/end coordinates are the same
        const progressRouteCoordinates = greatCircle(coordinates.start.arrayLongLat, progressMarkerCoordinates).geometry.coordinates;


        const remainingRouteCoordinates = greatCircle([...progressRouteCoordinates].pop(),
            coordinates.end.arrayLongLat).geometry.coordinates;
        //update marker and lines
        progressMarkerMapBoxGl.setLngLat(progressMarkerCoordinates);
        map.getSource("progressRoute")
            .setData({
                ...progressRoute.data,
                geometry: {
                    ...progressRoute.data.geometry,
                    coordinates: progressRouteCoordinates,
                },
            });
        map.getSource("remainingRoute")
            .setData({
                ...remainingRoute.data,
                geometry: {
                    ...remainingRoute.data.geometry,
                    coordinates: remainingRouteCoordinates,
                },
            });

        //if not yet complete, request a new frame
        if (progressPercent < 1) {
            requestAnimationFrame(progressAnimation);
        }
    };
    requestAnimationFrame(progressAnimation);
};

Is this intended behaviour or a genuine issue?

(Similar old issues #1361 #1946 with lineOffset, ?related)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions