Display exit number in turn banner

[1ec5]

The turn banner should display the exit number when the instruction is to take a highway off-ramp.

Blocked by mapbox/mapbox-directions-swift#147.

/cc @ericrwolfe @bsudekum @mayagao @willwhite

[1ec5]

mapbox/mapbox-directions-swift#147 has landed, so we’re technically unblocked here, even though it’ll be a little while before we start seeing exit numbers coming through from the Directions API.

[danpat]

Note: the exits field is now available on the Directions API.

[1ec5]

#401 proposes appending the exit number to the destination label, adorning it with a border and arrow (left or right depending on the exit side).

           --------
San Jose  |  47B ↗️ |
           --------

A simpler approach would be to shift the maneuver icon upwards by a few pixels and place the exit number beneath the maneuver icon:

↗️	0.2 mi
388C	San Jose

The advantage is that accommodating a destination–exit number combination is easy, and there’s no redundant arrow to worry about. The disadvantage is that longer exit numbers may be difficult to accommodate, especially combined exits like 123B-A that are common with collector-distributor lanes.

[bsudekum]

@frederoni @mayagao do you have spare cycles to hit this?

/cc @miccolis

[mayagao]

Information we may want to show:

• current street
• street you are going to be on
• exit number
• city

I think we can omit the current street, and just show exit + next street + destination in two lines.

small turn icon in the exit square can be omitted if we can not get that information right now.
feel free to play with this @frederoni https://www.figma.com/file/VTbSXwxs0zubh1mCH1x3ka9C/Exit

[1ec5]

Regarding the mockup above:

• A routine right turn icon would be misleading for exits. Google and Apple use slight right turn icons. (I haven’t checked, but they may turn them into routine or sharp right turn icons depending on how tight the ramp is.)
• “Take exit” and the miniature right exit icon inside the exit capsule would both be redundant if we display a full size right exit icon as the maneuver icon, as the iOS navigation SDK does now, instead of a routine right turn icon.
• We should show not only the destination route number (“US 22 West”) but also the destination name or control city (“Trenton”). The destination name can be fairly long:
  • North — Baltimore-Washington Parkway / Baltimore
  • West — New Orleans International Airport / Baton Rouge
  • Pittsburg / Antioch / Martinez / Hercules

We currently ellide long destinations when necessary, but the design above would put enough horizontal pressure on the label that we may have to display only one destination. That will be problematic for subexits until we address Project-OSRM/osrm-text-instructions#30.

[bsudekum]

We've got exits now.