User should see an upcoming maneuver arrow on the route line

[ericrwolfe]

Similar to the one on iOS:

iOS creates a line segment 30m before and after the maneuver point, and then adds this arrow shaft as a runtime styling layer.

The arrowhead is a white triangle that is add as a symbol layer and rotated based on the bearing of the maneuver.

cc @mapbox/navigation-android @frederoni @bsudekum

[Guardiola31337]

iOS OP implementation 👀 https://github.com/mapbox/mapbox-navigation-ios/blob/master/MapboxNavigation/NavigationMapView.swift#L586

[Guardiola31337]

iOS OP implementation 👀 https://github.com/mapbox/mapbox-navigation-ios/blob/master/MapboxNavigation/NavigationMapView.swift#L586

Revisit when Boba expressions get released (👀 mapbox/mapbox-navigation-ios#1076)

[Guardiola31337]

Capturing @1ec5 comment

We only draw it on the upcoming step, but yeah. The arrow consists of a shaft (line feature + line layer) and an arrowhead (point feature + symbol layer), plus a shaft casing (line feature + line layer) and arrowhead casing (point feature + symbol layer). The geometry code there ensures the arrow hugs the intersection.
The casing layer is slightly thinner than the route line, yes.

[Guardiola31337]

As pointed in mapbox/mapbox-navigation-ios#1298 we should also make the arrow’s color styleable instead of always white.

[akitchen]

Note the relationship to #704 -- further refactoring is probably needed in order to address these two tickets.

[Guardiola31337]

Capturing @frederoni's comments

the shaft is sliced 30 meters before and 30 meters after the RouteStep’s maneuverCoordinate using turf’s trimmed() function https://github.com/mapbox/turf-swift/blob/master/Sources/Turf/Turf.swift#L210

the direction is calculated from the second last to the very last coordinate in the shaft using turf’s direction(to:) https://github.com/mapbox/turf-swift/blob/master/Sources/Turf/Turf.swift#L36

symbol.coordinate = shaft.coordinates.last

the arrow is a static image, anchored horizontally and vertically center on the shaft.coordinates.last

[Guardiola31337]

Equivalent Android Turf methods:

• trimmed() 👉 turf-line-slice-along (Still not ported to Java 👀 https://github.com/mapbox/mapbox-java/blob/master/docs/turf-port.md) cc @osana
• direction(to:) 👉 TurfMeasurement#bearing(Point, Point)

For reference, here’s the magic decoder ring 👉 https://github.com/mapbox/turf-swift#available-functionality (thanks @1ec5 🙏)