From fea308435a3a59b6d52c0d4090f64cdd336caa79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 10 Jan 2023 14:47:18 +0100
Subject: [PATCH] Implement translation of map labels, not working now

---
 webapp/package.json  |  1 +
 webapp/pages/map.vue | 17 +++++++++++++++++
 webapp/yarn.lock     |  5 +++++
 3 files changed, 23 insertions(+)

diff --git a/webapp/package.json b/webapp/package.json
index 19192b70e..e09300f53 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@human-connection/styleguide": "0.5.22",
+    "@mapbox/mapbox-gl-language": "0.10.0",
     "@nuxtjs/apollo": "^4.0.0-rc19",
     "@nuxtjs/axios": "~5.9.7",
     "@nuxtjs/dotenv": "~1.4.1",
diff --git a/webapp/pages/map.vue b/webapp/pages/map.vue
index 31d982111..7aa5571d5 100644
--- a/webapp/pages/map.vue
+++ b/webapp/pages/map.vue
@@ -47,6 +47,7 @@
 
 <script>
 import mapboxgl from 'mapbox-gl'
+import MapboxLanguage from '@mapbox/mapbox-gl-language'
 import { objectValuesToArray } from '../utils/utils'
 
 export default {
@@ -102,6 +103,22 @@ export default {
   methods: {
     onMapLoad({ map }) {
       this.map = map
+      // documentation of correct version: https://github.com/mapbox/mapbox-gl-language/tree/v0.10.0
+      // Add RTL support if you want to support Arabic
+      // Wolle: does not work yet
+      mapboxgl.accessToken = this.$env.MAPBOX_TOKEN
+      mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js')
+      const language = new MapboxLanguage({
+        defaultLanguage: 'en', // Wolle
+        // defaultLanguage: 'de', // Wolle
+        // defaultLanguage: 'auto', // Wolle
+      })
+      this.language = language
+      this.map.addControl(language)
+      console.log('this.map: ', this.map)
+      console.log('this.language: ', this.language)
+      // is unclear, how to 
+      // this.language.setLanguage('de') // makes error
     },
     setStyle(url) {
       this.map.setStyle(url)
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 40d093913..4e502421b 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2888,6 +2888,11 @@
   resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
   integrity sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==
 
+"@mapbox/mapbox-gl-language@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-language/-/mapbox-gl-language-0.10.0.tgz#f93fb05cde7a8c092c29ff393c51b54e2e26611d"
+  integrity sha512-BBJ6CQStZbGKfARPOcVol97J5PLaLEbm6ya/PzzhC4Aw7f7a3cBiV5p6SYQFGhyAh2Z8MxjFaXH18xyB8KgrkA==
+
 "@mapbox/mapbox-gl-supported@^1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz#f60b6a55a5d8e5ee908347d2ce4250b15103dc8e"