MapTiler maps support multiple languages for labeling, and it’s easy to change them according to your need or the language of your audience. This article shows three different ways to set up the map in your language in a few clicks, using MapTiler Cloud.
Important notice
The map labels translation completeness may vary according to the selected language and region. For right-to-left alphabets, use the additional script in the source code of your map application:
maplibregl.setRTLTextPlugin('https://cdn.maptiler.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.2/mapbox-gl-rtl-text.js');
Using the customize tool
Create a new map from the Maps section of your MapTiler Cloud account and click on the Open Customize button.
This will open the customize tool with the Streets map loaded by default. From the left panel, click on the Language tab and simply select the desired language on the drop-down list. You can see the map labels changing dynamically on the right-hand side while doing so. Save and publish your localized map, and start using it from your application using the provided URL.
Using the advanced editor
Create a new map from the Maps section by clicking on the Open Editor button and then on the Streets ‘Edit a copy’ button. This will open the editor and load the Streets style. The map labels (Symbol layers) are located at the bottom of the layer tree on the left-hand side.
Click on the layer called country_1 to show its properties and find the Field input. The latter uses {name:latin} by default but this value can be changed to any of the supported language code. For example, you would use {name:de} for labels in German, {name:fr} for French, {name:ja} for Japanese or {name:ru} for Russian.
Tip: Use the Inspect mode and hover over a country point to know the available languages. A list of all possible languages is in the bottom of the MapTiler Planet Schema page
Change the field value for the layers named country_2 and country_3 to get all the country names translated. Save and publish your localized map!
Using JavaScript
The language of map labels can also be changed dynamically using JavaScript, directly from the source code of your map. The following example is built with the MapLibre GL JS library and uses the setLayoutProperty() method to update the language according to the user’s choice.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Call the MapLibre assets from the MapTiler CDN -->
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.14.0/maplibre-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.14.0/maplibre-gl.css" rel="stylesheet" />
<!-- Position the map and style buttons -->
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#buttons {
width: auto;
margin: 0 1em;
padding:0;
position:absolute;
top:0;
left:0;
z-index:99;
}
.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>
<!-- Create the map and button html elements -->
<div id="map">
<ul id="buttons">
<li id="name-cs" class="button">Czech</li>
<li id="name-de" class="button">German</li>
<li id="name-fr" class="button">French</li>
<li id="name-ja" class="button">Japanese</li>
<li id="name-ru" class="button">Russian</li>
</ul>
<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p>
<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>
</p>
<script>
// Instantiate the MapLibre map with MapTiler Streets
var map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=[YOUR_API_KEY]',
center: [12, 45],
zoom: 3
});
// Add a click event on button elements
document.getElementById('buttons').addEventListener('click', function (event) {
// Retrieve language based on button id
var language = event.target.id.substr('name-'.length);
// Set the new language to all countries layers
map.setLayoutProperty('country_1', 'text-field', ['get','name:' + language]);
map.setLayoutProperty('country_2', 'text-field', ['get','name:' + language]);
map.setLayoutProperty('country_3', 'text-field', ['get','name:' + language]);
});
</script>
</body>
</html>
Tip: All the Symbols layers of the map may also be changed at once using the following function:
map.getStyle().layers.forEach(function(thisLayer){
if(thisLayer.type == 'symbol'){
map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name:' + language])
}
})
Useful links
It is straightforward to change the map language of a MapTiler map, as presented in this article. Please refer to the following links to learn more, or head to the MapTiler Cloud support space and look for more information related to map localization.
Maps in various languages - News
OpenMapTiles - Languages
OpenMapTiles - GitHub
Comments
0 comments
Please sign in to leave a comment.