Add upcoming maneuver arrow on the route line

[Guardiola31337]

• Fixes User should see an upcoming maneuver arrow on the route line #604

TODO

• Unit tests
• Make the arrow’s color styleable instead of always red/white
• 👀 behavior when off route
• Add Expressions so that the arrow looks better under different zoom levels

[Cjballard-zz]

@Guardiola31337 Looking good – 2 quick design thoughts. I think the maneuver arrow might stand out more if it sat on top of the street name – right now both are kind of muddled when they're superimposed on each other. Unless consensus has been to leave the arrow underneath the street names? And I think having a slightly slimmer grey or black stroke on the arrow instead of the red might help make the arrow stand out a little more. What are your thoughts?

[Guardiola31337]

@cjballard thanks for the feedback!

Unless consensus has been to leave the arrow underneath the street names?

How do you implement this @mapbox/navigation-ios?

I think the maneuver arrow might stand out more if it sat on top of the street name

In any case, even if we're adding the arrow underneath in the iOS side, if you think that from a design point of view the opposite makes more sense, we should change it in both platforms.

I think having a slightly slimmer grey or black stroke on the arrow instead of the red might help make the arrow stand out a little more.

The red was only for testing 😅
Also as indicated in OP, as part of this PR we're going to add 👇

Make the arrow’s color styleable instead of always red/white

BTW, great idea! We can definitely use those colors by default. Could you share the hex colors you were thinking so we can test them out and 👀 how arrows look?

[Cjballard-zz]

@Guardiola31337 Thanks for calling out – I like the idea of making it style-able. I think we should stack the arrow on top of the road name for driver clarity. (I think this is behavior on iOS side as well). Can we make the stroke our standard dark blue/gray (#273d56) but slightly slimmer and see what that looks like?

[1ec5]

Unless consensus has been to leave the arrow underneath the street names?

On iOS, the arrow goes on the very top of the map, above labels, shields, exit numbers, and POI icons alike. mapbox/mapbox-navigation-ios#397 (comment) shows what can easily happen to the arrow if we allow anything to appear atop it.

[Guardiola31337]

How about now @cjballard?

BTW our dark blue/gray color is #2D3F53 👀

mapbox-navigation-android/libandroid-navigation-ui/src/main/res/values/colors.xml

Line 31 in 9d3b93a

<color name="mapbox_navigation_view_color_primary_dark">#2D3F53</color>

cc @1ec5

[1ec5]

Ideally, the arrowhead’s size would vary based on the zoom level so it looks more prominent at the highest zoom levels.

[Guardiola31337]

Ideally, the arrowhead’s size would vary based on the zoom level so it looks more prominent at the highest zoom levels.

Yeah we should add Expressions around the arrow. Thanks for the heads up!

Editing OP to include that TODO.

[Guardiola31337]

Ideally, the arrowhead’s size would vary based on the zoom level so it looks more prominent at the highest zoom levels.

BTW, what expression are you using on iOS @1ec5? Saw that mapbox/mapbox-navigation-ios#1076 landed 🎉 some time ago.

[1ec5]

Ideally, the arrowhead’s size would vary based on the zoom level so it looks more prominent at the highest zoom levels.

BTW, what expression are you using on iOS @1ec5? Saw that mapbox/mapbox-navigation-ios#1076 landed 🎉 some time ago.

https://github.com/mapbox/mapbox-navigation-ios/blob/6cd26dc9d428449df838cd7067d2e2d8298277f1/MapboxNavigation/NavigationMapView.swift#L630
https://github.com/mapbox/mapbox-navigation-ios/blob/c7d936db261e8a6fc49c0c095060fb19b371ba34/MapboxNavigation/Constants.swift#L11-L17

This is equivalent to the following style JSON:

{
  "icon-size": [
    "interpolate",
    ["linear"],
    ["zoom"],
    10, ["*", 8, 0.12],
    13, ["*", 9, 0.12],
    16, ["*", 11, 0.12],
    19, ["*", 22, 0.12],
    22, ["*", 28, 0.12]
  ]
}

[Guardiola31337]

I've added a expression so that the arrow size scales under different zoom levels. It'd be great to find the correct scaling factor though. This is how it looks right now 👀

@cjballard are you able to help here? I can guide you on how to set up the project and the dev environment (AS and such) so you could tweak the different factor values until we get something ✨ How does that sound?

[Cjballard-zz]

@Guardiola31337 Sure thing. Working with @danesfeder to get the environment set up & will start tweaking those.

[Cjballard-zz]

@Guardiola31337 Was doing some tinkering and I liked these sizes for each different stop...

stop(10, product(SHAFT_LINE_WIDTH_FACTOR, 2)),
stop(13, product(SHAFT_LINE_WIDTH_FACTOR, 4)),
stop(16, product(SHAFT_LINE_WIDTH_FACTOR, 6)),
stop(19, product(SHAFT_LINE_WIDTH_FACTOR, 8)),
stop(22, product(SHAFT_LINE_WIDTH_FACTOR, 10))

For each scaling factor for shaft width/casing and arrow size/casing.

Although I have a few design questions. One, it appears the casing for the arrow is more fuzzy and harder to achieve the same casing for the shaft layer. Is it because it’s image-based? Would like to have the same narrower casing as the shaft if possible. Here’s a screenshot:

Also, I think it might be worth hiding the arrow when we reach a certain zoom level. Not sure which level this is specifically, but once the arrow becomes unhelpful and obstructive:

So those would be my changes: match the casing for the shaft layer, hide it at a high zoom level and keep that size. I think it's looking great.

[Guardiola31337]

@cjballard

So those would be my changes: match the casing for the shaft layer, hide it at a high zoom level and keep that size.

Great feedback! Thanks a lot.

I've fixed the blurriness, added the hiding functionality under a certain zoom level (14) and tweaked some of the values to keep the sizes you suggested. This is what I came up with 👀

Would you be able to play around with the latest changes and let me know if we need to do any final adjustments?

[Cjballard-zz]

@Guardiola31337 Yessir! I'll jump on that now.

[Cjballard-zz]

@Guardiola31337 Looks good to me 👍 – that zoom level feels right to hide the arrow too.

[Guardiola31337]

@cjballard

Looks good to me 👍 – that zoom level feels right to hide the arrow too.

Awesome! Thanks a lot for such a great feedback!

This is now ready for review 👀 @danesfeder @devotaaabel

[danesfeder]

@Guardiola31337 thanks for all the work on this

Noting [ ] Unit tests - with the PR that resolves #704, we should have a complete overhaul of this class that makes it easier to test.

[Guardiola31337]

Noting [ ] Unit tests - with the PR that resolves #704, we should have a complete overhaul of this class that makes it easier to test.

Yeah I agree!