mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.11k stars 2.21k forks source link

Map style "Standard" adds multiple languages #12950

Open uubbbb opened 11 months ago

uubbbb commented 11 months ago

Currently Standard only supports English, we hope to add more languages.

hanqvist commented 5 months ago

Hello! Can you tell me what is holding this back? I think the new globe projection (Standard style) is incredible and it is unfortunate that it currently cannot be localized like the other projections :( Is this planned or do you have a rough ETA?

stepankuzmin commented 5 months ago

This is supported with the experimental language API, but we are still working on stabilizing it.

new mapboxgl.Map({
    container: 'map',
    language: 'zh-Hans' // you can also set it to 'auto' to use window.navigator.language
});

Screenshot 2024-04-22 at 17 36 06

Screenshot 2024-04-22 at 17 36 49

chunlampang commented 1 month ago

To change the map language after loaded, you can use the following code

let localeName = 'name_zh-Hans' // 'name_en'

for (const layerId in map.style._mergedLayers) {
  const layer = map.style._mergedLayers[layerId]
  if (layer.type === "symbol") {
    let textField = layer.getLayoutProperty("text-field")
    if (!textField) continue
    let expression = JSON.stringify(textField)
    let expressionNew = expression.replace(/"name_.+?"/g, `"${localeName}"`)
    if (expressionNew !== expression) {
      layer.setLayoutProperty("text-field", JSON.parse(expressionNew));
      map.style._updateLayer(layer);
    }
  }
}
map._update(true);

BTW, I hope this can be done by map.setLanguage