Imageless banner components should include generic shield icon

[1ec5]

If a VisualInstructionComponent lacks an image, it should be drawn as a generic shield so that it doesn’t blend in with the surrounding text. Two or more of these bare numbers can look pretty confusing next to each other. The generic shield could be a white rounded rectangle, as in the Navigation Guidance styles:

We only support shields inside the U.S. at the moment (#334), so this would be a boon for countries like Canada and Sweden that don’t prefix route numbers with alphabetic prefixes.

/cc @bsudekum @mapbox/guidance

[bsudekum]

@1ec5 can you attache the response from the screenshot above? I think there is some confusion on whether there should be shields loaded here or not.

[1ec5]

Here’s what the relevant part of the response looks like (for a different off-ramp instruction in Montréal, but the point stands):

                  "primary": {
                    "type": "off ramp",
                    "modifier": "right",
                    "components": [
                      {
                        "text": "Exit",
                        "type": "exit"
                      },
                      {
                        "text": "25",
                        "type": "exit-number"
                      },
                      {
                        "text": "335",
                        "type": "text"
                      },
                      {
                        "text": "Sud",
                        "type": "text"
                      }
                    ],
                    "text": "Exit 25 335 Sud"
                  }

It isn’t surprising that there’s no shield for “335” at the moment, because it’s just a text component. When I opened this issue, I figured we could apply shield-like formatting to any component whose text consists of only a single alphanumeric word (so no spaces, and at least one digit). But on second thought, I’ve opened an internal issue to request that the Directions API explicitly mark this component as an icon. Autodetecting refs on the client side remains an option, but something of a last resort.

[bsudekum]

@1ec5 is this something we should move to the server?

[1ec5]

No, I think what should happen is that the Directions API reliably assigns these components the image type without setting an image, so that the SDK can compose the text atop a bundled image.

The API’s current approach is to vend a separate image for each route in the world. That approach doesn’t scale. There’s a very large and ever growing set of route numbers for which we lack shield artwork. It would be infeasible to maintain a separate image for each one, whereas it would be straightforward to compose a generic shield on the fly.

This is no different than generating exit number components on the fly. In fact, it’s pretty likely that we’d be able to reuse some of the work in #1272 to draw the generic shield.

[JThramer]

@1ec5 I agree, but I would like to point out that it would be much easier to implement this if we could get something in the API (such as a component type) to tell us "this is a motorway route", even though we don't have a shield for it -- Otherwise how do we distinguish between 335 Sud and 145 Straße?

[1ec5]

Yes, that’s what I mean by:

I think what should happen is that the Directions API reliably assigns these components the image type without setting an image

The issue currently is that the route number is combined into the overall text component that contains either a cardinal direction or some other word.

[JThramer]

Yes, that’s what I mean by:

Ah, my apologies. I didn't see that.

[bsudekum]

This is done, #1417