Embedding the Lanelet2 viewer

Two ways in, both on this page. Full notes in EMBEDDING.md.

1 · An iframe, driven by postMessage

For hosts that can place a URL but not run a bundler — a wandb HTML panel, a notebook cell, a dashboard, a docs page.

<iframe src="embed.html?theme=dark&background=%2311141a"></iframe>
frame.contentWindow.postMessage({ type: 'lanelet2.load', osm }, '*')

Pass your panel's own colour rather than transparent: a browser may composite a frame onto an opaque base whatever the framed document says, and Chromium does. True transparency is for the element, below.

2 · The element, in your own document

For hosts that run your JavaScript — a Foxglove panel extension, a React app. No iframe, no message plumbing, the full API on element.viewer, and background="transparent" that really is transparent — the gradient behind this map belongs to the page, not to the viewer.

<script type="module" src="viewer.js"></script>
<lanelet2-viewer src="map.osm" theme="auto" layers="lanelet_fill,bound"></lanelet2-viewer>