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" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.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>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',center: [16.05, 48],zoom: 2.9}); document.getElementById('buttons').addEventListener('click', function (event) {var 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('label_country', 'text-field', ['get','name_' + language]);});</script> </body></html>