Change a map’s language

You can utilize the setLanguage function to dynamically switch between languages. This function allows you to modify the language setting for the labels that appear on maps. By following these guidelines, users can customize the language of map labels based on their personal preferences.


npm install --save @maptiler/sdk

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
    container: 'map',
    style: MapStyle.BASE, 
    center: [16.05, 48],
    zoom: 2.9
});

document
    .getElementById('buttons')
    .addEventListener('click', function (event) {
        const language = event.target.id;
        map.setLanguage(maptilersdk.Language[language]);
    });

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Change a map's language | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <style>
  #buttons {
      width: 90%;
      margin: 0 auto;
  }
  .button {
      display: inline-block;
      position: relative;
      cursor: pointer;
      width: 20%;
      padding: 8px;
      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>
  <ul id="buttons">
  <li id="FRENCH" class="button">French</li>
  <li id="RUSSIAN" class="button">Russian</li>
  <li id="GERMAN" class="button">German</li>
  <li id="SPANISH" class="button">Spanish</li>
  </ul>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change a map's language</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #buttons {
      width: 90%;
      margin: 0 auto;
    }

    .button {
      display: inline-block;
      position: relative;
      cursor: pointer;
      width: 20%;
      padding: 8px;
      border-radius: 3px;
      margin-top: 10px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #ee8a65;
      font-family: sans-serif;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <ul id="buttons">
    <li id="FRENCH" class="button">French</li>
    <li id="RUSSIAN" class="button">Russian</li>
    <li id="GERMAN" class="button">German</li>
    <li id="SPANISH" class="button">Spanish</li>
  </ul>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map',
      style: maptilersdk.MapStyle.BASE,
      center: [16.05, 48],
      zoom: 2.9
    });

    document
      .getElementById('buttons')
      .addEventListener('click', function (event) {
        const language = event.target.id;
        map.setLanguage(maptilersdk.Language[language]);
      });
  </script>
</body>

</html>