<!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://tiles.locationiq.com/v3/libs/maplibre-gl/1.15.2/maplibre-gl.js'></script>
<link href='https://tiles.locationiq.com/v3/libs/maplibre-gl/1.15.2/maplibre-gl.css' rel='stylesheet' />
<script src="https://tiles.locationiq.com/v3/js/lang-libre-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='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 maplibregl.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>