Skip to main content

Quickstart

Embed a Kaleidr map in two lines.

1. Add the loader​

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js is tiny — it ships no MapLibre and no React. It lazy-loads the product bundle you actually use from cdn.kaleidr.com/embed/v1/<product>.js.

2. Drop an element​

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

Or mount imperatively​

Attach AI chat to a map you already have on the page:

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google / Leaflet instance
});

handle.setCamera({ center: [-0.12, 51.5], zoom: 11 });
// later: handle.destroy();

Kaleidr.mount(target, opts) returns a handle synchronously; the product bundle loads in the background and queued calls flush on load.

Next​