Menu
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"
}
});
929
Mapbox will open a design window where you can adjust your chosen style. On the left side you will find map elements, where you can change colors and other properties. If you don't want to adjust anything just click on 'Go back' arrow at the top left.
In the Select data tab Open the style in the Mapbox Studio style editor. Click on the name of the layer in the layer list. Switch to the Select data tab. Find the source layer listed below the name of the tileset source.
The type of layer is specified by the "type" property, and must be one of background , fill , line , symbol , raster , circle , fill-extrusion , heatmap , hillshade , sky . Except for layers of the background or sky types, each layer must refer to a source.
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.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
