Mapbox-gl - How can I allow text/icon overlap without causing text mixtures?

Question

click here to see the issue with the text overlap

The texts are on top of each other (click on image link above).

"mapbox-gl": "^2.4.1",

Layer :

{
      type: 'symbol',
      layout: {
        'text-field': '{nextShow}',
        'icon-image':'assets/map/queue-bubble.png',
        'icon-allow-overlap': true,
        'icon-ignore-placement': true,
        'text-allow-overlap': true,
      },
      paint: {
        'icon-translate': [-25, -25],
        'text-translate': [-28, -28],
        'text-color': 'black',
        'text-halo-color': 'white',
        'text-halo-blur': 1,
        'text-halo-width': 5,
      }
    }

thank you.

Answer 1

In order for me to keep text and icons from overlapping and prioritize icon display I had to separate the two into two layers

symbolTextLayer JSON Configuration

{
    "id": "symbol_text_layer",
    "type": "symbol",
    "source": "yourSourceId", // Replace with your actual source ID
    "layout": {
        "text-field": [
            "step",
            ["zoom"],
            "",
            15,
            ["to-string", ["get", "name"]]
        ],
        "text-halo-width": 1,
        "text-size": 10,
        "text-justify": "right",
        "text-anchor": "right",
        "text-optional": true,
        "symbol-sort-key": 1,
        "symbol-z-order": "viewport-y"
    },
    "paint": {
        "text-halo-color": "#FFFFFF", // Replace with your desired halo color
        "text-offset": [
            "interpolate", ["linear"], ["zoom"],
            0, ["literal", [0, 0]],
            15, ["literal", [-1.3, -0.2]],
            22, ["literal", [-1.5, -0.2]]
        ]
    }
}

symbolLayer JSON Configuration

{
    "id": "symbol_layer",
    "type": "symbol",
    "source": "yourSourceId", // Replace with your actual source ID
    "layout": {
        "icon-image": "yourIconImageName", // Replace with your actual icon image
        "icon-halo-width": 10,
        "icon-size": [
            "interpolate", ["linear"], ["zoom"],
            0, 0.5,    // Size at zoom level 0
            15, 1.0,   // Size at zoom level 15
            22, 1.5    // Size at zoom level 22
        ],
        "icon-allow-overlap": true,
        "text-allow-overlap": false,
        "text-ignore-placement": false,
        "text-optional": true,
        "symbol-sort-key": 1,
        "symbol-z-order": "viewport-y"
    }
}

Explanation

• text-field: Dynamically displays text above a specific zoom level.
• text-offset: Scales based on zoom, using interpolate to keep text consistently spaced from the icon as it grows.
• icon-size: Uses interpolate to scale icon size based on zoom level.
• icon-allow-overlap: Ensures icons are always visible, while text-allow-overlap and text-ignore-placement control text overlap behavior.

This setup keeps text labels appropriately offset from icons, adapting as icons scale with zoom.

Answer 2

The way you could achieve this is by allowing icon overlap only. That way the icons will always be visible, but the labels will be visible only when they do not collide with the labels of the other markers. To achieve this just add the following properties to your layout object:

    'layout': {
        'icon-allow-overlap': true,  // The icon will be visible even if it collides with other previously drawn symbols.
        'icon-ignore-placement': true,  // Other symbols can be visible even if they collide with the icon.
        'text-optional': true  // Label will be hidden if it collides with other labels
    }

Answer 3

You can set order symbol-z-order to "source" and then use your list index to reorder your marker with symbol-sort-key

In your example:

{
      type: 'symbol',
      layout: {
        'text-field': '{nextShow}',
        'icon-image':'assets/map/queue-bubble.png',
        'icon-allow-overlap': true,
        'icon-ignore-placement': true,
        'text-allow-overlap': true,
        'symbol-z-order': 'source', // to order by symbol-sort-key
        'symbol-sort-key': ['get', 'index'], //index should be defined in source feature properties
      },
      paint: {
        'icon-translate': [-25, -25],
        'text-translate': [-28, -28],
        'text-color': 'black',
        'text-halo-color': 'white',
        'text-halo-blur': 1,
        'text-halo-width': 5,
      }
    }