Skip to content

Instantly share code, notes, and snippets.

@frodrigo

frodrigo/index.html

Last active May 12, 2020 08:15
Show Gist options
  • Save frodrigo/cb4db4446962e2a4be111ece3b154e02 to your computer and use it in GitHub Desktop.
Save frodrigo/cb4db4446962e2a4be111ece3b154e02 to your computer and use it in GitHub Desktop.
Download ZIP
Teritorio - Demo - Lang
Raw
index.html
<!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://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdn.klokantech.com/openmaptiles-language/v1.0/openmaptiles-language.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: #1c70b8;
font-family: sans-serif;
font-weight: bold;
}
</style>
<div id='map'></div>
<ul id="buttons">
<li id='button-latin' class='button'>Default</li>
<li id='button-fr' class='button'>French</li>
<li id='button-eu' class='button'>Euskara</li>
<li id='button-es' class='button'>Spanish</li>
</ul>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'https://vecto.teritorio.xyz/styles/teritorio-tourism-0.9/style.json',
center: [-1.222, 43.184],
zoom: 10
});
map.autodetectLanguage();
document.getElementById('buttons').addEventListener('click', function(event) {
var lang = event.target.id.substr('button-'.length);
map.setLanguage(lang);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment