Integration

Lazy loading

Before you scroll near the map, this page loads only the initial 34 KB of map0. MapLibre, the config and map tiles load as the map approaches the viewport.

Try it

Open the network panel of your developer tools, reload this page, and look at what arrives: map0.js and one chunk. Then scroll down. As the map approaches the viewport, the engine, MapLibre, its stylesheet, the config and finally the tiles are fetched.

↓ keep scrolling space for an article or form above the map

Loaded on demand: map loading starts 300 px before the element reaches the viewport. Completion time depends on the connection and data sources.

What loads at each stage

Page load	~34 KB gz for the custom element and Lit
Map in view	+ ~317 KB gz for the engine, MapLibre and its stylesheet
On demand	Capabilities parsing, proj4, PMTiles and dialogs, depending on the tools used

Several embedded maps share the initial 34 KB and the MapLibre files. Each map loads its own config and data when it approaches the visible area.

Controlling it

Lazy is the default. The attribute mirrors <img loading>, and it lives on the element rather than in the JSON config for a simple reason: it decides whether the config is fetched at all.

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>

Maps inside hidden tabs or accordions wait until they are shown. Call load() to start loading explicitly:

host-page.js

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