Ambiguous Path Lines Rendered

[Hammad335]

Environment

• Xcode version: 16.1
• iOS version: 18.1
• Devices affected:
• Maps SDK Version: 11.8.0

Observed behavior and steps to reproduce

In our Xcode Swift project, we are using the Mapbox SDK to display real-time flight paths from takeoff to landing. However, we are encountering an anomaly when drawing the flight path, particularly around the North Pole.

As illustrated in the below screenshot, the dotted path line (created as a polyline using MapKit and rendered on the map using the Mapbox SDK) appears as a circular arc instead of a straight line. This issue consistently occurs at this specific location near the North Pole.

The code to render coordinates on map :

func addDottedLineLayer() {
            guard let lastPosition = UserSession.shared.flightTrackingList?.last else { return }
            let startCoordinate = CLLocationCoordinate2D(
                latitude: lastPosition.latitude ?? .zero,
                longitude: lastPosition.longitude ?? .zero)
            
            let destinationCoordinate = UserSession.shared.selectedDestinationCoordinates.coordinate
            
            let coordinates = [startCoordinate, destinationCoordinate]
            
            guard let dottedLineString = convertMKGeodesicPolylineToTurfLineStringFrom(coordinates: coordinates) else { return }
            let dottedLineFeature = Feature(geometry: .lineString(dottedLineString))
            
            var dottedLineSource = GeoJSONSource(id: MapViewLabels.dottedLineSourceId)
            dottedLineSource.data = .feature(dottedLineFeature)
            
            try? mapProxy?.map?.addSource(dottedLineSource)
            
            var dottedLineLayer = LineLayer(id: MapViewLabels.dottedLineLayerId, source: MapViewLabels.dottedLineSourceId)
            dottedLineLayer.lineColor = .constant(StyleColor(.gray))
            dottedLineLayer.lineWidth = .constant(5.0)
            dottedLineLayer.lineDasharray = .constant([2.0, 3.0]) // Adjust for dot size and spacing
            dottedLineLayer.lineCap = .constant(.round)
            
            try? mapProxy?.map?.addLayer(dottedLineLayer)
        }

func convertMKGeodesicPolylineToTurfLineStringFrom(coordinates: [CLLocationCoordinate2D]) -> LineString? {
    let polyline = MKGeodesicPolyline(coordinates: coordinates, count: 2)
    
    guard polyline.pointCount > 1 else {
        print("Polyline must have at least two points to form a LineString.")
        return nil
    }

    var coordinates: [CLLocationCoordinate2D] = []

    for i in 0..<polyline.pointCount {
        let mapPoint = polyline.points()[i]
        let coordinate = CLLocationCoordinate2D(
            latitude: mapPoint.coordinate.latitude,
            longitude: mapPoint.coordinate.longitude
        )
        coordinates.append(CLLocationCoordinate2D(latitude: coordinate.latitude, longitude: coordinate.longitude))
    }

    return LineString(coordinates)
}

Further, we thought the problem might be caused by the polyline itself, but the following observations suggest otherwise:

As the below images show, the covered path (blue) of the plane—generated using real-time coordinates from the API—also appears as ambiguous or unpredictable when rendered on the map. However, the points received from the API form an accurate path, whether it is left, right, or straight. Despite this, both the dotted and covered lines are not rendered as one directional but appear ambiguous.

Additionally, the ambiguous path line is not always circular. As shown in another image below, there are instances where the rendered path creates strange, inconsistent patterns instead of a straight or circular path.

Steps to Reproduce:

1- Create a polyline from origin and destination coordinates using MapKit (e.g., from Dubai (DXB) airport to Seattle (SEA)).
2- Convert the polyline to a LineString.
3- Render the LineString on the map and observe the generated path line.

Expected behavior

The path line rendered on the Mapbox map should appear as a straight line connecting the origin and destination, rather than as a circular arc.