Hide portions of the route that the user has passed

[captainbarbosa]

Fixes #1307
Fixes #1434

⚠️ Breaking changes expected to land in v1.0

Adds the option to fade the route line as the user navigates along a route. A custom fade out color can also be specified. the default is clear, to give the appearance of a "vanishing" line as the puck travels along a route.

This also fixes #1434 because I've broken out the main route / alternate routes into different casing layers:

The vanishing route color can also be customized by overriding NavigationMapView.appearance().vanishingRouteColor:

Within this change, NavigationMapViewDelegate.navigationMapView(_:routeStyleLayerWithIdentifier:source:) and NavigationMapViewDelegate.navigationMapView(_:routeCasingStyleLayerWithIdentifier:source:) are removed in favor of four new delegate methods to customize the route styling:

• NavigationMapViewDelegate.navigationMapView(_:mainRouteStyleLayerWithIdentifier:source:) to style the main route.
• NavigationMapViewDelegate.navigationMapView(_:mainRouteCasingStyleLayerWithIdentifier:source:) to style the casing of the main route.
• NavigationMapViewDelegate.navigationMapView(_:alternativeRouteStyleLayerWithIdentifier:source:) to style alternative routes.
• NavigationMapViewDelegate.navigationMapView(_:alternativeRouteCasingStyleLayerWithIdentifier:source:) to style the casing of alternative routes.

cc @1ec5 @fabian-guerra

[captainbarbosa]

I'm working on nailing down the implementation in a side project first as a minimal test case before porting back to here - stay tuned.

[captainbarbosa]

This is the current state of the prototype - the gradients need to be fine-tuned still but I'm hopeful - seems like just a matter of nailing down the right numbers for the stops.

[captainbarbosa]

Looking better - here's a fake route toggling between traffic styled with two difference sources and layers. The difference is subtle, and even more indistinguishable when you end up calculating the gradient stops dictionary with CGFloat's nextUp/nextDown as @1ec5 suggested in #2377 (comment).

One layer contains individual congestion segments styled with an MGL_MATCH expression. The other layer is a singular line feature styled with a line gradient. Prototype for reference.

The next step is to dynamically transform the stops dictionary the gradient is using to simulate the disappearance of traveled-over parts of the line.

[LukasPaczos]

/cc @cafesilencio for visibility, in case there are any improvements that iOS could borrow from Android or vice versa

[captainbarbosa]

I got the gradient to fade today over time. Here's that same fake route line fading from 0-100% on a timer, leaving a white trail in its path:

Next up, I'll work on integrating the code for this prototype into this PR.

[captainbarbosa]

As of 25fcd74 the route line's traffic is now expressed with a single line gradient. Next, I need to work on how to only display this traffic only for the main route and not the alternate routes:

[captainbarbosa]

This might also take care of #1434...

[captainbarbosa]

Things are looking good (see new updated PR description). There's some additional refactoring I need to do before this PR is ready for review, but the visual implementation looks about right.

[captainbarbosa]

Opt-in setting moving in #2418 - that should be merged into this PR first.

[captainbarbosa]

#2418 has merged into this PR so now this feature is opt-in. I did some additional manual testing today to make sure the vanishing feature still works as expected when traffic isn’t enabled 👍

[1ec5]

It’s cool to see this come together and with less churn than I had expected. Thanks for including updated screenshots at the top; that gives more confidence that the feature works as expected in the absence of UI tests for this feature.

[captainbarbosa]

I've integrated all feedback, minus this weird behavior which I've noted for later and is not a blocker for this PR. The CI failure for the ci/circleci: Xcode_10.2_iOS_12.2_CP_install job is expected (caused by #2394), so we're good to merge assuming everything else passes.