Widget einbinden

<pixelmap-widget> ist eine eigenständige Karte, die Sie in jede Seite stellen können: CMS-Artikel, Landingpage, statische Site. Sie bringt ihre eigenen Stile mit (Shadow DOM), lädt erst beim Scrollen und hijackt nie das Seiten-Scrollen.

Es gibt zwei Wege hinein. Nehmen Sie den ersten, wenn Sie HTML in ein CMS einfügen; den zweiten, wenn Ihre Seite ohnehin einen Bundler hat.

Script-Tag (CMS, statische Seite)

Zwei Schnipsel, sonst nichts — kein Build, kein npm.

<script type="module" src="https://maps.pixelmap.at/widget/pixelmap-widget.js"></script>

<pixelmap-widget
  config-url="https://maps.pixelmap.at/demo/config.json"
  cta-href="https://maps.pixelmap.at/demo/"
  height="420px"
></pixelmap-widget>

Das Script-Tag steht einmal pro Seite, das Element so oft Sie wollen.

npm (Bundler, Framework)

npm i @innoex/pixelmap-widget maplibre-gl

import '@innoex/pixelmap-widget';

<pixelmap-widget
  config-url="https://maps.pixelmap.at/demo/config.json"
  cta-href="https://maps.pixelmap.at/demo/"
  height="420px"
></pixelmap-widget>

maplibre-gl (^5 || ^6) ist eine Peer-Dependency und wird bewusst nicht mitgeliefert — sonst hätte Ihre Anwendung am Ende zwei Kopien von MapLibre.

Ein Handgriff kommt dazu

Beim Bundler-Weg verdrahten Sie den MapLibre-Worker einmal selbst. Das ist nicht optional, und die Fehlermeldung beim Weglassen nennt den Handgriff nicht. Die Anleitung steht unter Einbau in ein CMS oder Framework.

Woher die Werte kommen

1. config-url zeigt auf die config.json Ihrer Karte: https://maps.pixelmap.at/<kürzel>/config.json. Ohne sie rendert nichts — es ist die einzige Pflichtangabe.

2. cta-href ist das Ziel des Knopfes „Auf großer Karte ansehen”, also in aller Regel Ihre volle Karte: https://maps.pixelmap.at/<kürzel>/. Ohne diese Angabe erscheint der Knopf gar nicht. Soll die große Karte Ihre Auswahl zeigen statt des ganzen Bestands, setzen Sie zusätzlich cta-scope="selection" (ab 0.14.0) — siehe Die Auswahl mitnehmen.

3. height ist optional (Vorgabe 400px). Sie können die Höhe stattdessen per CSS setzen, auch responsiv:

   pixelmap-widget { height: 420px; max-width: 640px; }

Den fertigen Schnipsel gibt es auf Knopfdruck

Im Editor Ihrer Karte erzeugt die Sektion Einbetten den kompletten Tag — mit Ihrem Kürzel, den bei Ihnen aktiven Inhaltstypen, Kategorien, Höhe, CTA-Link und Sprache, als HTML- und als npm-Variante. Abtippen müssen Sie nichts. Die Sektion erscheint nach dem ersten Deploy Ihrer Karte, weil die config-url vorher nicht antwortet.

Was das Widget von selbst tut

• Es lädt erst, wenn es sichtbar wird. Karte, Daten und MapLibre entstehen beim ersten Sichtkontakt. Mehrere Widgets weit unten auf einer langen Seite kosten bis dahin nichts.
• Es bleibt in seiner Box. Alles rendert in einem eigenen Shadow DOM: Ihr Seiten-CSS kann die Karte nicht zerschießen, und die Kartenstile laufen nicht in Ihre Seite aus.
• Es nimmt Ihnen das Scrollen nicht weg. Zoomen verlangt Strg/⌘ + Rad am Desktop und zwei Finger am Touchgerät; bei einem einfachen Wischen erscheint ein Hinweis statt eines Zoomsprungs.
• Es braucht kein zusätzliches CSS. Das MapLibre-Stylesheet steckt im Widget.

Weiter

• Attribute — jede Einstellung mit Vorgabewert
• Beispiele — Unterkünfte, Veranstaltungen, Erlebnisse, Touren
• Einbau in ein CMS oder Framework — TYPO3, Astro, Worker-Verdrahtung
• Versionen — welche Fassung Sie einbinden