diff --git a/common/index.ts b/common/index.ts index 1f73a398..7ecb3a21 100644 --- 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 index afc2ef97..32529b0e 100644 --- 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 index 871904f0..96a0cc61 100644 --- 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,