Icon placement along a line doesn't account for icon-size properly

[weix-uber]

mapbox-gl-js version:

Question

I am using the 'symbol' layer + 'symbol-placement' = 'line' to display arrows on a line. The example can be found in https://jsfiddle.net/waynexiao/mfzv8dsL/11/

The arrows show at zoom level 12, but not zoom level 11 and less. The zoom level can be set at the line 24.

I am wondering how mapbox decides to show or hide the arrow icon. At zoom 11, the length of the line is more 130px and the size of the arrow is about 12 x 12px. There seems to be enough space to show arrows.

Is it possible to make the arrow to show at zoom level <= 11?

Links to related documentation

https://jsfiddle.net/waynexiao/mfzv8dsL/11/

[mourner]

This looks like it's an issue with how the line anchors code takes icon size into account — it thinks the icons won't fit into the line even though icon-size is 0.045. For the same reason, even on higher zooms, the gaps are pretty big even with symbol-spacing equal to 1 (pixel). Labeling this as a bug. @ChrisLoer any quick clues on this one?

[ChrisLoer]

Yeah, looks like the problem is that when we calculate the label length for anchor-spacing purposes, we take the max of the "icon" and "text" length, and then multiply them by the same "box scale" factor:

https://github.com/mapbox/mapbox-gl-js/blob/b43478c5d5e36376a9644ef195a7cd659332dd96/src/symbol/get_anchors.js#L29-L43

... but that scaling factor is actually just the scaling factor for the text, so the icon-size is effectively ignored:

https://github.com/mapbox/mapbox-gl-js/blob/b43478c5d5e36376a9644ef195a7cd659332dd96/src/symbol/symbol_layout.js#L216-L226

I think the fix is just to pass the icon box scale into getAnchors and use it to calculate the width of the icon.

cc @ansis

[weix-uber]

Yeah, looks like the problem is that when we calculate the label length for anchor-spacing purposes, we take the max of the "icon" and "text" length, and then multiply them by the same "box scale" factor:

cc @ansis

Is the valid workaround to reduce the actual size of the icon and set 'icon-size' to 1?

Thanks!

[ChrisLoer]

Is the valid workaround to reduce the actual size of the icon and set 'icon-size' to 1?

Yup, that's a good workaround!