pixel.map · Embeddable Widget

pixel.map Widget — Varianten & Einbau

Vierzehn Konfigurationen des <pixelmap-widget> Embeds — kuratierte POIs, kuratierte Touren, beides kombiniert, Kategorie-Filter, eine kompakte Einbettung, ein statischer Hero, eine cluster-freie englische Variante, alle Inhaltstypen gemeinsam, eine DataCycle-Sammlung, ein Kategorien-/Zeitfenster-Filter für Unterkünfte und Events, Erlebnisse mit Buchungs-Absprung, ein Absprung, der die Auswahl mitnimmt, Touren nach Kategorie und die große Karte als Overlay. Jede Karte zeigt den fertig gerenderten Widget und den exakten Einbau-Code dazu.

Varianten

Vierzehn Einbindungs-Varianten

POI-only (kuratiert)

Zeigt eine handverlesene Auswahl von rund 20 realen POIs rund um Velden am Wörthersee via poi-ids, mit kinematischem Fly-in von der Kärnten-Übersicht auf die POI-Bounding-Box.

Nur Touren (kuratiert)

Ausschließlich fünf kuratierte Touren (Laufen, Wandern, Rad) via tour-ids — keine POIs. Start-Marker plus Donut-Cluster, Tippen öffnet Routenlinie und Tour-Popup.

POIs + Touren (kuratiert)

Die gleichen kuratierten POIs und Touren gemeinsam auf einer Karte — ein gemischtes Donut-Cluster-System für beide Content-Typen, mit Fly-in-Reveal auf die gemeinsame Bounding-Box.

Kategorie-Filter (Gastronomie)

Breiter, regionsweiter Filter über die Kategorie „Gastronomie" (categories, L1-UUID) statt einer kuratierten Auswahl — zeigt alle passenden POIs im gesamten Tenant-Gebiet. Bewusst ohne Fly-in/Fit-Zoom als Kontrast zu den kuratierten Varianten.

Kompakt

Gleiche kuratierte POI-Auswahl wie Variante 1, aber in einer schmalen Zelle mit reduzierter Höhe (height="320px") — für Sidebar- oder Karten-Widget-Einbau.

Statischer Hero

Nicht-interaktiv (interactive="false"): kein Pan/Zoom, keine Popups — die ganze Karte ist ein klickbares Bild, das via cta-href in die volle pixel.map linkt. Mit Fly-in-Reveal als kinematischer Teaser.

Ohne Cluster · Englisch

Dieselbe kuratierte Auswahl, aber ohne Donut-Clustering (cluster="false") — jeder POI ist als Einzelmarker sichtbar — auf Englisch (locale="en") und mit eigenem Button-Text (cta-label).

Inhaltstypen: Ausflüge · Unterkünfte · Events

Alle drei Inhaltstypen auf einer Karte (content-types="pois,accommodations,events"): eigene Marker-Silhouetten je Typ, Unterkunfts-Popups mit Ab-Preis und Sternen, Event-Popups mit den nächsten Terminen (Zeitfenster per event-window wählbar, Standard: 7 Tage).

Inhaltssammlung aus DataCycle

Eine in DataCycle gepflegte Sammlung/gespeicherte Suche als Kurations-Quelle (collection="<endpoint>"): die Redaktion kuratiert in DataCycle, das Embed folgt bei jedem Aufruf automatisch — keine ID-Listen im Embed-Code. Die Sammlungs-IDs filtern die gewählten Inhaltstypen (hier: Veranstaltungen).

Nur Hotels · Bühne am Wochenende

Kategorien-Filter je Inhaltstyp (accommodation-categories/event-categories, UUID-Listen wie categories — sie implizieren ihren Typ) plus wählbares Event-Zeitfenster (event-window="weekend" statt des fixen 7-Tage-Fensters; auch today, tomorrow, next7 oder ein Bereich 2026-09-01..2026-09-15). Terminliste im Popup und Karte zeigen dasselbe Fenster.

Alle Inhaltstypen mit Links im Popup

Der vierte Inhaltstyp (content-types="…,experiences"): geführte Touren, Kurse und Aktivitäten mit eigener Marker-Silhouette und Anbieter-Zeile. Links im Popup sind seit 0.21.0 Wahl je Inhaltstyp über booking-cta — diese Einbettung nennt alle vier: Ausflugsziele, Veranstaltungen und Unterkünfte verlinken auf die Seite der Region, Erlebnisse in ihre TOSC-Buchungsstrecke (reine Links, es wird nichts von dort geladen). Ohne booking-cta hat jedes Popup nur „Auf großer Karte ansehen".

Auswahl mitnehmen (CTA)

Fünf kuratierte POIs und zwei Touren — und der Absprung „Auf großer Karte ansehen“ nimmt diese Kuration mit (cta-scope="selection", seit 0.14.0). Ohne das Attribut (Standard filters) reist nur der Filterzustand mit und die große Karte zeigt den vollen Bestand. Genauso wandert eine collection mit; die große Karte löst sie selbst auf. Dort benennt eine Pille die mitgebrachte Auswahl und gibt sie mit einem Klick wieder frei. ⚠ Die große Karte ist dabei fail-open, das Embed fail-closed: Lässt sich eine Sammlung dort nicht auflösen, zeigt sie alles plus einen Hinweis statt einer leeren Karte.

Und es geht wieder zurück (seit 0.17.0): Der Absprung nimmt Adresse und Titel dieser Seite mit, und die große Karte zeigt oben ein „Zurück zu …“. Auf dem Desktop schließt sie dabei ihren eigenen Tab — diese Seite steht danach genau so da, wie Sie sie verlassen haben, samt Scrollstand. Am Telefon führt der Link auf diese Seite zurück. Dafür ist kein Attribut nötig: Hat die Karte auf Ihrer Seite eine Sprungmarke — bei TYPO3-Einbettungen mit Rahmen bringt die Seite sie von selbst mit —, landet Ihr Gast direkt bei der Karte; hat sie keine, beginnt die Seite oben. Zurück kommt er so oder so. Kampagnen-Parameter (utm_* und Click-IDs) bleiben unterwegs, damit die Rückkehr in Ihrer Statistik kein neuer Kampagnenbesuch wird.

Touren nach Kategorie

Alle Wandertouren der Region über tour-categories="tour.hiking" statt einer ID-Liste — die Redaktion pflegt nichts nach, neue Touren erscheinen von selbst. Seit 0.14.0 sind beide Wertformen gültig und mischbar: der Kategorie-Schlüssel wie hier, oder die DataCycle-Kennung derselben Kategorie (a5c9e922-92e8-4635-8074-18089380f971 = „Wandern"), die der Kategorie-Picker der TYPO3-Extension schreibt. Ein Wert unterhalb der obersten Ebene steigt auf seine oberste Kategorie auf, weil eine Tour nur diese trägt. Der Schlüssel kommt ohne Kategoriebaum aus; eine Kennung lädt ihn nach.

Große Karte als Overlay

cta-target="overlay": „Auf großer Karte ansehen", die Popup-Details und die Hero-Fläche öffnen die volle pixel.map als Dialog über dieser Seite statt in einem neuen Tab; „Zurück zur Seite" in der Karte, Escape oder ein Klick daneben schließen ihn. Voraussetzung: der Origin dieser Seite steht in widget.embedOrigins des Mandanten (Config-App) — sonst öffnet das Widget wie bisher einen Tab und nennt den fehlenden Origin in der Konsole.