How to change the default map labels language

This tutorial shows how to change the default map labels language.

  1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  3. The next it’s up to you. You can start the map in a different place by modifying the starting position and starting zoom, and you can change the look of the map to any of our styles, or yours, by updating the style. See what’s available here.

  4. Install the npm package.

  5. Include the CSS file.

    If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN

  6. Include the following code in your JavaScript file (Example: app.js).

  7. Change the map language to Japanese. By default, if nothing is specified, the SDK uses the language defined in the browser. This corresponds to maptilersdk.Language.AUTO. If we want to change the default language of the map we must indicate the language in the sdk config.

  8. Reload the page. Now you should see the map with the Japanese labels.

  9. Add event handler for map load event. You will add code to change the map language in this handler.

  10. Change the map language to French. The language generally depends on the style but we made it possible to easily update it with a single function and from a built-in list of languages.

  11. Reload the page. Now you should see the map with the Frech labels.

  12. Change the map language to Arabic. Languages that are written right-to-left such as arabic and hebrew are fully supported by default. No need to install any plugin!.

  13. Reload the page. Now you should see the map with the Arabic labels.

Learn more

Check out the tutorials How to change the map labels language based on visitor’s location and Display and style rich text labels to learn how to change the map labels language.

An extension of MapLibre GL JS