snippets/js_maplibre_terrain


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

map.addSource('hillshading', {
  "type": "raster-dem",
  "tiles": [
    "https://osmhacktw.github.io/terrain-rgb/tiles/{z}/{x}/{y}.png"
  ],
  "tileSize": 256,
  "maxzoom": 12
});
map.setTerrain({ 'source': 'hillshading', 'exaggeration': 1.5 });

map.addLayer({
  "id": "hillshading",
  "type": "hillshade",
  "source": "hillshading",
  "minzoom": 6
});

map.on('load', function () {
  document.getElementById('slider').addEventListener('input', function (e) {
    console.log(e.target.value);
    map.setPaintProperty(
      'hillshading', 
      'hillshade-illumination-direction', 
      parseInt(e.target.value)
    );
  });
});