How to change the default map labels language
This tutorial shows how to change the default map labels language.
Copy the following code, paste it into your favorite text editor, and save it as a
YOUR_MAPTILER_API_KEY_HEREwith your actual MapTiler API key.
The next it’s up to you. You can start the map in a different place by modifying the
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.
Install the npm package.
Include the CSS file.
If you have a bundler that can handle CSS, you can
importthe CSS or include it with a
<link>in the head of the document via the CDN
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
Reload the page. Now you should see the map with the Japanese labels.
Add event handler for map load event. You will add code to change the map language in this handler.
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.
Reload the page. Now you should see the map with the Frech labels.
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!.
Reload the page. Now you should see the map with the Arabic labels.
View complete source code on GitHub
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.