Line casing opacity

[Christophe668]

Hi,

We are currently working on a new design in our company and achieve a design similar to this. The reasons are that :

• it will make street names visible
• Make bike lanes visible and not covered by the line

in Mapbox Navigation 2.0 we can indeed provide a color for the casing but since it's a wider line below the other one having a full opaque casing isn't possible like in the screenshot below.

Will there be a possibility to achieve something like this in the future?

Also, while playing with the opacity in navigation, I get those artifacts :

Would it make sense to have the ability to set the lineCap and lineJoin to avoid this effect?

Thank you very much in advance

[Guardiola31337]

@cafesilencio could you take a look at this when you have a chance? 🙏

[cafesilencio]

Will there be a possibility to achieve something like this in the future?

It's unlikely this will change anytime soon since the two lines are layered on top of each other. Having the casing line wider than the route line gives the appearance of a border but it's actually a line. You could make the casing line transparent with a value of #00000000 but that wouldn't match exactly the screen shot you provided.

Another option might be to experiment with the layer elevation of the route line. There is an option called routeLineBelowLayerId in MapboxRouteLineOptions. You might need to create a custom map style for this but you could try putting the route line layers below the layer with bike lanes. I'm not sure if the road labels are on the same layer as the bike lane labels. If they are on separate layers that might help get a result that works for you since you mentioned, "make bike lanes visible and not covered by the line."

You can see the layer stack with something like (pseudo code):

mapboxMap.getStyle().styleLayers.forEach {
     Log.i("tag", "Layer ID is $it.id")
}

Or look at the map style in Mapbox Studio.

Would it make sense to have the ability to set the lineCap and lineJoin to avoid this effect?

The RouteLineResources class has an option for roundedLineCap. If this value is true (default) the line cap will be set to LineCap.ROUND and line join to LineJoin.ROUND when creating the route line related layers. If the option for roundedLineCap is false the line cap and line join values will be LineCap.BUTT and LineJoin.BUTT. I don't know if this will resolve the artifacts you're observing.

[Christophe668]

Thank you @cafesilencio for the very clear answer! Much appreciated!

[Christophe668]

Hi again,

Since our last conversation, I tried the roundedLineCap but it doesn't solve the artifacts issues

Is there a way to prevent this? Thanks a lot!

Would it be possible to have to option to provide these to the API?

            .lineCap(LineCap.ROUND)
            .lineJoin(LineJoin.ROUND)

[cafesilencio]

For your use case is it necessary to show the casing line? Could you make it completely transparent?

As for the artifacts that's coming from the map rendering. I'll have to refer to somebody on the maps team to comment.

[Guardiola31337]

cc'ing @mapbox/maps-android for visibility

[Christophe668]

For your use case is it necessary to show the casing line? Could you make it completely transparent?

Both are actually transparent to have this rendering. We want to have the route line + casing to be transparent, you know, what the designer wants, we do 😁

[tobrun]

Thank you for posting @Christophe668, will flag the render artifacts to our render team.

[Christophe668]

Another question for you @Guardiola31337 would an option to provide a line gradient on RouteLineColorResources be possible? We would like to display our own gradient for a feature, would that make sense? Thanks!

[cafesilencio]

Both are actually transparent to have this rendering.

Looking at the screen shot they appear semi-transparent. What I was asking about is if you made the casing completely transparent #00000000 would that meet your designer's requirements? I know it may not be the optimal solution but I thought perhaps it might be an acceptable solution for the time being.

[cafesilencio]

Another question for you @Guardiola31337 would an option to provide a line gradient on RouteLineColorResources be possible? We would like to display our own gradient for a feature, would that make sense? Thanks!

The gradient is a calculation so RouteLineColorResources isn't the right place but the ability to replace the default gradient is partially supported. There was some recent refactoring that doesn't fully support this feature. I created an issue ticket here: https://github.com/mapbox/mapbox-navigation-android/issues/5059.

[Christophe668]

@cafesilencio thanks for answering, indeed they are both semi-transparent. From a design point of view, we would like to keep the casing and route semi-transparent to be able to see elements below the route line. Moving the line below those elements were not giving a great result either. From our tests, the transparency is the best option we have.

Without a casing we had something like this

[cafesilencio]

Another question for you @Guardiola31337 would an option to provide a line gradient on RouteLineColorResources be possible? We would like to display our own gradient for a feature, would that make sense? Thanks!

The gradient is a calculation so RouteLineColorResources isn't the right place but the ability to replace the default gradient is partially supported. There was some recent refactoring that doesn't fully support this feature. I created an issue ticket here: #5059.

As an update to this you can provide your own gradient in the following way:

MapboxRouteLineApi::updateWithRouteProgress returns a RouteLineUpdateValue which includes a primaryRouteLineDynamicData parameter of type RouteLineDynamicData. The RouteLineDynamicData class has several expression provider objects that provide an Expression object that is applied to the lines as the gradient.

By calling RouteLineDynamicData::toMutableValue() you can replace the RouteLineExpressionProvider with your own implementation. Then call toImmutableValue() to get an object that can be passed to the MapboxRouteLineView for rendering.

You can read more about Expression objects for the gradient here. You can see an example of how the navigation SDK creates a gradient expression here.

The code to provide your own gradient expression would look something like: (simplified for brevity)

val myExpressonProvider = object : RouteLineExpressionProvider {
   // implementation here
}

mapboxRouteLineApi.updateWithRouteProgress(routeProgress) { result ->
     val mutableValue = result.value.toMutableValue()
     val mutablePrimaryData = mutableValue.primaryRouteLineDynamicData.toMutableValue()
     mutablePrimaryData.trafficExpressionProvider = myExpressionProvider
     mutableValue.primaryRouteLineDynamicData = mutablePrimaryData.toImmutableValue()
     val newValue = mutableValue.toImmutableValue()
     val newExpected = ExpectedFactory.createValue<RouteLIneError, RouteLineUpdateValue>(newValue)

mapboxRouteLineView.renderRouteLineUdpate(style, newExpected)

}

This is available in version 2.1.0-beta.2. It's a little verbose but it gets the job done. MapboxRouteLineApi::updateWithRouteProgress isn't the only method that facilitates this, it's just one example.

[Christophe668]

Thank you, very much appreciated!

[Guardiola31337]

@Christophe668 @cafesilencio are we good to close here?

[Christophe668]

Concerning the gradient yes it answered my question. However, I don't know what is the status of these artifacts :

[cafesilencio]

@Guardiola31337 @tobrun mentioned above that he forwarded this issue to the maps rendering team. I don't see a reference to an issue in their repository.

[Christophe668]

Any update on this by any chance?

[cafesilencio]

@tobrun Is there a ticket in the maps or other repo. tracking this? Your previous comment regarding rendering suggested this was being looked at on the maps side.

[Guardiola31337]

@mapbox/maps-android could you follow up here when you have a chance? 🙏

Also feel free to transfer the issue to your repo if you confirm that belongs to you.