Examples

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.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/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>