Support Right To Left Text

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.

Demo

Plain HTML

You can find the live Demo on CodeSandbox here.

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<title>Add support for right-to-left scripts</title>
6
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7
<script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>
8
<link href="https://maps-gl.nextbillion.io/maps/v2/api/css" rel="stylesheet"/>
9
<style>
10
	body { margin: 0; padding: 0; }
11
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
12
</style>
13
</head>
14
<body>
15
<div id="map"></div>
16
 
17
<script>
18
  nextbillion.maps.setRTLTextPlugin(
19
    'https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js',
20
    null,
21
    true // Lazy load the plugin
22
  );
23
  // You need to replace the apiKey with yours
24
  nextbillion.setApiKey("your-api-key");
25
  var nbmap = new nextbillion.maps.Map({
26
    container: document.getElementById("map"),
27
    style: "https://api.nextbillion.io/maps/default/style.json",
28
    zoom: 11,
29
    center: [44.3763, 33.2788],
30
  });
31
</script>
32
 
33
</body>
34
</html>