From eca133ab5311d9d9c337b3fcacdba1aaa8b07e2c Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Fri, 27 Jan 2023 12:28:10 +0100
Subject: [PATCH] fix map language

---
 webapp/package.json  |  1 -
 webapp/pages/map.vue | 40 +++++++++++++++-------------------------
 webapp/yarn.lock     |  8 ++++----
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 4dc0b1b03..d86df0ee2 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -23,7 +23,6 @@
   "dependencies": {
     "@human-connection/styleguide": "0.5.22",
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
-    "@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 afbe425e0..9a9670149 100644
--- a/webapp/pages/map.vue
+++ b/webapp/pages/map.vue
@@ -48,7 +48,6 @@
 import mapboxgl from 'mapbox-gl'
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
-// import MapboxLanguage from '@mapbox/mapbox-gl-language'
 import { objectValuesToArray } from '../utils/utils'
 import { mapGetters } from 'vuex'
 import { profileUserQuery, mapUserQuery } from '~/graphql/User'
@@ -65,13 +64,12 @@ export default {
     mapboxgl.accessToken = this.$env.MAPBOX_TOKEN
     return {
       mapboxgl,
-      // mapboxLanguage: null,
       activeStyle: null,
       defaultCenter: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE
-      currentUserLocation: null,
-      currentUserCoordinates: null,
-      users: null,
-      groups: null,
+      currentUserLocation: null,// documentation of correct version: https://github.com/mapbox/mapbox-gl-language/tree/v0.10.0
+
+      // set the default atmosphere style
+      // this.map.setFog({}) // the package is probably to old, because of Vue2: https://docs.mapbox.com/mapbox-gl-js/example/globe/
       markers: {
         icons: [
           {
@@ -119,7 +117,7 @@ export default {
           url: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
         },
         streets: {
-          url: 'mapbox://styles/mapbox/streets-v11?optimize=true',
+          url: 'mapbox://styles/mapbox/streets-v11',
           // Wolle: url: 'mapbox://styles/mapbox/streets-v12',
           // use the newest version?
         },
@@ -153,27 +151,18 @@ export default {
     },
   },
   methods: {
+    language(map) {
+      map.getStyle().layers.forEach(function(thisLayer){
+        if(thisLayer.id.indexOf('-label')>0){
+          //seems to use user language. specific language would be `name_de`, but is not compatible with all maps
+          map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name'])
+        }
+      });
+    },
+
     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
-      // this.mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js')
-      // this.mapboxLanguage = new MapboxLanguage({
-      //   // defaultLanguage: 'en', // Wolle
-      //   defaultLanguage: 'de', // Wolle
-      //   // defaultLanguage: 'auto', // Wolle
-      // })
-      // this.map.addControl(this.mapboxLanguage)
-      // console.log('this.map: ', this.map)
-      // console.log('this.language: ', this.language)
-      // is unclear, how to
-      // this.mapboxLanguage.setLanguage('de') // makes error
-
-      // set the default atmosphere style
-      // this.map.setFog({}) // the package is probably to old, because of Vue2: https://docs.mapbox.com/mapbox-gl-js/example/globe/
-
       this.map.on('style.load', (value) => {
         // Triggered when `setStyle` is called.
         this.markers.isImagesLoaded = false
@@ -273,6 +262,7 @@ export default {
       ).then(() => {
         this.markers.isImagesLoaded = true
         this.addMarkersOnCheckPrepared()
+        this.language(this.map)
       })
     },
     addMarkersOnCheckPrepared() {
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 812840450..ed1456790 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2909,10 +2909,10 @@
     suggestions "^1.6.0"
     xtend "^4.0.1"
 
-"@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-language@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-language/-/mapbox-gl-language-1.0.1.tgz#19c57da3163959f70c4057967cf599d2f49a7795"
+  integrity sha512-gL58ojl7gaWLfbSISoB2QJEfTK3j+NKvPH9og0r+c3bd5BNqhY19Eb4OPfDc5+dGmjW03LhtZBc4n2b7Xn8kjA==
 
 "@mapbox/mapbox-gl-supported@^1.5.0":
   version "1.5.0"