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

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

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);
};