add rtl support and example #206

Esri · Oct 19, 2023 · c43a2f7 · c43a2f7
1 parent 2bfc3ec
commit c43a2f7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 3 deletions.
diff --git a/examples/languages.html b/examples/languages.html
@@ -44,7 +44,7 @@
       }).setView([35.7088, 48.8790], 4);
 
 
-      const apiKey = "< YOUR VALID API KEY HERE >";
+      const apiKey = "< YOUR ARCGIS API KEY HERE >";
 
       const basemapStyle = "arcgis/outdoor";
 
@@ -98,6 +98,9 @@
 
       L.control.layers(basemapLayers, null, { collapsed: false }).addTo(map);
 
+      // Support RTL languages such as Arabic and Hebrew
+      L.esri.Vector.setRTLTextPlugin('https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.js');
+
     </script>
 
   </body>

diff --git a/examples/rtl-language.html b/examples/rtl-language.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Esri Leaflet Vector: RTL language support</title>
+    <!-- Load Leaflet from CDN or local node_modules -->
+    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+    <script src="../node_modules/leaflet/dist/leaflet.js"></script>
+
+    <!--
+        Load maplibre-gl from CDN or local node_modules for dev/debug purposes because it is not bundled in Esri Leaflet Vector's dev/debug code
+        (note also that loading maplibre-gl.css is not necessary)
+    -->
+    <script src="../node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
+
+    <!-- Load Esri Leaflet and Esri Leaflet Vector plugin dev/debug version -->
+    <script src="../node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
+    <script src="../dist/esri-leaflet-vector-debug.js"></script>
+
+    <!-- But note that maplibre-gl is bundled in Esri Leaflet Vector's production code -->
+    <!-- <script src="../dist/esri-leaflet-vector.js"></script> -->
+    <style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        color: #323232;
+    }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+    const map = L.map("map", {
+        minZoom: 2
+    }).setView([25.190,55.317], 4);
+
+    const apiKey = "< YOUR ARCGIS API KEY HERE >";
+
+    const basemap = L.esri.Vector.vectorBasemapLayer('arcgis/outdoor',{
+        apikey:apiKey,
+        language:'ar'
+    }).addTo(map);
+
+    L.esri.Vector.setRTLTextPlugin('https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.js');
+    </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "contributors": [
     "Patrick Arlt <[email protected]> (http://patrickarlt.com)",
     "Gavin Rehkemper <[email protected]> (https://gavinr.com)",
-    "Jacob Wasilkowski (https://jwasilgeo.github.io)"
+    "Jacob Wasilkowski (https://jwasilgeo.github.io)",
+    "George Owen (https://geowen.dev/)"
   ],
   "bugs": {
     "url": "https://github.com/Esri/esri-leaflet-vector/issues"

diff --git a/src/EsriLeafletVector.js b/src/EsriLeafletVector.js
@@ -6,4 +6,4 @@ export { version as VERSION };
 export { VectorBasemapLayer, vectorBasemapLayer } from './VectorBasemapLayer';
 export { VectorTileLayer, vectorTileLayer } from './VectorTileLayer';
 export { EsriUtil as Util } from './Util';
-export { MaplibreGLJSLayer, maplibreGLJSLayer } from './MaplibreGLLayer';
+export { MaplibreGLJSLayer, maplibreGLJSLayer, setRTLTextPlugin } from './MaplibreGLLayer';
diff --git a/src/MaplibreGLLayer.js b/src/MaplibreGLLayer.js
@@ -9,6 +9,10 @@ import {
 } from 'leaflet';
 import maplibregl from 'maplibre-gl';
 
+export const setRTLTextPlugin = (url, callback, deferred) => {
+  maplibregl.setRTLTextPlugin(url, callback, deferred);
+};
+
 export var MaplibreGLJSLayer = Layer.extend({
   options: {
     updateInterval: 32,