Address validation

Validation compares the four address parts with the BEV address register. The result has a status (match, corrected, ambiguous, not_found), the list of deviations and either the matching address with coordinates or a list of candidates. The pre-filled address has a typo on purpose.

Press Validate.

Code

// Address validation: check a typed address against the official register (BEV) and show the corrected result.
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 map = new maplibregl.Map({ transformRequest, container: 'map', style: 'https://api.mapx.at/v1/styles/streets', center: [13.8, 47.7], zoom: 6.5 });
map.addControl(new maplibregl.NavigationControl());
const out = document.getElementById('ergebnis');
let marker;

document.getElementById('pruefen').addEventListener('click', async () => {
  const p = new URLSearchParams();
  for (const k of ['street', 'housenumber', 'postcode', 'place']) p.set(k, document.getElementById(k).value);
  try {
    const res = await fetch('https://api.mapx.at/v1/address/validate?' + p, AUTH);
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const r = await res.json(); // status: match, corrected, ambiguous, not_found
    const hit = r.address ? { text: r.address, at: r.coordinates } : r.candidates?.[0] && { text: r.candidates[0].full_address, at: r.candidates[0].coordinates };
    out.textContent = `Status: ${r.status}` + (r.deviations?.length ? `, deviations: ${r.deviations.map((d) => `${d.field} ${d.input} > ${d.expected}`).join('; ')}` : '') + (hit ? `, ${r.address ? 'address' : 'first candidate'}: ${hit.text}` : '');
    marker?.remove();
    if (hit) { marker = new maplibregl.Marker().setLngLat(hit.at).addTo(map); map.flyTo({ center: hit.at, zoom: 16 }); }
  } catch (e) { out.textContent = 'Error: ' + e.message; }
});

Complete HTML file

Save and open in a browser. All it needs is MapLibre GL JS 4.7.1 and pmtiles 3.2.1 from a CDN, plus your public token (replace YOUR_TOKEN), no build.

<!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>
<input id="street" type="search" value="Haubtplatz" aria-label="Street"><input id="housenumber" type="search" value="1" aria-label="House number" style="min-width:5rem;flex:0 0 6rem"><input id="postcode" type="search" value="3390" aria-label="Postcode" style="min-width:6rem;flex:0 0 7rem"><input id="place" type="search" value="Melk" aria-label="Place"><button id="pruefen" type="button">Validate</button>
<div id="map"></div>
<p id="ergebnis">Press Validate.</p>
<script>
// Address validation: check a typed address against the official register (BEV) and show the corrected result.
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 map = new maplibregl.Map({ transformRequest, container: 'map', style: 'https://api.mapx.at/v1/styles/streets', center: [13.8, 47.7], zoom: 6.5 });
map.addControl(new maplibregl.NavigationControl());
const out = document.getElementById('ergebnis');
let marker;

document.getElementById('pruefen').addEventListener('click', async () => {
  const p = new URLSearchParams();
  for (const k of ['street', 'housenumber', 'postcode', 'place']) p.set(k, document.getElementById(k).value);
  try {
    const res = await fetch('https://api.mapx.at/v1/address/validate?' + p, AUTH);
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const r = await res.json(); // status: match, corrected, ambiguous, not_found
    const hit = r.address ? { text: r.address, at: r.coordinates } : r.candidates?.[0] && { text: r.candidates[0].full_address, at: r.candidates[0].coordinates };
    out.textContent = `Status: ${r.status}` + (r.deviations?.length ? `, deviations: ${r.deviations.map((d) => `${d.field} ${d.input} > ${d.expected}`).join('; ')}` : '') + (hit ? `, ${r.address ? 'address' : 'first candidate'}: ${hit.text}` : '');
    marker?.remove();
    if (hit) { marker = new maplibregl.Marker().setLngLat(hit.at).addTo(map); map.flyTo({ center: hit.at, zoom: 16 }); }
  } catch (e) { out.textContent = 'Error: ' + e.message; }
});
</script>
</body>
</html>

APIs used

Address GET api.mapx.at/v1/address/validate

Address autofill in a form Reverse geocoding