All docsMapbox GL JSExamplesAdd support for right-to-left scripts

Add support for right-to-left scripts

Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.

By setting the lazy parameter to true, the plugin is only loaded when the map first encounters Hebrew or Arabic text.

Mapbox Studio loads this plugin by default.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add support for right-to-left scripts</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/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 access token here>';
mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
true // Lazy load the plugin
);
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [44.3763, 33.2788],
zoom: 11
});
</script>
</body>
</html>