Editor reference

product="editor" mounts Kaleidr's on-map editing tools in your page. The editor creates its own map inside the mount target and draws its panels over it. It runs in your document, not in an iframe.

The embedded editor keeps its work in the page's memory. Nothing is saved, exported or published from the embed, and there is no change callback. A reload or handle.destroy() discards the edits.


Key	A publishable key (`kld_pk_live_…`). Required.
Scope	`design`. New keys carry it by default.
Plan	Every plan, Free included.
Renders in	Your page.
Persistence	None.
Instances	One per page.
CSP	See the editor block in Content Security Policy.

For a walkthrough, see Attach the editor.

Scope

Included	Not included
Text placed on the map	The Data tab and dataset upload
Image: images placed on the map	Studio's design catalog of sample maps and style types
Marker	The AI panel
Popup	The 3D model library
Background: the backdrop behind the map	Share and publish
Layer: the basemap's labels, 3D buildings, light and terrain	Projects: saving, opening and listing maps
Design: select a basemap feature, a category or a region, and restyle it	Sign-in
Legend: label and legend settings

The left column is the editor's rail, in order. Design in the embed is the restyling tool; Studio's design catalog is not included.

Mount

const handle = Kaleidr.mount('#editor', {
  product: 'editor',
  publishableKey: 'kld_pk_live_…',
  styleId: 'kaleidr-night',
  center: [-0.1276, 51.5072],
  zoom: 12,
});

<kaleidr-map product="editor" publishable-key="kld_pk_live_…"
             style-id="kaleidr-night" center="-0.1276,51.5072" zoom="12"
             style="display:block; height:640px"></kaleidr-map>

The mount target must have a height. The editor is 100% of its width and height. The editor adds its elements to the target and does not remove elements that are already there, so use an empty target.

Options

Mount option	Attribute	Type	Default	Required	Description
`product`	`product`	`'editor'`	none	yes	Selects the editor.
`publishableKey`	`publishable-key`	string	none	yes	A `kld_pk_…` key with the `design` scope. A server key (`kld_sk_…`) is refused in the browser before any request is made.
`styleId`	`style-id`	string	your organization's default basemap, else `kaleidr-morning`	no	A style id such as `kaleidr-night`, or a full style URL. See style ids. Fixed at mount.
`center`	`center`	`[longitude, latitude]`; the attribute is `"longitude,latitude"`	`[0, 0]`	no	Opening center.
`zoom`	`zoom`	number	`2`	no	Opening zoom. Works without `center`.
`pitch`	`pitch`	number, degrees	`0`	no	Opening tilt.
`bearing`	`bearing`	number, degrees	`0`	no	Opening rotation.
`theme`	`theme`	object, or a JSON object string	none	no	Up to 17 named keys. See Theme keys. Read at mount only.
`apiBase`	`api-base`	URL	`https://api.kaleidr.com/inference-api`	no	Where the session exchange is sent. Must include the `/inference-api` path. You do not need this in production.
`tileBase`	`tile-base`	URL	`https://tile.kaleidr.com`	no	The host that style ids are resolved against. You do not need this in production.
`base`	`base`	URL	`https://cdn.kaleidr.com`	no	Origin the SDK loads `editor.js` from. Only the origin is used, and only the origins listed under The base override are honored.
`enabled`	`flag`	boolean	none	no	Per-mount arm of the enable gate.

shareId, map, mapTarget, contained and viewerBase have no effect on an editor mount. There is no styleUrl option: pass a URL as styleId.

Basemap

The editor picks its basemap in this order:

styleId, when you pass one.
Your organization's default basemap, when one is set.
kaleidr-morning.

The basemap cannot change after mount, and handle.setStyle is not supported on the editor. To change it, destroy the editor and mount it again. That discards the edits.

Camera

center is longitude first.
Each value may be a number or a numeric string.
A mount option that is not a finite number is ignored, the default is used, and the console shows, for example, [kaleidr:editor] ignored zoom: abc is not a finite value — using 2 instead.
A camera attribute on the element that is not a number is dropped with no message, and the default is used.

Theme keys

theme is an object whose keys come from the list below. Every value is a string holding a CSS value. Keys that are not on the list, and values that are not non-empty strings, are ignored without a message: fontSizeBase: 14 does nothing, fontSizeBase: '14px' works.

Key	Styles	Example
`brandColor`	Primary buttons, focus rings, the active tool.	`'#0b5fff'`
`brandColorHover`	Hover state of `brandColor`.	`'#0847c2'`
`brandColorOn`	Text and icons on top of `brandColor`.	`'#ffffff'`
`textColor`	Body and heading text.	`'#111827'`
`textColorMuted`	Secondary text such as captions.	`'#6b7280'`
`surfaceColor`	Fill of cards and dialogs.	`'#ffffff'`
`borderColor`	Borders and dividers.	`'#e5e7eb'`
`glassBg`	Background of the translucent panels: the sidebar and its flyouts. Pass a solid color for a flat look.	`'rgba(255,255,255,0.8)'`
`glassBlur`	The `backdrop-filter` of those panels.	`'blur(12px)'`
`cardRadius`	Corner radius of cards and dialogs.	`'12px'`
`buttonRadius`	Corner radius of buttons and chips.	`'8px'`
`listRadius`	Corner radius of list rows.	`'6px'`
`fontPrimary`	Main `font-family`.	`'"Inter", system-ui, sans-serif'`
`fontMono`	Monospace `font-family`.	`'ui-monospace, monospace'`
`fontSizeBase`	Base font size.	`'14px'`
`sidebarRailWidth`	Width of the sidebar rail.	`'64px'`
`quickActionsWidth`	Width of the floating quick-actions toolbar.	`'320px'`

Kaleidr.mount('#editor', {
  product: 'editor',
  publishableKey: 'kld_pk_live_…',
  theme: {
    brandColor: '#0b5fff',
    brandColorOn: '#ffffff',
    fontPrimary: '"Inter", system-ui, sans-serif',
    buttonRadius: '8px',
  },
});

Behavior:

The theme is not a bag of arbitrary CSS custom properties. A key such as '--my-color' is ignored.
The values are applied to the document's root element while the editor is mounted, so the editor's dialogs pick them up wherever they render. When the editor is destroyed, the previous values are restored.
The theme is read once, at mount. handle.setTheme is not supported on the editor, and changing the theme attribute of a mounted element logs a warning and does nothing.
A theme given as a string must be JSON that starts with {. Anything else is ignored with a console warning.

Handle

Kaleidr.mount returns the handle synchronously. See the handle matrix for every product.

Member	On editor
`handle.product`	`'editor'`
`handle.setCamera(camera)`	Moves the editor's map.
`handle.setTheme(theme)`	Not supported. Logs a warning and does nothing.
`handle.setStyle(style)`	Not supported. Logs a warning and does nothing.
`handle.destroy()`	Removes the editor and its map, restores the theme values, and stops the session renewals. Discards the edits.

The handle has no map member. Your page cannot reach the editor's map object.

`setCamera(camera)`

handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 1000 });

Field	Type	Description
`center`	`[number, number]`	Longitude, latitude.
`zoom`	number	Zoom level.
`pitch`	number	Tilt in degrees.
`bearing`	number	Rotation in degrees.
`duration`	number	Animation length in milliseconds. Omitted or `0` jumps with no animation.

Calls made while the editor is still loading are queued and run once it has started.

Element attributes after mount

On a mounted <kaleidr-map product="editor">, changing center, zoom, pitch or bearing moves the map with no animation. Changing style-id, theme or any other attribute has no effect on the editor.

Lifecycle

Event	Result
`Kaleidr.mount(...)` or the element is connected	The session exchange and the load of `editor.js` run at the same time. The editor starts when both have finished.
`handle.destroy()` or the element is removed	The editor and its edits are gone.
The element is moved to another parent	It is destroyed and mounted again. The edits are gone.
A second editor is mounted while one exists	Not supported. Destroy the first one before mounting another.
The page reloads	The edits are gone.

What runs in your page

Unlike the iframe products, the editor affects the embedding page:

It loads editor.js, a bundle of several megabytes, from https://cdn.kaleidr.com.
It adds its stylesheets to the document from JavaScript.
It requests the basemap's style, tiles, sprites and fonts from https://tile.kaleidr.com. The requests for the style, the sprites and the fonts carry your publishable key as a key query parameter, which is how the basemap host recognizes your page; the requests for tile data carry no key. The session token is never put in a URL.
It starts web workers from blob: URLs for the map.
It sets theme values on the document's root element while mounted.

The matching Content Security Policy directives are in Content Security Policy.

Console messages

Message	Meaning
`[kaleidr:editor] [editor-embed] attach() requires an { apiKey }`	No key was passed. Nothing renders.
`[kaleidr:editor] kaleidr session exchange failed (<status>)`	The session exchange was refused. The reason is in the response, visible in the Network tab. A 403 carries its code in the `detail` field, for example `insufficient_scope` when the key lacks `design`. A 429 carries its code in the `error` field.
A CORS error for `…/sdk/sessions`, then a `[kaleidr:editor]` fetch error	The key is unknown or revoked, or the page's origin is not in the key's allowed origins.
`[kaleidr:editor] Kaleidr: a server key (kld_sk_…) must never be used in the browser — it is a standing secret. …`	A server key was passed. No request is made.
`[kaleidr:editor] ignored <field>: <value> is not a finite value — using <default> instead.`	A camera option passed to `Kaleidr.mount` was not a number. An element attribute never produces it.
`[kaleidr:editor] <message>`	The editor's map reported an error, such as a style or tile that failed to load.
`[kaleidr] theme string must be JSON …; named string themes are not supported. Ignored.`	`theme` was a string that is not a JSON object.
`[kaleidr] theme JSON parse failed (…); ignored.`	`theme` was malformed JSON.
`[kaleidr] setTheme() is not supported on product "editor" — the call is a no-op. …`	`setTheme` was called, or the `theme` attribute changed after mount.
`[kaleidr] setStyle() is not supported on product "editor" — the call is a no-op. …`	`setStyle` was called.

Not available

Saving, exporting or publishing what was made.
A change event, a ready event or an error callback.
The map object, custom layers, or reading what the person drew.
Changing the basemap or the theme after mount.
More than one editor on a page.

Attach the editor
The loader, kaleidr.js
The <kaleidr-map> element
Embed a published map, for maps that persist

Scope​

Mount​

Options​

Basemap​

Camera​

Theme keys​

Handle​

setCamera(camera)​

Element attributes after mount​

Lifecycle​

What runs in your page​

Console messages​

Not available​

Related​