Label Always Appears Above Symbol Shield in MapLibre GL

[mfflik]

When adding a symbol layer to display icons and labels using MapLibre GL, the labels always appear above the icons within the same layer.

The expected behavior is to have icons and their corresponding labels displayed alternately in this order:
icon1, label1, icon2, label2. I want the icons and labels to overlap each other, like this.

Here is the code:
https://codesandbox.io/p/sandbox/grwjlg

Could somebody help me figure out how to achieve the desired behavior where icons and labels appear in this alternating order?

[HarelM]

You can take a look at the following PR:

• sort icons and text together so icons can overlap text #145

The problem with solving this is the performance penalty IIRC.

[mfflik]

Okay, thank you for the answer. I want to try the solution while considering performance issues. If I encounter any problems, I’ll ask again.

[xabbu42]

The latest discussion is in #985. Main problem is that the approach only works with a sort-order-key which itself comes with a heavy performance penalty as implemented.

[zerda-ocm]

I encountered a similar problem, and here’s how I resolved it: I removed the icon and relied entirely on the text field.

The key to creating the shield effect is to use a glyph instead of an icon and set the letter width to zero. This allows multiple glyphs to be layered in the same position. For the example above, you would need something like this:

• A white background with zero width.
• A black border with zero width.
• Normal text.

Typically, you’ll need to use a format expression to achieve a white background and black text. However, creating more elaborate shield designs with multiple layered colors can be quite challenging. To simplify this process, I modified the source code to accept color codes directly in the "text-field."

For example: \ue001\uf001\ue002\uf002Text
Here, the codes translate to:

• \ue001: white
• \uf001: background
• \ue002: black
• \uf002: border
• Text

This approach allows for more flexibility and customization, however requires modification of the source data and a custom build of maplibre. (I can get into more detail if anybody is interested, but for simple shields, format expressions will work)

[xabbu42]

does this approach also need a symbol-sort-key to work? (which would trigger the same performance penalties as my fix)

[zerda-ocm]

No "symbol-sort-key" needed. "text-field" is simply split up in more segments (one additional segment per color change). Think of it as a normal format expression. The color codes are just for convenience.

[mfflik]

Okay, thank you for answering my problem. I’m interested in your solution—could you share how to implement that?

[zerda-ocm]

Okay, thank you for answering my problem. I’m interested in your solution—could you share how to implement that?

Here is a prove of concept with an out of the box maplibre version:
https://codesandbox.io/p/sandbox/maplibre-feature-order-forked-y69z2m

And the font used for the shield background and border (created with FontForge):
https://www.zerda.de/fonts/symbols.sfd
https://www.zerda.de/fonts/symbols.ttf