Integration

Lazy Loading

Bevor die Karte in die Nähe des sichtbaren Bereichs kommt, lädt diese Seite nur die ersten 34 KB von map0. MapLibre, Konfiguration und Kartenkacheln werden beim Heranscrollen geladen.

Ausprobieren

Das Netzwerk-Panel der DevTools öffnen, diese Seite neu laden und nachsehen, was ankommt: map0.js und ein Chunk. Dann nach unten scrollen. Sobald sich die Karte dem Viewport nähert, werden Engine, MapLibre, dessen Stylesheet, die Config und schließlich die Kacheln geladen.

↓ weiterscrollen Platz für einen Artikel oder ein Formular oberhalb der Karte

Bei Bedarf geladen: Das Laden beginnt 300 px vor dem sichtbaren Bereich. Wie schnell die Karte fertig ist, hängt von der Verbindung und den Datenquellen ab.

Was zu welchem Zeitpunkt geladen wird

Seitenaufruf	~34 KB gz für das Custom Element und Lit
Karte in Sicht	+ ~317 KB gz für die Engine, MapLibre und dessen Stylesheet
Bei Bedarf	Capabilities-Verarbeitung, proj4, PMTiles und Dialoge, je nach genutzter Funktion

Mehrere eingebettete Karten teilen sich die ersten 34 KB und die MapLibre-Dateien. Jede Karte lädt ihre eigene Konfiguration und Daten, sobald sie in die Nähe des sichtbaren Bereichs kommt.

Steuerung

Lazy ist der Standard. Das Attribut folgt dem Vorbild von <img loading> und sitzt aus einem einfachen Grund am Element statt in der JSON-Config: Es entscheidet, ob die Config überhaupt geladen wird.

page.html

<!-- default: waits until it is nearly in view -->
<map0-viewer config-src="/configs/map.json"></map0-viewer>

<!-- above the fold, or a screenshot service: start immediately -->
<map0-viewer config-src="/configs/map.json" loading="eager"></map0-viewer>

Karten in ausgeblendeten Reitern oder Akkordeons warten, bis sie angezeigt werden. Mit load() lässt sich das Laden ausdrücklich starten:

host-page.js

document.querySelector('map0-viewer').load();