search

mapbox / mapbox-gl-language

Switch language of your Mapbox GL JS style
https://mapbox.github.io/mapbox-gl-language/
BSD 3-Clause "New" or "Revised" License
198 stars 51 forks source link

Cannot set the map language #63

Open ygoe opened 1 year ago

ygoe commented 1 year ago

My website supports two languages: en, de. The currently selected language is set in the <html lang> attribute. The user may choose the language they want out of these two. The map should follow that as well.

Without this plugin, my maps are always in German, no matter what I do.

With this plugin, the map follows the browser's first language (if supported, see #4) but not the page content's language from the above attribute.

I saw that there is a setLanguage method but it requires a parameter style which is not documented. I have no idea what I should pass to it. So I cannot consider that method. And then there's nothing left. The plugin cannot set the map language to the page language.

goldengecko commented 1 year ago

I'm trying to work this out too. From the documentation it looks as if the setLanguage function takes in a style and a new language, and returns the style modified to be in the new language.

I saw someone else's code which does the following: this.map.setStyle(this.mapboxlanguage.setLanguage(this.map.getStyle(), newLanguage.code)) so I tried that, but it doesn't work for me.

I tried splitting it out to look at the input style and output style, and it did indeed change the values from name_en to name_ja in my test of switching from English to Japanese.

I wish the documentation was clear on how this is supposed to work. I don't know what the examples are supposed to do, and I'm not sure why it needs the this.map.addControl(this.mapboxlanguage) when it doesn't seem to add a control.

goldengecko commented 1 year ago

It turns out that the only thing I was missing is to set the language of the map.

My theory of how it works is that you alter the styles so that it knows that there is a language lookup for the new language, then you tell the map to use that language.

For clarity, here is my code (where this.map is the map created with new mapboxgl.Map and this.mapboxlanguage is created with new MapboxLanguage and added to the map with this.map.addControl(this.mapboxlanguage) and newLanguage is an object which has an attribute code which is the code for one of the supported languages e.g. "jp":

      this.map.setStyle(this.mapboxlanguage.setLanguage(this.map.getStyle(), newLanguage.code))
      this.map.language = newLanguage.code

Hope this helps out. Perhaps the documentation could explain this better.

1ec5 commented 3 months ago

I don’t see how setting map.language would help; this plugin never consults that property.

I was only able to work around this issue by turning off style diffing (which has the downside of a jarring flash as the old style gets wiped away completely):

map.setStyle(newStyle, { diff: false });