Skip to main content

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_restricted on every tile. Add origins at kaleidr.com/api-keys.
  • Only Kaleidr tile URLs are rewritten. If you pass your own styleUrl on a different host, the embed leaves those requests untouched — your key is never attached to a third-party origin.