Beispielanwendung

Eine vollständige Karte, die gegen den Live-Dienst läuft. Kopieren, als .html speichern, im Browser öffnen.

Nur mit Token

Der Map Server verlangt einen Token. Ohne Token bleibt die Karte leer. Ein Token im Quelltext einer Webseite ist öffentlich. Sprechen Sie deshalb mit uns, bevor Sie eine Browserkarte auf den Map Server setzen, siehe Zugriff auf die Dienste.

Vektorkarte mit MapLibre GL JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>pixel.map — Beispiel</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css"
    />
    <style>
      html, body, #karte { margin: 0; height: 100%; }
    </style>
  </head>
  <body>
    <div id="karte"></div>
    <script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
    <script>
      const karte = new maplibregl.Map({
        container: 'karte',
        style: 'https://tiles.pixelmap.at/styles/pp-street/style.json',
        center: [14.3053, 46.6247], // Klagenfurt
        zoom: 12,
      });
      karte.addControl(new maplibregl.NavigationControl());
    </script>
  </body>
</html>

Der Style bringt alles mit, was die Karte braucht — Kachelquellen, Ebenen, Schriften, Sprites. Sie tragen nur die Style-URL ein.

Einen eigenen Kachelsatz dazunehmen

Wenn Sie einen Kachelsatz zusätzlich einblenden wollen, richten Sie ihn über sein TileJSON ein. Dann übernimmt MapLibre Zoomgrenzen und Attribution automatisch:

karte.on('load', () => {
  karte.addSource('hoehenlinien', {
    type: 'vector',
    url: 'https://tiles.pixelmap.at/data/contour.json',
  });
  karte.addLayer({
    id: 'hoehenlinien',
    type: 'line',
    source: 'hoehenlinien',
    'source-layer': 'contour',
    paint: { 'line-color': '#a0704a', 'line-width': 0.8 },
  });
});

url statt tiles verwenden

Der Quelle das TileJSON zu geben (url: '…/contour.json') ist besser, als das Kachelmuster selbst einzutragen (tiles: ['…/{z}/{x}/{y}.pbf']): Zoom­grenzen, Ausdehnung und Attribution kommen dann vom Dienst und bleiben richtig, wenn sich dort etwas ändert.

Der Wert von source-layer steht nicht im TileJSON-Kopf, sondern in vector_layers — er ist der Name der Ebene innerhalb der Kachel und muss genau stimmen, sonst zeichnet MapLibre nichts und meldet nichts.

Rasterkarte ohne Vektorunterstützung

Für Clients, die keine Vektorkarten zeichnen — etwa Leaflet oder ältere Anwendungen:

L.tileLayer('https://tiles.pixelmap.at/styles/pp-street/{z}/{x}/{y}.png', {
  maxZoom: 20,
  attribution: '© OpenStreetMap-Mitwirkende, pixel.map',
}).addTo(karte);

Die @2x-Variante liefert Kacheln für Bildschirme mit hoher Pixeldichte: …/{z}/{x}/{y}@2x.png.

Welche Styles und Kachelsätze es gibt

# Zahlen: Stand 14.09.2026 — beide Indizes wachsen mit dem Bestand
curl -H "Authorization: Bearer <IHR-TOKEN>" "https://tiles.pixelmap.at/styles.json"   # 48 Styles, ~6 kB
curl -H "Authorization: Bearer <IHR-TOKEN>" "https://tiles.pixelmap.at/data.json"     # 26 Kachelsätze, ~14 MB (!)

Zur Größe von data.json und zur Wahl des richtigen Namens: Datenquellen.