<!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/liq-styles-ctrl-libre-gl.js?v=0.1.8"></script>
<link href="https://tiles.locationiq.com/v3/css/liq-styles-ctrl-libre-gl.css?v=0.1.8" 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!)
locationiq.key = 'pk.aa7f5d0539c5675b7f3429402939d8fa';
//Define the map and configure the map's theme
var map = new maplibregl.Map({
container: 'map',
style: locationiq.getLayer("Streets"),
zoom: 4,
center: [14.74, 49.3]
});
//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>