<html>
<head>
<meta charset='utf-8' />
<title>Exemple terrenys i MapICGC GL JS</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='ICGC5M' type='radio' name='rtoggle' value='ICGC5M checked='checked' />
<label for='ICGC5M'>Terrain ICGC 5m / Catalunya</label><br />
<input id='WORLD30M' type='radio' name='rtoggle' value='WORLD30M' />
<label for='WORLD30M'>Terrain 30m / World</label>
</div>
<div id="map"></div>
<script>
async function initMap() {
const data = await mapicgcgl.Config.getConfigICGC();
const map = new mapicgcgl.Map({
container: "map",
style: data.Styles.ORTO,
center: [0.973374, 42.168171],
zoom: 16.69,
maxZoom: 19,
hash: true,
pitch: 82,
bearing: -59.7,
});
map.on("load", () => {
map.addFullscreenControl()
map.addNavigationControl()
map.addAttributionControl({ compact: true });
map.addGeolocateControl(
{
positionOptions: {
enableHighAccuracy: true,
},
trackUserLocation: true,
}
);
map.addTerrainICGC(data.Terrains.ICGC5M);
map.setSky()
})
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
const layerId = layer.target.id;
console.log('layer', layerId)
map.addTerrainICGC(data.Terrains[layerId]);
}
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
}
initMap();
</script>
</body>
</html>