mapbox / mapbox/mapbox-maps-ios

Ambiguous Path Lines Rendered

Open
#2,286 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :beetle:
Dominant language
Swift
Stars
601
Forks
196
PR merge metrics
No merged PRs in 30d

Description

## 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.

![Image](https://github.com/user-attachments/assets/38b9b6f2-5268-4309-acd5-1caaebf72196)

The code to render coordinates on map :

```swift
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..

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the addDottedLineLayer function and convertMKGeodesicPolylineToTurfLineStringFrom code shown in the report. Reproduce the Dubai-to-Seattle case near the North Pole, then compare the MapKit-generated coordinates with the Mapbox LineString and LineLayer rendering. Done means the rendered path matches the intended origin-to-destination route without ambiguous or inconsistent patterns.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, swift
Domain
computer-graphics, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.