Add intersection signals along current route.

[ShanMa1991]

Description

This Pr is to fix #3843 by annotating intersection signals along the current route.

Implementation

• The intersection signals include railroad crossing, yield sign, stop sign and traffic signal.
• Added NavigationViewController.annotatesIntersectionsAlongRoute and CarPlayNavigationViewController.annotatesIntersectionsAlongRoute to annotate intersections on the current route step during active navigation.
• When style change in NavigationViewController and CarPlayNavigationViewController, the signal icons from bundle resource will be added to the MapView style for intersection signals in current style type. And then update the signal layers.
• When RouteProgress updated or reroute event happened, intersections on the current step and the first intersection on the upcoming step will be annotated on map. When user passed an intersection, the intersection signals will be removed from the source feature and disappear.

Screenshots or Gifs

[1ec5]

It would be awesome if the current Style subclass could define these images right alongside Style.mapStyle.

[1ec5]

Looks like the intersection annotation layer is on top of the maneuver arrow layer. That makes logical sense and maintains the illusion of these traffic lights and signs standing upright. However, the maneuver arrow is an important element to be obscuring with an icon.

Will the maneuver arrow be prominent enough to overcome this overlap? Or should be consider a visual mitigation, such as offsetting the traffic light at a maneuver point?

[ShanMa1991]

I think we could solve this issue by having a smaller icon or a longer maneuver arrow, from a UX design perspective. Because it's easy to understand by having the traffic signal icons place above the route line, which means that the user will drive through them.

[1ec5]

Yes, Google Maps takes a similar approach of elongating the maneuver arrow. That would also make the arrow more intuitive at large intersections: #3589. Apple Maps no longer displays maneuver arrows at all. Both applications display the traffic control device icon and highlight the intersection callout. #2928 would be a major usability improvement, making the maneuver arrow redundant, but maybe we could ticket out a simpler tweak to the maneuver arrow in the meantime.

[mapbox-github-ci-issues-public-1]

Breaking Changes in MapboxCoreNavigation

Breaking API Changes

RouteLegProgress

• removed method: init(leg:stepIndex:spokenInstructionIndex:) in RouteLegProgress

RouteProgress

• removed method: init(route:options:legIndex:spokenInstructionIndex:) in RouteProgress

[mapbox-github-ci-issues-public-1]

Breaking Changes in MapboxCoreNavigation

Breaking API Changes

RouteLegProgress

• removed method: init(leg:stepIndex:spokenInstructionIndex:) in RouteLegProgress

RouteProgress

• removed method: init(route:options:legIndex:spokenInstructionIndex:) in RouteProgress

[1ec5]

This is looking great! There’s some potential follow-up work detailed below, but from an API standpoint the feature is good to go.

[1ec5]

Yes, Google Maps takes a similar approach of elongating the maneuver arrow. That would also make the arrow more intuitive at large intersections: #3589. Apple Maps no longer displays maneuver arrows at all. Both applications display the traffic control device icon and highlight the intersection callout. #2928 would be a major usability improvement, making the maneuver arrow redundant, but maybe we could ticket out a simpler tweak to the maneuver arrow in the meantime.