CODEWITHSUNDEEP
mapbox-gl-js
Jenthe
Jenthe

Reputation: 797

Avoid text clipping of symbols in Mapbox GL JS

I have defined some symbols with text properties to act as a label for some other symbols. With the text-halo property I tried to make a background for the text. However, when zoomed out, the text starts clipping and becomes quite unreadable. Example below:

enter image description here

The layout of these four symbols is defined as follows:

'text-font': ['Open Sans Regular'],
'text-field': '{metadata}',
'symbol-placement': 'point',
'text-size': 20,
'text-allow-overlap': true,
'text-offset': [0, -2],
'text-anchor': 'top'

And the paint property of the symbols:

'text-halo-color': '#fff',
'text-halo-width': 5

I want the label on top covering the others completely, like the behaviour of a z-index in CSS. Any ideas? I already tried a dozen combinations of all the possible property values but can't seem to find anything.

Upvotes: 1

Views: 785

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126385

As you have noticed, all halos are drawn first, then text. So a halo will never cover the text of another layer. This behaviour is intentional, and has been discussed here.

The obvious workaround would be to not use text-allow-overlap, and find some other solution to whatever problem you were trying to solve using that.

Upvotes: 2

Related Questions