<html>
<head>
<meta charset='utf-8' />
<title>Compara terrenys</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
}
#map {
height: 100%;
width: 100%;
background-color: #ffffff
}
#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);
}
</style>
</head>
<body>
<div id='menu'>
<input id='icgc-dem' type='radio' name='rtoggle' value='icgc-dem' checked='checked'>
<label for='icgc-dem'>Terrain ICGC 2m</label>
<input id='mapbox-dem' type='radio' name='rtoggle' value='mapbox-dem'>
<label for='mapbox-dem'>Terrain Mapbox</label>
</div>
<div id="map"></div>
<script>
mapboxgl.accessToken ='XXXXXXXXXXXXXXXXXX'; // cap token de Mapbox.com
const map = new mapboxgl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/icgc_orto_hibrida.json',
center: [1.71611, 42.23818],
zoom: 14.03,
attributionControl: false,
pitch: 85,
bearing:-74.4,
hash: true
});
map.on('load', function () {
map.addControl(new mapboxgl.AttributionControl({ compact: true }));
map.addControl(new mapboxgl.NavigationControl());
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
'tileSize': 512,
'maxzoom': 14
});
map.addSource('icgc-dem', {
'type': 'raster-dem',
"tiles": [
"https://tilemaps.icgc.cat/tileserver/tileserver.php/terreny_icgc_2m_rgb/{z}/{x}/{y}.png"
],
'tileSize': 512,
'maxzoom': 14
});
map.setTerrain({
'source': 'icgc-dem',
'exaggeration': 1
});
map.addLayer({
'id': 'sky',
'type': 'sky',
'paint': {
'sky-type': 'atmosphere',
'sky-atmosphere-sun': [0.0, 0.0],
'sky-atmosphere-sun-intensity': 15
}
});
for (var i = 0; i < map.getStyle().layers.length; i++) {
if (map.getStyle().layers[i].id.indexOf("place") != -1) {
map.setLayoutProperty(map.getStyle().layers[i].id, "visibility", "none");
}
}
}); //fi onload
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
const button = document.getElementById('bt_pitch');
function switchLayer(layer) {
const layerId = layer.target.value;
map.setTerrain({ 'source': layerId, 'exaggeration': 1 });
}
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>