Display and style rich text labels

Uses 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' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.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>
Copy example