Change a map's language | Mapbox GL JS

This example shows how to specify a language for labels when creating a map and how to change languages dynamically after a map has been created.

The map is instantiated using the language option, explicitly setting the language to Korean (ko). When the user clicks a language button Map.setLanguage() is called to update the map's language.

This technique can be used with the Mapbox Standard style, or any style built on using the Mapbox Streets v8 vector tileset.

For a full list of supported languages, see the Internationalization and Localization guide.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change a map's language</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    #buttons {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .button.active {
        background: #c45f38;
    }

    .button {
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 20%;
        padding: 8px;
        border: none;
        border-radius: 3px;
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #ee8a65;
        font-family: sans-serif;
        font-weight: bold;
    }
</style>
<div id="map"></div>
<div id="buttons">
    <button id="button-fr" class="button">French (<code>fr</code>)</button>
    <button id="button-ru" class="button">Russian (<code>ru</code>)</button>
    <button id="button-de" class="button">German (<code>de</code>)</button>
    <button id="button-es" class="button">Spanish (<code>es</code>)</button>
    <button id="button-ko" class="button active">
        Korean (<code>ko</code>)
    </button>
</div>
<script>
    const map = new mapboxgl.Map({
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/standard',
        config: {
            basemap: {
                theme: 'monochrome'
            }
        },
        center: [16.05, 48],
        zoom: 2.9,
        language: 'ko'
    });

    document.getElementById('buttons').addEventListener('click', (event) => {
        const language = event.target.id.substr('button-'.length);
        // Use setLanguage to switch the language used for map labels.
        map.setLanguage(language);
        document
            .querySelectorAll('.button')
            .forEach((btn) => btn.classList.remove('active'));
        event.target.classList.add('active');
    });
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef, useState } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const buttonStyle = {
  display: 'inline-block',
  position: 'relative',
  cursor: 'pointer',
  width: '20%',
  padding: '8px',
  borderRadius: '3px',
  marginTop: '10px',
  fontSize: '12px',
  textAlign: 'center',
  color: '#fff',
  background: '#ee8a65',
  fontFamily: 'sans-serif',
  fontWeight: 'bold',
  border: 'none'
};

const languages = [
  { code: 'fr', label: 'French' },
  { code: 'ru', label: 'Russian' },
  { code: 'de', label: 'German' },
  { code: 'es', label: 'Spanish' },
  { code: 'ko', label: 'Korean' }
];

const activeButtonStyle = {
  background: '#c45f38'
};

const MapboxExample = () => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);
  const [activeLanguage, setActiveLanguage] = useState('ko');

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
      container: mapContainerRef.current,
      // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
      style: 'mapbox://styles/mapbox/standard',
      config: {
        basemap: {
          theme: 'monochrome'
        }
      },
      center: [16.05, 48],
      zoom: 2.9,
      language: 'ko'
    });

    return () => mapRef.current.remove();
  }, []);

  const handleClick = (languageCode) => {
    // Use setLanguage to switch the language used for map labels.
    mapRef.current.setLanguage(languageCode);
    setActiveLanguage(languageCode);
  };

  return (
    <div style={{ height: '100%', position: 'relative' }}>
      <div ref={mapContainerRef} id="map" style={{ height: '100%' }} />
      <div
        id="buttons"
        style={{
          position: 'absolute',
          top: 0,
          width: '90%',
          left: '5%',
          display: 'flex',
          justifyContent: 'center',
          gap: '10px'
        }}
      >
        {languages.map(({ code, label }) => (
          <button
            key={code}
            style={{
              ...buttonStyle,
              ...(activeLanguage === code && activeButtonStyle)
            }}
            onClick={() => handleClick(code)}
          >
            {label} (<code>{code}</code>)
          </button>
        ))}
      </div>
    </div>
  );
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

このexampleは役に立ちましたか？