Hope to add support for rendering text with a background.

[chenhaijia]

Requirement: I want to render massive amounts of text with background colors, similar to the effect shown in the image above.
Current approach: I'm following the method described at https://maplibre.org/maplibre-gl-js/docs/examples/add-a-stretchable-image-to-the-map/ to render it.

Problem: The text overlaps. It seems there isn’t a better way to achieve this effect with the approach I have in mind.
The result I’m aiming for is shown in the link below.
https://lbs.amap.com/demo/javascript-api-v2/example/mass-markers/labelmarker-text
OpenLayers already offers a similar capability: when rendering a point, it can simultaneously draw text with either a solid color or an image background. It would be extremely helpful if MapLibre could add equivalent support; this is a fairly common request in the community, and we would greatly appreciate your consideration. Thank you!

[HarelM]

I believe this is describe and attempted to solve here:

• Sort icon and text draw order #985
• sort icons and text together so icons can overlap text #145

There was a performance issue with the solution there.
Feel free to try and tackle this.

[chenhaijia]

map.addLayer({
	id: layerIds[0],
	type: "symbol",
	source: sourceId,
	layout: {
		"symbol-sort-key": ["to-number", ["get", "index"]],
		"icon-image": "symbolBackImage",
		"text-field": "A",
		"text-font": ["PuHuiTiRegular"],
		"text-allow-overlap": true,
		"text-ignore-placement": true,
		"icon-allow-overlap": true,
		"icon-ignore-placement": true,
		"text-offset": [0, -2] 
	},
	paint: {
		"text-color": [
			"case",
			["get", "isAbnormal"],
			"#FF0000", 
			"#00C853"
		]
	}
});

Could you please let me know whether the workaround shown in the example is still expected to work in the latest release? I’ve copied it line-by-line, yet the text is still being overlapped.

[HarelM]

This was never solved, so it should still exist in the latest version...