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>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        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>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

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(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      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;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

Was this example helpful?