<kaleidr-map> — the element
The declarative façade. Drop the element, set attributes; it mounts on connect and tears down on removal.
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>
Attributes
| Attribute | Products | Notes |
|---|---|---|
product | all (required) | chat | viewer | editor | tiles |
publishable-key | chat, editor, tiles | Publishable browser key (kld_pk_live_…); exchanged for a short-lived session at runtime. |
api-key | chat, editor, tiles | Deprecated alias for publishable-key; also accepts a legacy kld_live_… key. |
share-id / map-id | viewer | Published-map id. |
style-id | tiles, editor | Kaleidr basemap style id (or style URL for editor). |
map-target | chat | CSS selector of your host map element (see note). |
center | viewer, tiles, editor | lon,lat. |
zoom pitch bearing | viewer, tiles, editor | Numbers. |
theme | all | Named theme or token bag. |
doorway | all | iframe | attach escape hatch. |
base | all | CDN origin override. |
api-base | chat, editor | Platform API origin. |
flag | all | Per-element dormancy override. |
Give the element a height (inline style or CSS). Every product fills its
container; an iframe product inside an unsized container falls back to a
fixed 500px so it stays visible.
Live updates
center / zoom / pitch / bearing / theme are observed — change them and
the embed re-frames / re-skins without remounting.
Chat + map-target
Chat attaches to your live map, which a string attribute can't carry. Two ways to supply it:
- Imperative (recommended):
Kaleidr.mount(el, { product:'chat', publishableKey, map }). - Declarative: stash your map instance on the host element as
hostEl.__kaleidrMap__ = map, then pointmap-target="#host".
Without a map, chat runs headless (no map interactions).