How to change the default map labels language

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

It explains the steps to change the language setting for the labels displayed on maps. By following these instructions, users can customize the language of map labels according to their preferences. This tutorial aims to assist users in personalizing their map experience by adjusting the language used for map labels.

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

  2. Install the npm package.

  3. 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

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

  5. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  6. The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.

  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.

Related examples

Change a map's language

Change a map's language

Example

Use setLanguage function to switch languages dynamically.
Display and style rich text labels

Display and style rich text labels

Example

Use the format expression to display country labels in both English and in the local language.
How to specify the geocoding control language(s) response text and prioritization

Geocoding language

Example

Specify the geocoding control language(s) that are used for the response text and weighting of the query results.
How to change the map labels language based on visitor's location

Map language by IP

Example

This tutorial shows how to automatically change the map labels language based on visitor's location usign the MapTiler Geolocation API.
An extension of MapLibre GL JS