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.

The ideal implementation would keep the line’s geometry constant as the user moves, to maximize performance. Instead of changing the geometry, we’ll change the LineLayer’s 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.

/ref mapbox/mapbox-navigation-ios#1307
/cc @danesfeder

[1ec5]

No longer blocked by mapbox/mapbox-gl-native#11718, but potentially still blocked by mapbox/mapbox-gl-js#3170 if we need to animate the gradient using a paint property transition and need to refer to a feature property in the lineGradient expression (data-driven styling).

[LukasPaczos]

I created quick examples:

@Override
public void onMapReady(@NonNull MapboxMap mapboxMap) {
  try {
    LineLayer lineLayer = new LineLayer("gradient", "source")
      .withProperties(
        lineWidth(10.0f),
        lineCap(LINE_CAP_ROUND),
        lineJoin(LINE_JOIN_ROUND)
      );
    String geoJson = ResourceUtils.readRawResource(GradientLineActivity.this, R.raw.test_line_gradient_feature);
    mapboxMap.setStyle(new Style.Builder()
      .withSource(new GeoJsonSource("source", geoJson, new GeoJsonOptions().withLineMetrics(true)))
      .withLayer(lineLayer)
    );
    Handler handler = new Handler();
    handler.postDelayed(new Runnable() {
      float i = 1;
      @Override
      public void run() {
        lineLayer.setProperties(
          lineGradient(step(
            lineProgress(), rgba(160, 160, 160, 1), // or rgba(0, 0, 0, 0) for translucent
            stop(0f, rgba(160, 160, 160, 1)), // or rgba(0, 0, 0, 0) for translucent
            stop(i / 100f, rgb(0, 0, 255)))
          )
        );
        i++;
        if (i > 100) i = 1;
        handler.postDelayed(this, 100);
      }
    }, 100);
  } catch (IOException exception) {
    Timber.e(exception);
  }
}

I don't think that animations or data-driven styling should be blockers. However, we should keep in mind that constant layer properties updates led to minor JNI impl issues in the past - mapbox/mapbox-plugins-android#362. We'd need to verify the stability.

[Guardiola31337]

With latest changes adding support for vanishing route line feature, where are we here? Good to close @LukasPaczos @cafesilencio @abhishek1508?

[cafesilencio]

I think we're good to close. There are other tickets tracking the improvements that have been made.