Static Image fürs Exposé

// Static image: click the map, get a ready-made PNG of that place for a listing, e-mail or PDF. No JavaScript map needed on the target page.
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/streets', center: [15.3294, 48.2272], zoom: 14 });
map.addControl(new maplibregl.NavigationControl());
const img = document.getElementById('bild'), style = document.getElementById('style'), url = document.getElementById('url');
let at = [15.3294, 48.2272]; // Melk

function update() {
  const pin = `pin-l+e11d48(${at[0].toFixed(5)},${at[1].toFixed(5)})`;
  const u = `https://api.mapx.at/v1/static/${style.value}/${encodeURIComponent(pin)}/${at[0].toFixed(5)},${at[1].toFixed(5)},${Math.round(map.getZoom())}/480x300.webp`;
  img.src = u + '?access_token=' + TOKEN; url.textContent = u; // images cannot send headers, so the token goes in the query
}
map.on('click', (e) => { at = [e.lngLat.lng, e.lngLat.lat]; update(); });
style.addEventListener('change', update);
update();

<!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>Stil <select id="style"><option value="satellite">Luftbild</option><option value="streets">Karte</option><option value="outdoors">Gelände</option></select></label>
<div id="map"></div>
<p><img id="bild" alt="Vorschau des Static Image" width="480" height="300" style="max-width:100%;height:auto;border-radius:8px"><br><code id="url" style="word-break:break-all;font-size:0.75rem"></code></p>
<script>
// Static image: click the map, get a ready-made PNG of that place for a listing, e-mail or PDF. No JavaScript map needed on the target page.
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/streets', center: [15.3294, 48.2272], zoom: 14 });
map.addControl(new maplibregl.NavigationControl());
const img = document.getElementById('bild'), style = document.getElementById('style'), url = document.getElementById('url');
let at = [15.3294, 48.2272]; // Melk

function update() {
  const pin = `pin-l+e11d48(${at[0].toFixed(5)},${at[1].toFixed(5)})`;
  const u = `https://api.mapx.at/v1/static/${style.value}/${encodeURIComponent(pin)}/${at[0].toFixed(5)},${at[1].toFixed(5)},${Math.round(map.getZoom())}/480x300.webp`;
  img.src = u + '?access_token=' + TOKEN; url.textContent = u; // images cannot send headers, so the token goes in the query
}
map.on('click', (e) => { at = [e.lngLat.lng, e.lngLat.lat]; update(); });
style.addEventListener('change', update);
update();
</script>
</body>
</html>