fix map language

This commit is contained in:
Ulf Gebhardt 2023-01-27 12:28:10 +01:00
parent d82be43104
commit eca133ab53
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
3 changed files with 19 additions and 30 deletions

View File

@ -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",

View File

@ -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() {

View File

@ -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"