Integration

Script-Tag-Einbindung

Diese Seite lädt das fertig gebaute Paket, das sich neben einer CMS- oder HTML-Seite hosten lässt. Die Einbindung erfolgt über ein Modul-Script-Tag und ein Kartenelement.

Lokale Entwicklung: pnpm demo:standalone baut das Paket und kopiert es für diese Demo.

Die gesamte Integration

any-page.html

<script type="module" src="/map0/map0.js"></script>

<map0-viewer
  config-src="/configs/environment-map.json"
  style="height: 520px">
</map0-viewer>

map0-viewer über npm installieren und anschließend den Ordner node_modules/map0-viewer/dist auf den Webserver kopieren.

Alternativ kann eine bestimmte Version vom CDN geladen werden. Die Einstiegsdatei lädt ihre Module und den MapLibre-Worker aus demselben Ordner:

from a CDN

<script type="module"
        src="https://cdn.jsdelivr.net/npm/map0-viewer@0.3.0/dist/map0.js"
></script>

unpkg.com/map0-viewer@0.3.0/dist/map0.js liefert denselben Tarball aus. So oder so die exakte Version pinnen: Das ist ein 0.x-Release und kann sich ohne Deprecation-Pfad ändern.

Beim Selbst-Hosten landet Folgendes auf dem Webserver:

map0.js: die Einstiegsdatei des Viewers, die weitere Dateien bei Bedarf lädt
Die MapLibre-Module, darunter maplibre-gl-worker.mjs und maplibre-gl-shared.mjs, müssen neben der Einstiegsdatei bleiben
Konfigurationen können separat gehostet oder in ein CMS-Feld eingebettet werden

Modul-Script verwenden. Das Paket wird als ES-Module ausgeliefert. Das Script-Tag benötigt type="module", damit der Browser es laden kann.

Das Element von der Seite aus steuern

Nach dem Laden stellt das Element eine API bereit und löst DOM-Events aus, die die umgebende Seite verwenden kann:

any-page.js

const viewer = document.querySelector('map0-viewer');

viewer.addEventListener('map0:ready', () => {
  const api = viewer.api;
  api.setLayerVisibility('zoning', false);
  api.zoomToLayer('districts');
});

viewer.addEventListener('map0:error', (event) => console.warn(event.detail));