Set the map language to UI language

ui/package-lock.json

@@ -12,6 +12,7 @@
         "@apollo/client": "^3.6.9",
         "@babel/preset-typescript": "^7.18.6",
         "@headlessui/react": "^1.6.6",
+        "@mapbox/mapbox-gl-language": "^1.0.0",
         "@types/geojson": "^7946.0.8",
         "@types/jest": "^28.1.4",
         "@types/mapbox-gl": "^2.7.3",
@@ -3200,6 +3201,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/@mapbox/mapbox-gl-language": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-language/-/mapbox-gl-language-1.0.1.tgz",
+      "integrity": "sha512-gL58ojl7gaWLfbSISoB2QJEfTK3j+NKvPH9og0r+c3bd5BNqhY19Eb4OPfDc5+dGmjW03LhtZBc4n2b7Xn8kjA==",
+      "peerDependencies": {
+        "mapbox-gl": ">=0.29.0"
+      }
+    },
     "node_modules/@mapbox/mapbox-gl-supported": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
@@ -27475,6 +27484,12 @@
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
       "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
     },
+    "@mapbox/mapbox-gl-language": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-language/-/mapbox-gl-language-1.0.1.tgz",
+      "integrity": "sha512-gL58ojl7gaWLfbSISoB2QJEfTK3j+NKvPH9og0r+c3bd5BNqhY19Eb4OPfDc5+dGmjW03LhtZBc4n2b7Xn8kjA==",
+      "requires": {}
+    },
     "@mapbox/mapbox-gl-supported": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",

ui/package.json

@@ -25,6 +25,7 @@
     "@types/geojson": "^7946.0.8",
     "@types/jest": "^28.1.4",
     "@types/mapbox-gl": "^2.7.3",
+    "@mapbox/mapbox-gl-language": "^1.0.0",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",

ui/src/components/mapbox/MapboxMap.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import { mapboxToken } from './__generated__/mapboxToken'
 import { isDarkMode } from '../../theme'
+import { SetMapLanguages } from '../../localization'
 
 const MAPBOX_TOKEN_QUERY = gql`
   query mapboxToken {
@@ -66,6 +67,8 @@ const useMapboxMap = ({
       ...mapboxOptions,
     })
 
+    SetMapLanguages(map.current)
+
     configureMapbox(map.current, mapboxLibrary)
     map.current?.resize()
   }, [mapContainer, mapboxLibrary, mapboxData])

ui/src/localization.ts

@@ -6,6 +6,8 @@ import { initReactI18next, TFunction } from 'react-i18next'
 import { LanguageTranslation } from './__generated__/globalTypes'
 import { authToken } from './helpers/authentication'
 import { exhaustiveCheck, isNil } from './helpers/utils'
+import type mapboxgl from 'mapbox-gl'
+import MapboxLanguage from '@mapbox/mapbox-gl-language'
 
 export type TranslationFn = TFunction<'translation'>
 
@@ -37,6 +39,7 @@ const SITE_TRANSLATION = gql`
     }
   }
 `
+let map_language: LanguageTranslation | null
 
 export const loadTranslations = () => {
   const [loadLang, { data }] = useLazyQuery<siteTranslation>(SITE_TRANSLATION)
@@ -54,6 +57,8 @@ export const loadTranslations = () => {
       return
     }
 
+    map_language = language
+
     switch (language) {
       case LanguageTranslation.Danish:
         import('./extractedTranslations/da/translation.json').then(language => {
@@ -148,3 +153,55 @@ export const loadTranslations = () => {
     exhaustiveCheck(language)
   }, [data?.myUserPreferences.language])
 }
+
+export const SetMapLanguages = (map: mapboxgl.Map) => {
+  if (isNil(map_language)) {
+    map.addControl(new MapboxLanguage({ defaultLanguage: 'en' }))
+    return
+  }
+
+  switch (map_language) {
+    case LanguageTranslation.Danish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'da' }))
+      return
+    case LanguageTranslation.English:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'en' }))
+      return
+    case LanguageTranslation.French:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'fr' }))
+      return
+    case LanguageTranslation.Swedish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'sv' }))
+      return
+    case LanguageTranslation.Italian:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'it' }))
+      return
+    case LanguageTranslation.Spanish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'es' }))
+      return
+    case LanguageTranslation.Polish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'pl' }))
+      return
+    case LanguageTranslation.German:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'de' }))
+      return
+    case LanguageTranslation.Russian:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'ru' }))
+      return
+    case LanguageTranslation.TraditionalChinese:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hant' }))
+      return
+    case LanguageTranslation.SimplifiedChinese:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))
+      return
+    case LanguageTranslation.Portuguese:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'pt' }))
+      return
+    case LanguageTranslation.Basque:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'en' }))
+      return
+    case LanguageTranslation.Turkish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'tr' }))
+      return
+  }
+}