Deemphasize portions of the route line that the user has passed

[1ec5]

Portions of the route line that the user has already passed should be displayed in a more muted or translucent color, to better emphasize the portion that the user still has yet to reach. This effect would be most prominent in overview mode, but even in straight-ahead mode, the line would look different above and below the user puck.

Contrary to the initial explorations in #1162, we’ll keep the line’s geometry constant as the user moves. However, we’ll change the line gradient (MGLLineStyleLayer.lineGradient) to abruptly go from translucent to opaque at the user’s location along the line, with a smooth transition (lineGradientTransition) that matches the puck’s animated interpolation. Line gradients will be implemented in the map SDK for mapbox/mapbox-gl-native#11718.

/cc @mapbox/navigation-ios @danesfeder

[1ec5]

Line gradients will be implemented in the map SDK for mapbox/mapbox-gl-native#11718.

This is happening in mapbox/mapbox-gl-native#12575. 🎉

[1ec5]

we’ll change the line gradient (MGLLineStyleLayer.lineGradient) to abruptly go from translucent to opaque at the user’s location along the line, with a smooth transition (lineGradientTransition) that matches the puck’s animated interpolation.

This is blocked by the fact that data-driven properties don’t support transitions: mapbox/mapbox-gl-js#3170. So even once the map SDK supports line gradients, we’d have to constantly change the lineGradient property’s interpolation stops on each frame, which takes us almost back to square one. The advantage over #1162 is that we’d be updating a paint property on each frame rather than regenerating a shape source. So hopefully there won’t be the same flickering effect, but we’ll have to keep an eye on performance.

[1ec5]

Also blocked by mapbox/mapbox-gl-native#12917, which appears to be much more straightforward to fix than the other blocker, mapbox/mapbox-gl-js#3170.

[1ec5]

No longer blocked by mapbox/mapbox-gl-native#12917. Still blocked by mapbox/mapbox-gl-js#3170.

[asinghal22]

@1ec5 Can you please double check the milestone. I accidently put this on 1.1 milestone. I think it is v0.x next.

[1ec5]

No, it’s correctly slated for v1.1.0.

[captainbarbosa]

@1ec5 is mapbox/mapbox-gl-js#3170 still considered a requirement to complete this feature?

[1ec5]

Yes, a port of mapbox/mapbox-gl-js#3170 to gl-native would be required for considering the feature complete, so that the route line would begin at the puck instead of steadily fading in around the puck. However, it doesn’t block initial work to implement the feature.

That PR doesn’t change anything in the style specification, so my assumption is that hard stops entail adding duplicate stops with the same line distance value. The problem with that on iOS is that mgl_stepWithMinimum:stops: accepts a dictionary of stops, which means there can’t be any duplicate stops. It would be fairly straightforward to patch the mgl_stepWithMinimum:stops: function in the map SDK to accept an array as an alternative to a dictionary, but in the absence of any changes to the map SDK itself, we can use MGL_FUNCTION to pass in a stop array directly.

[1ec5]

#2377 implemented the bulk of the requested feature. We’re tracking some tail work:

• Investigate route gradient stop property declaration in NavigationMapView #2423 to clean up how the stops are stored on the map view.
• A change to the map SDK that would allow fudge factors to be removed.

[1ec5]

Fixed in #2377 and #2580.