Examples
Layers (29)
Extrude polygons for 3D indoor mappingDisplay buildings in 3DAdd a 3D modelAdjust a layer's opacityAnimate a series of imagesAnimate a lineAnimate 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 new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate 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 levelVisualize population density

Display and style rich text labels

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

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<html>
<head>
<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/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v10', // stylesheet location
center: [9.49, 49.01], // starting position [lng, lat]
zoom: 4 // starting zoom
});
map.on('load', function() {
var layers = ['country-label-lg', 'country-label-md', 'country-label-sm'];
layers.forEach(function(layer) {
map.setLayoutProperty(layer, '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' ]]
}
]);
});
});
</script>
</body>
</html>