<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change Language</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />

<script src="https://tiles.locationiq.com/v3/js/lang-gl.min.js?v=0.1.8"></script>
<style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<style>

        .lang-switcher {
            position: absolute;
            left: 10px;
            top: 5px;
            height: 30px;
            padding: 10px 10px 0px 10px;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Style only for Mozilla Firefox */
        @-moz-document url-prefix() {
            .lang-switcher {
                padding: 10px;
            } 
        }

    </style>
<div id="map"></div>
<div class="lang-switcher">
<label for="lang">Language:</label>
<select name="lang" id="lang-options">
<option value='am'>Amharic</option>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='br'>Breton</option>
<option value='bs'>Bosnian</option>
<option value='ca'>Catalan</option>
<option value='co'>Corsican</option>
<option value='cs'>Czech</option>
<option value='cy'>Welsh</option>
<option value='da'>Danish</option>
<option value='de' selected>German</option>
<option value='el'>Greek</option>
<option value='en'>English</option>
<option value='eo'>Esperanto</option>
<option value='es'>Spanish</option>
<option value='et'>Estonian</option>
<option value='eu'>Basque</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='fy'>Western Frisian</option>
<option value='ga'>Irish</option>
<option value='gd'>Scottish Gaelic</option>
<option value='he'>Hebrew</option>
<option value='hr'>Croatian</option>
<option value='hu'>Hungarian</option>
<option value='hy'>Armenian</option>
<option value='id'>Indonesian</option>
<option value='is'>Icelandic</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ka'>Georgian</option>
<option value='kk'>Kazakh</option>
<option value='kn'>Kannada</option>
<option value='ko'>Korean</option>
<option value='ku'>Kurdish</option>
<option value='la'>Latin</option>
<option value='lt'>Lithuanian</option>
<option value='lv'>Latvian</option>
<option value='mk'>Macedonian</option>
<option value='mt'>Maltese</option>
<option value='nl'>Dutch</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='rm'>Romansh</option>
<option value='ro'>Romania</option>
<option value='ru'>Russian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovene</option>
<option value='sq'>Albanian</option>
<option value='sv'>Swedish</option>
<option value='th'>Thai</option>
<option value='tr'>Turkish</option>
<option value='uk'>Ukrainian</option>
<option value='zh'>Chinese</option>
</select>
</div>
<script>
            //Add your LocationIQ Maps Access Token here (not the API token!)
            locationiqKey = 'pk.a5c3fbf2119bfb2275b62eddbccd76b3';
            //Define the map and configure the map's theme
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'https://tiles.locationiq.com/v3/streets/vector.json?key='+locationiqKey,
                zoom: 4,
                center: [14.74,49.30],
            });

            //Default language is set to German
            map.setLanguage('de'); 

            //Add a event listener to the language options
            document.getElementById('lang-options').addEventListener('change', function(event) {
                //Get the selected option and it's value
                let selection = document.getElementById("lang-options");
                let opt = selection.options[selection.selectedIndex];
                let language = opt.value;
                //Set the map language to selected option
                if (language == 'zh') {
                    //The second parameter when set to 'true' disables the latin alternatives for non-latin languages
                    map.setLanguage(language, false);
                } else {
                    map.setLanguage(language, true);
                }
                
            });

    </script>
</body>
</html>