Wetter-Overlay

// Weather overlay: temperature (or precipitation, wind ...) as raster tiles over the map, hour selectable.
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 = [];

async function laden() {
  const param = document.getElementById('param').value; // temperature, precipitation, wind ...
  const tj = await (await fetch(`${API}/weather/tiles/${param}.json`, AUTH)).json();
  times = tj['mapx:time'].times; // available hours (UTC)
  const slider = document.getElementById('stunde');
  slider.max = times.length - 1;
  zeigen(param, Number(slider.value));
}

function zeigen(param, i) {
  const t = times[Math.min(i, times.length - 1)];
  document.getElementById('info').textContent = `${param}, ${t} (UTC), Quelle: GeoSphere Austria, CC BY 4.0`;
  if (map.getLayer('wetter')) map.removeLayer('wetter');
  if (map.getSource('wetter')) map.removeSource('wetter');
  map.addSource('wetter', {
    type: 'raster', tileSize: 512, maxzoom: 11, // smooth fields: fewer, larger tiles keep the request count low
    tiles: [`${API}/weather/tiles/${param}/${t}/{z}/{x}/{y}.png`],
    attribution: 'Wetter: GeoSphere Austria, CC BY 4.0',
  });
  map.addLayer({ id: 'wetter', type: 'raster', source: 'wetter', paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 } });
}

map.on('load', laden);
document.getElementById('param').addEventListener('change', () => { document.getElementById('stunde').value = 0; laden(); });
document.getElementById('stunde').addEventListener('input', (e) => zeigen(document.getElementById('param').value, 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>
<label>Größe <select id="param"><option value="temperature">Temperatur</option><option value="precipitation">Niederschlag</option><option value="wind">Wind</option><option value="cloud">Bewölkung</option></select></label> <label>Stunde <input id="stunde" type="range" min="0" max="23" value="0"></label>
<div id="map"></div>
<p id="info">Wird geladen …</p>
<script>
// Weather overlay: temperature (or precipitation, wind ...) as raster tiles over the map, hour selectable.
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 = [];

async function laden() {
  const param = document.getElementById('param').value; // temperature, precipitation, wind ...
  const tj = await (await fetch(`${API}/weather/tiles/${param}.json`, AUTH)).json();
  times = tj['mapx:time'].times; // available hours (UTC)
  const slider = document.getElementById('stunde');
  slider.max = times.length - 1;
  zeigen(param, Number(slider.value));
}

function zeigen(param, i) {
  const t = times[Math.min(i, times.length - 1)];
  document.getElementById('info').textContent = `${param}, ${t} (UTC), Quelle: GeoSphere Austria, CC BY 4.0`;
  if (map.getLayer('wetter')) map.removeLayer('wetter');
  if (map.getSource('wetter')) map.removeSource('wetter');
  map.addSource('wetter', {
    type: 'raster', tileSize: 512, maxzoom: 11, // smooth fields: fewer, larger tiles keep the request count low
    tiles: [`${API}/weather/tiles/${param}/${t}/{z}/{x}/{y}.png`],
    attribution: 'Wetter: GeoSphere Austria, CC BY 4.0',
  });
  map.addLayer({ id: 'wetter', type: 'raster', source: 'wetter', paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 } });
}

map.on('load', laden);
document.getElementById('param').addEventListener('change', () => { document.getElementById('stunde').value = 0; laden(); });
document.getElementById('stunde').addEventListener('input', (e) => zeigen(document.getElementById('param').value, Number(e.target.value)));
</script>
</body>
</html>