Integration

Script tag embed

This page loads the built package, ready to host alongside a CMS or HTML page. Include it with a module script tag and a map element.

Local development: run pnpm demo:standalone to build and copy the package used by this demo.

The whole 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>

Install map0-viewer from npm, then copy the node_modules/map0-viewer/dist folder to your web server.

Alternatively, load a specific release from a CDN. The entry loads its modules and MapLibre’s worker from the same folder:

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 serves the same tarball. Pin the exact version either way: this is a 0.x release and may change without a deprecation path.

Self-hosted, this is what ends up on your web server:

map0.js: the viewer entry, which loads the other files as needed
MapLibre’s modules, including maplibre-gl-worker.mjs and maplibre-gl-shared.mjs, must stay alongside the entry
Config files can be hosted separately or embedded in a CMS field

Use a module script. The package is distributed as ES modules. Include type="module" on the script tag so the browser can load it.

Talking to it from the page

Once loaded, the element exposes an API and emits DOM events that the surrounding page can use:

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));