3D terrain

// 3D terrain: mapx Terrain-RGB tiles via TileJSON as elevation source.
const TOKEN = 'YOUR_TOKEN'; // your public token (mx_pk_…) from https://account.mapx.at
// Adds the token to every request MapLibre makes to mapx.at (style, tiles, fonts, sprites), never to other hosts.
const transformRequest = (url) => ({ url: /^https:\/\/([\w-]+\.)?mapx\.at\//.test(url) ? url + (url.includes('?') ? '&' : '?') + 'access_token=' + TOKEN : url });

maplibregl.addProtocol('pmtiles', new pmtiles.Protocol().tile);

const map = new maplibregl.Map({
  transformRequest,
  container: 'map',
  style: 'https://api.mapx.at/v1/styles/satellite', // aerial imagery, draped over the terrain
  center: [12.694, 47.074], // Großglockner
  zoom: 12.5, pitch: 70, bearing: 20, maxPitch: 80,
});
map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));

map.on('load', () => {
  map.addSource('hoehe', { type: 'raster-dem', url: 'https://api.mapx.at/v1/tiles/dtm.json', tileSize: 512, encoding: 'mapbox' });
  map.setTerrain({ source: 'hoehe', exaggeration: 1.4 });
});

document.getElementById('ueberhoehung').addEventListener('input', (e) => {
  map.setTerrain({ source: 'hoehe', exaggeration: Number(e.target.value) });
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mapx Beispiel</title>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/pmtiles@3.2.1/dist/pmtiles.js"></script>
<style>html,body{margin:0;font:14px system-ui,sans-serif}#map{height:70vh}</style>
</head>
<body>
<label>Exaggeration <input id="ueberhoehung" type="range" min="1" max="3" step="0.1" value="1.4"></label>
<div id="map"></div>
<script>
// 3D terrain: mapx Terrain-RGB tiles via TileJSON as elevation source.
const TOKEN = 'YOUR_TOKEN'; // your public token (mx_pk_…) from https://account.mapx.at
// Adds the token to every request MapLibre makes to mapx.at (style, tiles, fonts, sprites), never to other hosts.
const transformRequest = (url) => ({ url: /^https:\/\/([\w-]+\.)?mapx\.at\//.test(url) ? url + (url.includes('?') ? '&' : '?') + 'access_token=' + TOKEN : url });

maplibregl.addProtocol('pmtiles', new pmtiles.Protocol().tile);

const map = new maplibregl.Map({
  transformRequest,
  container: 'map',
  style: 'https://api.mapx.at/v1/styles/satellite', // aerial imagery, draped over the terrain
  center: [12.694, 47.074], // Großglockner
  zoom: 12.5, pitch: 70, bearing: 20, maxPitch: 80,
});
map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));

map.on('load', () => {
  map.addSource('hoehe', { type: 'raster-dem', url: 'https://api.mapx.at/v1/tiles/dtm.json', tileSize: 512, encoding: 'mapbox' });
  map.setTerrain({ source: 'hoehe', exaggeration: 1.4 });
});

document.getElementById('ueberhoehung').addEventListener('input', (e) => {
  map.setTerrain({ source: 'hoehe', exaggeration: Number(e.target.value) });
});
</script>
</body>
</html>