<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change a map's style</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: "Open Sans", sans-serif;
}
</style>
<div id="map"></div>
<div id="menu">
<input
id="streets-v11"
type="radio"
name="rtoggle"
value="streets"
checked="checked"
/>
<label for="streets">streets</label>
<input id="light-v10" type="radio" name="rtoggle" value="light" />
<label for="light">light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark" />
<label for="dark">dark</label>
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
<label for="outdoors">outdoors</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
<label for="satellite">satellite</label>
</div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiY2VuZXJneSIsImEiOiJjajBjYWdsYnMwNGM1MnFsY21xcTc2d3ZjIn0.nOvNpzuvlXEObCK7xcb5oQ";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
zoom: 13,
center: [4.899, 52.372]
});
var layerList = document.getElementById("menu");
var inputs = layerList.getElementsByTagName("input");
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle("mapbox://styles/mapbox/" + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>
