feat: add localization for opensearch base map (#312)

* feat: add localization for base map Signed-off-by: raintygao <tygao@amazon.com> * chore: update getlanguage order Signed-off-by: raintygao <tygao@amazon.com> * chore: move constants to index Signed-off-by: raintygao <tygao@amazon.com> * chore: update function name Signed-off-by: raintygao <tygao@amazon.com> --------- Signed-off-by: raintygao <tygao@amazon.com>
opensearch-project · Mar 17, 2023 · 8744efb · 8744efb
1 parent 4f108ec
commit 8744efb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/common/index.ts b/common/index.ts
@@ -146,6 +146,10 @@ export const LAYER_ICON_TYPE_MAP: { [key: string]: string } = {
   [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: 'globe',
 };
 
+//refer https://github.com/opensearch-project/i18n-plugin/blob/main/DEVELOPER_GUIDE.md#new-locale for OSD supported languages
+export const OSD_LANGUAGES = ['en', 'es', 'fr', 'de', 'ja', 'ko', 'zh']; // all these codes are also supported in vector tiles map
+export const FALLBACK_LANGUAGE = 'en';
+
 export enum TOOLTIP_STATE {
   DISPLAY_FEATURES = 'DISPLAY_FEATURES',
   FILTER_DRAW_SHAPE = 'FILTER_DRAW_SHAPE',

diff --git a/common/util.ts b/common/util.ts
@@ -2,7 +2,16 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+import { i18n } from '@osd/i18n';
+import { OSD_LANGUAGES, FALLBACK_LANGUAGE } from './index';
 
 export const fromMBtoBytes = (sizeInMB: number) => {
   return sizeInMB * 1024 * 1024;
 };
+
+export const getMapLanguage = () => {
+  const OSDLanguage = i18n.getLocale().toLowerCase(),
+    parts = OSDLanguage.split('-');
+  const languageCode = parts.length > 1 ? parts[0] : OSDLanguage;
+  return OSD_LANGUAGES.includes(languageCode) ? languageCode : FALLBACK_LANGUAGE;
+};
diff --git a/public/model/OSMLayerFunctions.ts b/public/model/OSMLayerFunctions.ts
@@ -1,7 +1,8 @@
-import { Map as Maplibre, LayerSpecification } from 'maplibre-gl';
+import { Map as Maplibre, LayerSpecification, SymbolLayerSpecification } from 'maplibre-gl';
 import { OSMLayerSpecification } from './mapLayerType';
 import { getMaplibreBeforeLayerId } from './layersFunctions';
 import { getLayers, hasLayer } from './map/layer_operations';
+import { getMapLanguage } from '../../common/util';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -41,6 +42,17 @@ const updateLayerConfig = (layerConfig: OSMLayerSpecification, maplibreRef: Mapl
   handleStyleLayers(layerConfig, maplibreRef);
 };
 
+const setLanguage = (maplibreRef: MaplibreRef, styleLayer: LayerSpecification) => {
+  // if a layer contains label, we will set its language.
+  if (styleLayer.layout && (styleLayer as SymbolLayerSpecification).layout?.['text-field']) {
+    const language = getMapLanguage();
+    maplibreRef.current?.setLayoutProperty(styleLayer.id, 'text-field', [
+      'get',
+      'name:' + language,
+    ]);
+  }
+};
+
 const addNewLayer = (
   layerConfig: OSMLayerSpecification,
   maplibreRef: MaplibreRef,
@@ -61,6 +73,7 @@ const addNewLayer = (
           styleLayer.source = layerConfig.id;
         }
         maplibreRef.current?.addLayer(styleLayer, beforeMbLayerId);
+        setLanguage(maplibreRef, styleLayer);
         maplibreRef.current?.setLayoutProperty(styleLayer.id, 'visibility', layerConfig.visibility);
         maplibreRef.current?.setLayerZoomRange(
           styleLayer.id,