Leaflet multi-lingual map

This tutorial shows how to change the default map labels language. By default, if nothing is specified, the SDK uses the language defined in the browser. This corresponds to maptilersdk.Language.AUTO. To change the default language of the map, indicate the language in the L.maptiler.maptilerLayer config.


npm install --save @maptiler/leaflet-maptilersdk leaflet

main.js

import { MaptilerLayer, MapStyle, Language } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const key = 'YOUR_MAPTILER_API_KEY_HERE';

const map = L.map('map').setView([50, 20], 3);
const mtLayer = new MaptilerLayer({
  apiKey: key,
  style: MapStyle.STREETS, // optional
  language: Language.JAPANESE, //change the default language
}).addTo(map);

document.getElementById('buttons').addEventListener('click', function (event) {
  // Retrieve language based on button id
  mtLayer.setLanguage(Language[event.target.id]);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Leaflet multi-lingual map | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <ul id="buttons">
    <li id="ARABIC" class="button">Arabic</li>
    <li id="CZECH" class="button">Czech</li>
    <li id="ENGLISH" class="button">English</li>
    <li id="FRENCH" class="button">French</li> 
    <li id="GERMAN" class="button">German</li>
    <li id="JAPANESE" class="button">Japanese</li>
    <li id="SPANISH" class="button">Spanish</li>
    <li id="UKRAINIAN" class="button">Ukrainian</li>
  </ul>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#buttons {
  width: auto;
  margin: 0 1em;
  padding:0;
  position:absolute;
  top:0;
  right:0;
  z-index:1000;
}
.button {
  display: block;
  position: relative;
  cursor: pointer;
  width: auto;
  padding: 8px;
  border-radius: 3px;
  margin: 10px 0 0 0;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #3174ff;
  font-family: sans-serif;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vector Tiles in Leaflet JS</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <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" />
    <script src="https://cdn.maptiler.com/leaflet-maptilersdk/v4.1.0/leaflet-maptilersdk.umd.min.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
      #buttons {
        width: auto;
        margin: 0 1em;
        padding:0;
        position:absolute;
        top:0;
        right:0;
        z-index:1000;
      }
      .button {
        display: block;
        position: relative;
        cursor: pointer;
        width: auto;
        padding: 8px;
        border-radius: 3px;
        margin: 10px 0 0 0;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #3174ff;
        font-family: sans-serif;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <ul id="buttons">
      <li id="ARABIC" class="button">Arabic</li>
      <li id="CZECH" class="button">Czech</li>
      <li id="ENGLISH" class="button">English</li>
      <li id="FRENCH" class="button">French</li> 
      <li id="GERMAN" class="button">German</li>
      <li id="JAPANESE" class="button">Japanese</li>
      <li id="SPANISH" class="button">Spanish</li>
      <li id="UKRAINIAN" class="button">Ukrainian</li>
    </ul>
    <script>
      const key = 'YOUR_MAPTILER_API_KEY_HERE';

      const map = L.map('map').setView([50, 20], 3);
      const mtLayer = L.maptiler.maptilerLayer({
        apiKey: key,
        style: L.maptiler.MapStyle.STREETS, // optional
        language: L.maptiler.Language.JAPANESE, //change the default language
      }).addTo(map);

      document.getElementById('buttons').addEventListener('click', function (event) {
        // Retrieve language based on button id
        mtLayer.setLanguage(L.maptiler.Language[event.target.id]);
      });
    </script>
  </body>
</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.