<html>
<head>
<meta charset='utf-8'/>
<title>Exemple mapbox i ContextMaps ICGC</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.13.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%
}
#menu {
position: absolute;
z-index: 1000;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
top: 5px;
left: 5px;
border-radius: 7px;
-webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
}
#div_pitch {
position: absolute;
right: 10px;
top: 142px;
width: 30px;
z-index: 100;
}
.sliderClass {
position: absolute;
left: 10px;
top: 79px;
width: 130px;
z-index: 100;
display: none;
background-color: white;
padding: 10px;
border-radius: 4px;
font-size: 0.85em;
opacity: 0.9;
}
</style>
</head>
<body>
<div id='menu'>
<input id='icgc_mapa_estandard' type='radio' name='rtoggle' value='icgc_mapa_estandard' checked='checked'>
<label for='icgc_mapa_estandard'>Mapa estàndard</label><br>
<input id='icgc_mapa_base_gris' type='radio' name='rtoggle' value='icgc_mapa_base_gris'>
<label for='icgc_mapa_base_gris'>Mapa base gris</label><br>
<input id='icgc_delimitacio_estandard' type='radio' name='rtoggle' value='icgc_delimitacio_estandard'>
<label for='icgc_delimitacio_estandard'>Delimitació estàndard</label><br>
<input id='icgc_xarxa_viaria_estandard' type='radio' name='rtoggle' value='icgc_xarxa_viaria_estandard'>
<label for='icgc_xarxa_viaria_estandard'>Xarxa viària estàndard</label><br>
<input id='icgc_arees_poblament' type='radio' name='rtoggle' value='icgc_arees_poblament'>
<label for='icgc_arees_poblament'>Àrees poblament</label><br>
<input id='icgc_orto_hibrida' type='radio' name='rtoggle' value='icgc_orto_hibrida'>
<label for='icgc_orto_hibrida'>Orto híbrida</label>
</div>
<div id='div_pitch' class="mapboxgl-ctrl-group mapboxgl-ctrl">
<button id="bt_pitch" title="Perspectiva" class="mapboxgl-ctrl-icon glyphicon glyphicon-road"></button>
</div>
<div id="map"></div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard.json',
center: [1.1464, 41.706],
zoom: 7.4,
maxZoom: 14,
hash: true,
pitch: 0,
attributionControl: false
});
map.on('load', function () {
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.AttributionControl({
compact: true
}));
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
watchPosition: true
}
}));
});
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
const button = document.getElementById('bt_pitch');
function switchLayer(layer) {
const layerId = layer.target.id;
map.setStyle('https://geoserveis.icgc.cat/contextmaps/' + layerId + '.json');
}
function canviaPerspectiva() {
const pitch = parseInt(map.getPitch());
pitch == 60 ? pitch = 0 : pitch = pitch + 30;
map.easeTo({
'pitch': pitch
})
};
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
button.onclick = canviaPerspectiva;
</script>
</body>
</html>