All docsMapbox GL JSExamplesDisplay and style rich text labels

Display and style rich text labels

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

<!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">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
);
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11', // style URL
center: [9.49, 49.01], // starting position [lng, lat]
zoom: 4 // starting zoom
});
map.on('load', () => {
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']
]
}
]);
});
</script>
</body>
</html>