Mapbox-gl-js: icon-text-fit should work with text-variable-anchor

[tristen]

Expected Behavior

When using these properties on a layer:

{
  'text-variable-anchor': ['left', 'top', 'right', 'bottom'],
  'text-justify': 'auto',
  'icon-text-fit': 'width'
}

I would expect both the icon that's been fitted under the label and the label to be variably placed.

Actual Behavior

Here's a label using a icon-text-fit background

| Without text-variable-anchor | With text-variable-anchor |
| --- | --- |
| | |

---

mapbox-gl-js version: v1.1.0
browser: Chrome Version 75.0.3770.142 (Official Build) (64-bit)

Link to Demonstration

https://jsfiddle.net/tristen/830prsyz/

[asheemmamoowala]

cc @alexshalamov

[alexshalamov]

@asheemmamoowala yes, it is a bug, we need to offset an icon together with a text. Also, would be nice to document that in a spec as well.

[chloekraw]

@alexshalamov, would be nice to document in the spec now that this property doesn't work with icon-text-fit, or to document that it _does_ after we close this issue?

[alexshalamov]

@chloekraw please disregard my comment, after checking the spec, I think it should be clear how icon-text-fit and variable anchors work together, e.g., icon would be shifted together with the text.

[alexshalamov]

@ansis could you please take a look at gl-native fix in https://github.com/mapbox/mapbox-gl-native/pull/14932/commits/19a49a5abbf53d40846af114ada0a9b1d25f3da0

Also, I had to fix it for combination of text-writing-mode with icon-text-fit.

[chloekraw]

@alexshalamov thanks for the investigation and proposed fix. per chat, I'm tracking that your next steps here are to split those commits out into a separate PR on GL-Native and to open a PR with render tests on GL-JS.

[alexshalamov]

@chloekraw GL-Native PR #15367 render tests https://github.com/mapbox/mapbox-gl-js/pull/8625

[kkaefer]

Fixed in v1.4.0-beta.1