Layers (31)
Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAdjust a layer's opacityAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesCreate and style clustersChange a layer's color with buttonsAdd a custom style layerStyle circles with a data-driven propertyStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densityAdd hillshading

Display and style rich text labels

Uses the format expression to display country labels in both English and in the local language.

<!DOCTYPE html>
<meta charset='utf-8' />
<title>Display and style rich text labels</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<div id='map'></div>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [9.49, 49.01], // starting position [lng, lat]
zoom: 4 // starting zoom
map.on('load', function() {
map.setLayoutProperty('country-label', 'text-field', ['format',
['get', 'name_en'], { 'font-scale': 1.2 },
'\n', {},
['get', 'name'], {
'font-scale': 0.8,
'text-font': ['literal', [ 'DIN Offc Pro Italic', 'Arial Unicode MS Regular' ]]
Was this example helpful?