<html >
<head >
<meta charset="utf-8" / >
<title >Compara terrenys </title >
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" / >
<link href="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.css" rel="stylesheet" / >
<script src="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.js" > </script >
<style >
body {
margin: 0;
}
#map {
position: absolute;
width: 100%;
height: 100%;
background: white;
}
#menu {
position: absolute;
z-index: 1000;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
top: 5px;
left: 5px;
border-radius: 7px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
#menu label {
margin-right: 10px;
}
</style >
</head >
<body >
<div id="menu" >
<input id="icgc-dem" type="radio" name="rtoggle" value="icgc-dem" checked >
<label for="icgc-dem" >Terrain ICGC 5 m </label >
<input id="aws-dem" type="radio" name="rtoggle" value="aws-dem" >
<label for="aws-dem" >AWS Terrain </label >
</div >
<div id="map" > </div >
<script >
const map = new maplibregl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/styles/mapa-base-orto-hibrida.json',
center: [1.71611, 42.23818],
zoom: 14.03,
pitch: 85,
bearing: -74.4,
hash: true,
attributionControl: false
});
map.on('load', () = > {
map.addControl(new maplibregl.NavigationControl());
map.addControl(new maplibregl.AttributionControl({
compact: true
}));
// DEM ICGC (Terrain RGB)
map.addSource('icgc-dem', {
type: 'raster-dem',
encoding: 'mapbox',
tiles: [
'https://geoserveis.icgc.cat/servei/catalunya/contextmaps-terreny-5m-rgb/wmts/{z}/{x}/{y}.png'
],
tileSize: 512,
maxzoom: 16
});
// AWS Terrain Tiles (Mapzen Terrarium)
map.addSource('aws-dem', {
type: 'raster-dem',
encoding: 'terrarium',
tiles: [
'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'
],
tileSize: 256,
maxzoom: 15
});
// Terreny inicial
map.setTerrain({
source: 'icgc-dem',
exaggeration: 1
});
// Cel
map.addLayer({
id: 'sky',
type: 'sky',
paint: {
'sky-type': 'atmosphere',
'sky-atmosphere-sun': [0, 0],
'sky-atmosphere-sun-intensity': 15
}
});
// Amaga els topònims
map.getStyle().layers.forEach(layer = > {
if (layer.id.includes("place")) {
map.setLayoutProperty(layer.id, 'visibility', 'none');
}
});
});
// Canvi de model del terreny
document.querySelectorAll('input[name="rtoggle"]').forEach(input = > {
input.addEventListener('change', (e) = > {
map.setTerrain({
source: e.target.value,
exaggeration: 1
});
});
});
</script >
</body >
</html >