MapLibreMapLibre GL JS DocsExamplesDisplay 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" />
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-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>
maplibregl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
);
var map = new maplibregl.Map({
container: 'map', // container id
style:
'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', // stylesheet location
center: [9.49, 49.01], // starting position [lng, lat]
zoom: 4 // starting zoom
});
map.on('load', function () {
map.setLayoutProperty('label_country', '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>