Editor — mount the map editor
product="editor" mounts the Kaleidr map editor in your page. It creates and
drives its own MapLibre map inside the element (an attach/in-proc doorway,
not an iframe).
const handle = Kaleidr.mount('#editor', {
publishableKey: 'kld_pk_live_…',
product: 'editor',
styleId: 'kaleidr-night', // catalog basemap id or a full style URL
// Omit it and the organization's stored default applies, falling back to
// kaleidr-morning when it has none.
});
The standalone embed runs the editor's client-side tools — the on-map editing surfaces mount over the basemap and edits live on the embed's in-memory spec (nothing is persisted). The AI-driven surfaces (map-design and the Control Tower) and the 3D model library aren't part of the standalone embed; they need a Kaleidr backend and host-served assets.
For a dev basemap, pass tileBase: 'https://tile-dev.kaleidr.com' — catalog
style ids then resolve against it instead of the production CDN.
See Attach the editor.
Basemap requests carry your key automatically
The editor creates its own MapLibre map, and Kaleidr basemaps are
key-authorized — tile.kaleidr.com refuses browser origins it doesn't know. The
embed therefore appends your publishable key to basemap requests for you, via
MapLibre's transformRequest:
// what the embed does internally — you don't write this
transformRequest: (url) =>
url.startsWith('https://tile.kaleidr.com/')
? { url: `${url}?key=kld_pk_live_…` }
: { url };
Two consequences worth knowing:
- Your key's allowed origins must include the page's origin. A key minted
without your site's origin returns
429 tile_access_restrictedon every tile. Add origins at kaleidr.com/api-keys. - Only Kaleidr tile URLs are rewritten. If you pass your own
styleUrlon a different host, the embed leaves those requests untouched — your key is never attached to a third-party origin.