Duplicated or displaced text on some zoom levels

[tengl]

maplibre-gl-js version: 2.4.0

browser: Chrome, Firefox

Steps to Trigger Behavior

1. Create a GeoJSON with a box and a propetry with text.
2. Add that GeoJSON to the map and a separate layer to display the text
3. Adjust the text size so that it fits the box
4. See that the text is displaced
5. Setting "text-overlap" to "always" causes the text to be displayed multiple times.

Link to Demonstration

See behavior between zoom levels 16 and 17.
https://codesandbox.io/s/maplibre-displaced-text-ps1y2z?file=/src/index.ts

Expected Behavior

Expected the text to stay in place, like this.

Actual Behavior

The text gets duplicated or displaced, like this.

"text-overlap": "always"

"text-overlap": "never"

[HarelM]

This is generally by design when you add a text to a line rather than a point.
There are many ways to style it. and choosing always will cause the text to overlap as the property name suggests.
I'm not sure I understand what the issue is.
If this is a usage question, please convert this to a discussion.

[tengl]

Thanks for the quick reply.

Ok, so the solution would be to add a separate GeoJSON with a point at the center of the box and a text layer for that point?

The issue is that it behaves differently on different zoom levels, without any other symbols that would collide with or affect the text.

But I can see that it can be complicated to fix it and for us it should be good enough to add points for all text labels we want.