Add icon-text-fit, icon-text-fit-padding

[yhahn]

Adds two new properties:

• icon-text-fit: none | width | height | both
• icon-text-fit-padding: [ x, y ].

The intention is for these properties to start to address use cases where the icon image and text need to coordinate closely in size + position.

Here's a diagram of how the current sketch implementation in GL JS works:

Grayed out portion is some ideas about extending this property in a future where symbols support multiple icon instances.

Caveats

Stretching a single icon to text dimensions will often wreck the aspect ratio of visual features like rounded corners (e.g. Main St above).

I think to accomplish this reasonably we'll need multiple icon support (e.g. a symbol with 1 text element and like 3 icons). Let's not worry about this for now given that there's a lot of open spec and implementation questions around multi-icon support. For now I feel confident we can keep an eye toward this potential future while speccing sizing/positioning for a single icon around text.

---

Next actions

• review/feedback @mapbox/cartography-cats @mapbox/gl
• gl js/native implementations @yhahn
• some more IRL style testing (e.g. shield, labelling examples) to proof the functionality

[1ec5]

Should it be possible to specify different padding for the top versus the bottom and for the left versus the right? If this is to be useful for route shields, many shields would need to be laid out asymmetrically.

[yhahn]

@nickidlugash @1ec5 @lucaswoj I can adjust the padding to be an array of 4 numbers -- do you have a preference on the order (css style: top, right, bottom, left)? This will be the first style spec, 4-component array I believe for something like padding.

[lucaswoj]

css style: top, right, bottom, left

Consistency with CSS sounds best

[lucaswoj]

I'm happy with this spec! 😄

[nickidlugash]

Looks good! 👍

[yhahn]

GL native implementation stabilizing 😄 going to merge here.

[tmpsantos]

One way of fixing the aspect ratio would be having something like Qt BorderImage:
http://doc.qt.io/qt-5/qml-qtquick-borderimage.html

[1ec5]

BorderImage is similar to the nine-part stretchable/resizable images supported on Apple platforms. I think something like this would be necessary to be able to represent, say, capsule-style shields faithfully using just one sprite. See how the caps on “Lake View Rd” and “Main St” differ above, versus how the elongated-circle Kentucky route shields below have the same-sized caps:

I think we should discuss this idea further, but in the mapbox-gl-style-spec repository. Can you open a ticket there?

[1ec5]

I think we should discuss this idea further, but in the mapbox-gl-style-spec repository. Can you open a ticket there?

Didn’t realize this was the mapbox-gl-style-spec repository. 😄 Let’s continue the conversation in #581.