Change a map's language
Use setLayoutProperty
to switch languages dynamically. For a more complete solution see the mapbox-gl-language 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"><link href="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js"></script><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> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',// Choose from Mapbox's core styles, or make your own style with Mapbox Studiostyle: 'mapbox://styles/mapbox/light-v11',center: [16.05, 48],zoom: 2.9}); document.getElementById('buttons').addEventListener('click', (event) => {const language = event.target.id.substr('button-'.length);// Use setLayoutProperty to set the value of a layout property in a style layer.// The three arguments are the id of the layer, the name of the layout property,// and the new property value.map.setLayoutProperty('country-label', 'text-field', ['get',`name_${language}`]);});</script> </body></html>
Was this example helpful?