Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Language cannot be set, if zoom is smaller than 6 when creating the map #60

Open
WindLi001 opened this issue Jan 17, 2023 · 2 comments
Open

Comments

@WindLi001
Copy link

WindLi001 commented Jan 17, 2023

I found an interesting issue.

  • If I create a map with zoom isn't set (that is, zoom is default), or is set to a value smaller than 6, and then set the language to Chinese,
    map.current = new mapboxLibrary.Map({
      zoom: 5,
      container: mapContainer.current,
      style: isDarkMode()
        ? 'mapbox://styles/mapbox/dark-v10'
        : 'mapbox://styles/mapbox/streets-v11',
      ...mapboxOptions,
    })

    map.current.addControl(new MapboxLanguage({defaultLanguage: 'zh-Hans'}));

then an English map is shown.

  • If I create a map with zoom is set to a value bigger than or equal to 6, and then set the language to Chinese,
    map.current = new mapboxLibrary.Map({
      zoom: 6,
      container: mapContainer.current,
      style: isDarkMode()
        ? 'mapbox://styles/mapbox/dark-v10'
        : 'mapbox://styles/mapbox/streets-v11',
      ...mapboxOptions,
    })

    map.current.addControl(new MapboxLanguage({defaultLanguage: 'zh-Hans'}));

then a Chinese map is shown.

The code above is a part of project photoview [https://github.com/photoview/photoview], and in the ui/src/components/mapbox/MapboxMap.tsx. You can find the context there.

@WindLi001
Copy link
Author

Furthermore, I find this issue only happened when I set projection to global and zoom smaller than 6. That is,

    map.current = new mapboxLibrary.Map({
      **zoom: 5,**
      container: mapContainer.current,
      style: isDarkMode()
        ? 'mapbox://styles/mapbox/dark-v10'
        : 'mapbox://styles/mapbox/streets-v11',
      ...mapboxOptions,
    })

and

  const { mapContainer, mapboxMap, mapboxToken } = useMapboxMap({
    configureMapbox: configureMapbox({ mapboxData, dispatchMarkerMedia }),
    mapboxOptions: {
      **projection: {
        name: 'globe',
      },**
    },
  })

, and then
map.current.addControl(new MapboxLanguage({defaultLanguage: 'zh-Hans'}));
an English map but not Chinese map is shown.

@yunchen-lee
Copy link

I found same issue when creating the map. I want to set the laguage as English, but alway show some Chinese labels.

  • I try this way but not work, still some Chinese labels shown at left hand side
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_en'])

image

  • and then I found that there are different labels, all of them have to set as English.
    let labels = ['country-label', 'state-label',
        'settlement-label', 'settlement-subdivision-label',
        'airport-label', 'poi-label', 'water-point-label',
        'water-line-label', 'natural-point-label',
        'natural-line-label', 'waterway-label', 'road-label'
    ];

    labels.forEach(label => {
        map.setLayoutProperty(label, 'text-field', ['get', 'name_en']); 
    });

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants