Was eure IT wissen muss.

Einbauwege

pixel.map kommt als TYPO3-Extension für die aktuellen LTS-Versionen von TYPO3 — welche genau, steht in der Entwickler-Dokumentation — und steht danach als eigenes Inhaltselement „Karte" zur Verfügung, das die Redaktion wie jeden anderen Inhalt auf eine Seite setzt.

Was die Karte zeigt, stellt die Redaktion im Backend selbst zusammen: Inhaltstypen, Kategorien sowie einzelne Orte, Touren oder Veranstaltungen, per Auswahl aus den Daten der eigenen Destination. Die Vorschau im Seitenmodul fasst die Einstellungen zusammen und warnt, wenn ein Wert nicht passt, etwa eine Kategorie, die es in den Destinationsdaten nicht mehr gibt.

Für Websites mit eigenem Frontend (headless) liefert dieselbe Extension die fertige Kartenkonfiguration als JSON, und das Frontend setzt daraus die Karte zusammen. Die Redaktion arbeitet dabei genau gleich.

Für Astro-Sites gibt es eine Komponente: eine Zeile in der Seite und eine in der Astro-Konfiguration, die die Worker-Anbindung einschaltet. Die Karte lädt erst, wenn sie in die Nähe des sichtbaren Bereichs kommt, und ohne JavaScript erscheint ein Hinweis statt einer leeren Fläche. Jede andere Site bindet die Karte als ein Tag ein. Das Tag genügt: Bundle, Worker und Karte kommen von unserem Host. Wer das Paket in ein eigenes Frontend bündelt, liefert die Worker-Datei vom selben Ursprung wie das Bundle aus und hält MapLibre in dem Versionsbereich, den das Paket vorgibt.

Einbau und erste Einrichtung macht einmal eure Agentur oder IT — die Extension kommt aus einer privaten Registry, nicht aus dem öffentlichen TYPO3-Verzeichnis. Das ist Integrationsarbeit, nicht eine Zeile HTML, und Releases werden angesagt. Danach pflegt eure Redaktion die Karte selbst.

Einbau in ein CMS oder Framework — Entwickler-Dokumentation (Öffnet in einem neuen Tab)

So sieht der Einbau dieser Karte in Astro aus — erzeugt aus derselben Konfiguration, die die Karte im nächsten Abschnitt lädt:

// astro.config.mjs
import pixelmap from '@pixelpoint/pixelmap-astro/integration';
export default defineConfig({ integrations: [pixelmap()] });

// src/pages/karte.astro
import PixelmapWidget from '@pixelpoint/pixelmap-astro/PixelmapWidget.astro';
<PixelmapWidget
  configUrl="https://maps.pixelmap.at/demo/config.json"
  ctaHref="https://maps.pixelmap.at/demo/"
  poiIds={[
    "dc65d7f5-4002-4fa7-a969-d264f00b0eaa",
    "307a0fcf-c225-47ea-9514-f32735f7a2e4",
    "ceb22f66-dd0a-4c44-89d9-f9cd19e7ed51",
    "da857dad-74ee-483f-b1f2-8a12456be495",
    "6ec485eb-88f3-4110-b802-892ba4929d62",
    "c9d01fb9-1fa3-4912-b48c-22782e0a8d5f",
    "efbe56be-0627-494a-ae9f-8014f4f8c2ae",
    "c216d066-c32c-420e-8f28-84a2a1f158f9",
    "15b5e048-d0a4-45b3-9356-3dc2e1270fc1",
    "d2442a6c-8847-42b0-8b44-c0cc693895b2"
  ]}
  interactive={false}
  reveal="fly-in"
/>

Was die Karte eure Seite kostet

Keine Zahl auf dieser Seite ist geschrieben. Die Karte darunter ist ein echter Einbau über denselben Weg, den eure Site nehmen würde; öffnet ihr sie, misst euer Browser, was sie geladen hat, und zeigt es hier an. Vor dem Klick lädt die Karte nichts.

Zwei Zeilen, weil zwei Herkünfte: der Code der Karte kommt von dieser Site und lässt sich genau messen. Konfiguration, Daten und Symbole kommen von unseren Servern — deren Größe zeigt euer Browser erst, wenn der Server die Messung erlaubt; bis dahin steht dort ein Strich und keine erfundene Null. Die Kartenkacheln selbst lädt ein Hintergrundprozess, den diese Seite nicht mitmessen kann — das sagen wir, statt eine Zahl zu erfinden.

Hosts, Cookies, Einwilligung

Die Karte spricht ausschließlich mit Hosts unter pixelmap.at — die Liste oben ist gemessen, nicht behauptet. Sie setzt keine Cookies und keinen Browserspeicher.

Deshalb braucht sie keine Einwilligung. Legt sie nicht hinter euren Consent-Banner: auf Kundenseiten überlagert er sonst die Karte, ohne dass es dafür einen Grund gäbe. Für eure DSGVO-Prüfung heißt das: keine Cookies, keine Einwilligung, und die Karte spricht nur mit den hier genannten Hosts.

Woher die Inhalte kommen

Eure Inhalte bleiben in dataCycle — ein Redaktionsort, nicht zwei. Karte und Ergebnisliste werden stündlich abgeglichen; öffnet ein Gast ein Ziel, holt pixel.map dessen Einzelheiten im selben Moment. Es gibt keinen Export, keinen Import und keine zweite Pflege.

Wenn etwas nicht stimmt

In TYPO3 sieht eure Redaktion es zuerst: die Vorschau im Seitenmodul warnt, wenn eine Einstellung nicht mehr zu den Daten passt. Das ist eine Hilfe, keine Garantie — diese Warnung setzt voraus, dass die Destinationsdaten schon im Cache liegen.

Kann die Karte ihre Konfiguration nicht laden, zeigt sie eine Meldung statt einer leeren Fläche. Bleiben nach dem Laden die Kacheln aus, meldet sie auch das — einmal, nach einer kurzen Frist — und diese Site zeigt dann statt der Karte wieder das Bild mit einem Hinweis. Bleiben die Daten aus, gilt dasselbe.

Updates

Das Widget ist versioniert. Neue Versionen werden angekündigt und kommen nie ungefragt. Bei Sites mit eigenem Frontend entscheidet euer Frontend, wann eine Neuerung beim Gast ankommt — nicht wir.

Jeder Eintrag in unseren News sagt, was ihr tun müsst, wenn überhaupt etwas.

Mehrere Marken aus einem Bau

Ein Bau, eine Konfiguration je Mandant, eine Deploy-Kette. Eine Destination mit mehreren Marken bekommt mehrere Karten aus einer Quelle — jede mit eigenem Logo, eigener Akzentfarbe und eigener Domäne, alle mit denselben Daten.

Barrierefreiheit

Diese Website erfüllt WCAG 2.1 AA. Das Widget ist eine visuelle Ergänzung, und wir sagen genau, was es kann: Per Tastatur erreichbar sind die Karte selbst — Pfeiltasten und Plus/Minus bewegen und zoomen —, der Attributions-Knopf, der Knopf zur großen Karte und in einem offenen Popup dessen Schließen-Knopf.

Nicht erreichbar sind Marker und Cluster; Popups lassen sich per Tastatur nicht öffnen. Deshalb steht auf dieser Site alles, was die Karte zeigt, auch als Text daneben — und deshalb behaupten wir für das Widget selbst kein WCAG-Niveau.

Was hier nicht steht

Endpunkte, Parameter und Grenzwerte stehen bewusst nicht hier, sondern in der Entwickler-Dokumentation.

Entwickler-Dokumentation (Öffnet in einem neuen Tab)