12

how to add a background color for layer text-field in mapbox-gl.. or how it can be done so that there's background box on the text-field

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});
Zulhalimi Anuar Muhammad
  • 223
  • 1
  • 3
  • 8

1 Answers1

11

While I also don't know how to draw a background box, we may be looking for the same thing which is to obscure any other text beneath the custom label so that it pops and is more legible. If so, I did discover that you can add a "halo" which will achieve the desired effect. 

"layout": {
                "icon-image": symbol + "-15",
                "icon-allow-overlap": true,
                "text-field": symbol,
                "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
                "text-size": 11,
                "text-transform": "uppercase",
                "text-letter-spacing": 0.05,
                "text-offset": [0, 1.5]
            },
            "paint": {
                "text-color": "#202",
                "text-halo-color": "#fff",
                "text-halo-width": 2
            },

This was taken from this example on their site.

headwinds
  • 1,781
  • 15
  • 26
  • This is EXACTLY what I was looking for. I think many people would like to put up a text and make it stand out a little bit without putting in too much code. I tried it with text-halo-width: 5, and it gives a nice little white box around the text. Thanks man! – sonic98 Nov 24 '20 at 03:19
  • Is there a way of adding a padding around the text which would make the halo even bigger? The `halo-width` after the value 4 does not seem to change at all. I need bigger padding around the text – Adem Dinarević May 30 '23 at 21:13