Niederschlagsradar-Animation

// Precipitation radar: nowcast tiles (15-minute steps, 3 hours) as an animation over the map.
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 });
const AUTH = { headers: { Authorization: 'Bearer ' + TOKEN } };

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

const API = 'https://api.mapx.at/v1';
const map = new maplibregl.Map({ transformRequest, container: 'map', style: API + '/styles/streets', center: [13.3, 47.6], zoom: 6.5 });
map.addControl(new maplibregl.NavigationControl());
let times = [], timer = null;

function zeigen(i) {
  const t = times[i];
  document.getElementById('zeit').value = i;
  document.getElementById('info').textContent = `Radar-Nowcast ${t} (UTC), Quelle: GeoSphere Austria, CC BY 4.0`;
  // one layer per time step, only the selected one is visible: tiles are already loaded when playing
  times.forEach((_, k) => map.setLayoutProperty('radar-' + k, 'visibility', k === i ? 'visible' : 'none'));
}

function abspielen() {
  const btn = document.getElementById('play');
  if (timer) { clearInterval(timer); timer = null; btn.textContent = 'Play'; return; }
  btn.textContent = 'Pause';
  timer = setInterval(() => zeigen((Number(document.getElementById('zeit').value) + 1) % times.length), 700);
}

map.on('load', async () => {
  const tj = await (await fetch(`${API}/weather/tiles/rr_nowcast.json`, AUTH)).json();
  times = tj['mapx:time'].times; // 15-Minuten-Schritte (UTC)
  document.getElementById('zeit').max = times.length - 1;
  times.forEach((t, k) => {
    map.addSource('radar-' + k, {
      type: 'raster', tileSize: 512, maxzoom: 10,
      tiles: [tj['mapx:time'].template.replace('{time}', t)],
      attribution: 'Wetter: GeoSphere Austria, CC BY 4.0',
    });
    map.addLayer({ id: 'radar-' + k, type: 'raster', source: 'radar-' + k, layout: { visibility: 'none' }, paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 } });
  });
  zeigen(0);
});
document.getElementById('play').addEventListener('click', abspielen);
document.getElementById('zeit').addEventListener('input', (e) => zeigen(Number(e.target.value)));

<!doctype html>
<html lang="de">
<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>
<button id="play">Abspielen</button> <label>Schritt <input id="zeit" type="range" min="0" max="11" value="0"></label>
<div id="map"></div>
<p id="info">Wird geladen …</p>
<script>
// Precipitation radar: nowcast tiles (15-minute steps, 3 hours) as an animation over the map.
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 });
const AUTH = { headers: { Authorization: 'Bearer ' + TOKEN } };

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

const API = 'https://api.mapx.at/v1';
const map = new maplibregl.Map({ transformRequest, container: 'map', style: API + '/styles/streets', center: [13.3, 47.6], zoom: 6.5 });
map.addControl(new maplibregl.NavigationControl());
let times = [], timer = null;

function zeigen(i) {
  const t = times[i];
  document.getElementById('zeit').value = i;
  document.getElementById('info').textContent = `Radar-Nowcast ${t} (UTC), Quelle: GeoSphere Austria, CC BY 4.0`;
  // one layer per time step, only the selected one is visible: tiles are already loaded when playing
  times.forEach((_, k) => map.setLayoutProperty('radar-' + k, 'visibility', k === i ? 'visible' : 'none'));
}

function abspielen() {
  const btn = document.getElementById('play');
  if (timer) { clearInterval(timer); timer = null; btn.textContent = 'Play'; return; }
  btn.textContent = 'Pause';
  timer = setInterval(() => zeigen((Number(document.getElementById('zeit').value) + 1) % times.length), 700);
}

map.on('load', async () => {
  const tj = await (await fetch(`${API}/weather/tiles/rr_nowcast.json`, AUTH)).json();
  times = tj['mapx:time'].times; // 15-Minuten-Schritte (UTC)
  document.getElementById('zeit').max = times.length - 1;
  times.forEach((t, k) => {
    map.addSource('radar-' + k, {
      type: 'raster', tileSize: 512, maxzoom: 10,
      tiles: [tj['mapx:time'].template.replace('{time}', t)],
      attribution: 'Wetter: GeoSphere Austria, CC BY 4.0',
    });
    map.addLayer({ id: 'radar-' + k, type: 'raster', source: 'radar-' + k, layout: { visibility: 'none' }, paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 } });
  });
  zeigen(0);
});
document.getElementById('play').addEventListener('click', abspielen);
document.getElementById('zeit').addEventListener('input', (e) => zeigen(Number(e.target.value)));
</script>
</body>
</html>