I need to change the language of the mapbox in javascript, I only see the below code in the documentation
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_de'])
but this line of code will only change the country names but I need everything ( city, town, ...etc)
I need to change the language of the mapbox in javascript, I only see the below code in the documentation
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_de'])
but this line of code will only change the country names but I need everything ( city, town, ...etc)
Share Improve this question edited Oct 29, 2019 at 12:03 Murli Prajapati 9,7135 gold badges41 silver badges55 bronze badges asked Oct 29, 2019 at 10:06 tyehiatyehia 2671 gold badge5 silver badges17 bronze badges5 Answers
Reset to default 9Based on your mapbox style, there will be different text layers. For dark-v9, these are the available text layers.
country-label
state-label
settlement-label
settlement-subdivision-label
airport-label
poi-label
water-point-label
water-line-label
natural-point-label
natural-line-label
waterway-label
road-label
Using the code snippet that you mentioned in the question on the above layers, you should be able to change the language.
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_de'])
Or you can use mapbox-language-plugin to change the language of all the possible layers. Here is the working example of the plugin.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change a map's language</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.1/mapbox-gl-language.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#buttons {
width: 90%;
margin: 0 auto;
}
.button {
display: inline-block;
position: relative;
cursor: pointer;
width: 20%;
padding: 8px;
border-radius: 3px;
margin-top: 10px;
font-size: 12px;
text-align: center;
color: #fff;
background: #ee8a65;
font-family: sans-serif;
font-weight: bold;
}
</style>
<div id='map'></div>
<ul id="buttons">
<li id='button-fr' class='button'>French</li>
<li id='button-ru' class='button'>Russian</li>
<li id='button-de' class='button'>German</li>
<li id='button-es' class='button'>Spanish</li>
</ul>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibXVyYWxpcHJhamFwYXRpIiwiYSI6ImNrMHA1d3VjYzBna3gzbG50ZjR5b2Zkb20ifQ.guBaIUcqkTdYHX1R6CM6FQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [16.05, 48],
zoom: 2.9
});
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
var mapboxLanguage = new MapboxLanguage({
defaultLanguage: 'en'
});
map.addControl(mapboxLanguage);
document.getElementById('buttons').addEventListener('click', function(event) {
var language = event.target.id.substr('button-'.length);
map.setStyle(mapboxLanguage.setLanguage(map.getStyle(), language));
});
</script>
</body>
</html>Ref: https://blog.mapbox.com/how-to-localize-your-maps-in-mapbox-gl-js-da4cc6749f47
Here is a code I have found helpful for me from github mapbox here
map.getStyle().layers.forEach(function(thisLayer){
if(thisLayer.type == 'symbol'){
map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name_ja'])
}
})
I have modified it to
map.getStyle().layers.forEach(function(thisLayer){
console.log(thisLayer);
if(thisLayer.id.indexOf('-label')>0){
console.log('change '+thisLayer.id);
map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name_fr'])
}
});
But otherwise you'll have to change the different labels yourself as mentionned by murli-prajapati
Of course, change 'name_xx' by your own language
such as:
map.setLayoutProperty('country-label', 'text-field', ['get','name_fr']);
map.setLayoutProperty('state-label', 'text-field', ['get','name_fr']);
map.setLayoutProperty('settlement-label', 'text-field', ['get','name_fr']);
map.setLayoutProperty('settlement-subdivision-label', 'text-field', ['get','name_fr']);
The only thing that helped me is a cycle placed in load event:
map.on('load', function() {
let labels = [ 'country-label', 'state-label',
'settlement-label', 'settlement-subdivision-label',
'airport-label', 'poi-label', 'water-point-label',
'water-line-label', 'natural-point-label',
'natural-line-label', 'waterway-label', 'road-label' ];
labels.forEach(label => {
map.setLayoutProperty(label, 'text-field', 'get','name_ru']);
});
})
Language plugin and other stuff didn't work.
After trying all the solutions in this thread with streets-v12 I found non of them gave me what I needed.
The plug-in doesn’t work at all, and @Mike & @honey59 solutions semi-work, I still found many components not translated.
What did work best for me was to use Mapbox’s studio to create custom map and change the language there to all the components & layers (guide: https://docs.mapbox.com/help/troubleshooting/change-language/).
And on my site I know when user is viewing the page on a specific language, so I just needed to map the languages to their custom maps URLs.
I know it’s not the most “technical” dynamic solution, but I found it to be the most complete one
Belatedly, you could use this plugin to change the display language according to the user locale.
https://github.com/mapbox/mapbox-gl-language
For example:
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-77.0259, 38.9010],
zoom: 9
});
const language = new MapboxLanguage();
map.addControl(language);