Referencia del Editor

product="editor" monta las herramientas de edición de mapas de Kaleidr en tu página. El editor crea su propio mapa dentro del destino de montaje y muestra sus paneles sobre él. Se ejecuta en tu documento, no en un iframe.

El editor integrado conserva el trabajo únicamente en la memoria de la página. Desde el elemento integrado no se guarda, exporta ni publica nada, y no existe un callback de cambios. Recargar la página o llamar a handle.destroy() descarta las modificaciones.

Clave	Una clave publicable (kld_pk_live_…). Obligatoria.
Permiso	design. Las claves nuevas lo incluyen por defecto.
Plan	Todos los planes, incluido Free.
Se muestra en	Tu página.
Persistencia	Ninguna.
Instancias	Una por página.
CSP	Consulta la sección del Editor en Content Security Policy.

Para un recorrido guiado, consulta Integrar el editor.

Alcance

Incluido	No incluido
Texto colocado sobre el mapa	Pestaña Datos y carga de conjuntos de datos
Imagen: imágenes colocadas sobre el mapa	Catálogo de Studio con mapas de ejemplo y tipos de estilo
Marcador	Panel de IA
Ventana emergente	Biblioteca de modelos 3D
Fondo: superficie situada detrás del mapa	Compartir y publicar
Capa: etiquetas del mapa base, edificios 3D, iluminación y terreno	Proyectos: guardar, abrir y enumerar mapas
Diseño: seleccionar un elemento del mapa base, una categoría o una región y cambiar su estilo	Inicio de sesión
Leyenda: configuración de etiquetas y leyenda

La columna izquierda representa, por orden, la barra de herramientas del Editor. Diseño en el editor integrado es la herramienta para cambiar estilos; no incluye el catálogo de diseños de Studio.

Montaje

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>

El destino del montaje debe tener altura. El editor ocupa el 100 % de su anchura y altura. Añade sus elementos dentro del destino y no elimina los que ya están presentes; por tanto, utiliza un contenedor vacío.

Opciones

Opción de montaje	Atributo	Tipo	Valor predeterminado	Obligatorio	Descripción
product	product	'editor'	ninguno	sí	Selecciona el editor.
publishableKey	publishable-key	cadena	ninguno	sí	Clave kld_pk_… con permiso design. Una clave de servidor kld_sk_… se rechaza en el navegador antes de enviar solicitudes.
styleId	style-id	cadena	mapa base predeterminado de tu organización o kaleidr-morning	no	Identificador de estilo, como kaleidr-night, o URL completa de estilo. Consulta identificadores de estilo. Queda fijo al montar.
center	center	[longitude, latitude]; el atributo es "longitude,latitude"	[0, 0]	no	Centro inicial.
zoom	zoom	número	2	no	Zoom inicial. Funciona sin center.
pitch	pitch	número, grados	0	no	Inclinación inicial.
bearing	bearing	número, grados	0	no	Rotación inicial.
theme	theme	objeto o cadena JSON de un objeto	ninguno	no	Hasta 17 claves identificadas. Consulta Claves de tema. Se lee solo al montar.
apiBase	api-base	URL	https://api.kaleidr.com/inference-api	no	Dirección a la que se envía el intercambio de sesión. Debe incluir /inference-api. No hace falta en producción.
tileBase	tile-base	URL	https://tile.kaleidr.com	no	Servidor contra el que se resuelven los identificadores de estilo. No hace falta en producción.
base	base	URL	https://cdn.kaleidr.com	no	Origen desde el que SDK carga editor.js. Solo se utiliza el origen y únicamente se aceptan los indicados en La sustitución de base.
enabled	flag	booleano	ninguno	no	Control individual de la puerta de habilitación.

shareId, map, mapTarget, contained y viewerBase no tienen efecto al montar el Editor. No existe la opción styleUrl: pasa una URL mediante styleId.

Mapa base

El Editor elige el mapa base en este orden:

1. styleId, si lo proporcionas.
2. El mapa base predeterminado de tu organización, si hay uno configurado.
3. kaleidr-morning.

El mapa base no puede cambiar después del montaje, y handle.setStyle no es compatible con el Editor. Para cambiarlo, destruye el editor y vuelve a montarlo. Esto descarta las modificaciones.

Cámara

• center utiliza primero la longitud.
• Cada valor puede ser un número o una cadena numérica.
• Si una opción de montaje no es un número finito, se ignora, se utiliza el valor predeterminado y la consola muestra, por ejemplo, [kaleidr:editor] ignored zoom: abc is not a finite value — using 2 instead.
• Los atributos de cámara del elemento que no sean números se descartan sin mensaje y se utiliza el valor predeterminado.

Claves de tema

theme es un objeto cuyas claves pertenecen a la lista siguiente. Cada valor es una cadena que contiene un valor CSS. Las claves que no figuren en la lista y los valores que no sean cadenas no vacías se ignoran sin mensaje: fontSizeBase: 14 no hace nada, pero fontSizeBase: '14px' sí funciona.

Clave	Qué configura	Ejemplo
brandColor	Botones principales, anillos de foco y herramienta activa.	'#0b5fff'
brandColorHover	Estado de desplazamiento del cursor sobre brandColor.	'#0847c2'
brandColorOn	Texto e iconos mostrados encima de brandColor.	'#ffffff'
textColor	Texto del cuerpo y encabezados.	'#111827'
textColorMuted	Texto secundario, como leyendas.	'#6b7280'
surfaceColor	Relleno de tarjetas y diálogos.	'#ffffff'
borderColor	Bordes y separadores.	'#e5e7eb'
glassBg	Fondo de paneles translúcidos, barra lateral y paneles desplegables. Usa un color sólido si deseas un aspecto plano.	'rgba(255,255,255,0.8)'
glassBlur	Valor de backdrop-filter de esos paneles.	'blur(12px)'
cardRadius	Radio de las esquinas de tarjetas y diálogos.	'12px'
buttonRadius	Radio de las esquinas de botones y etiquetas.	'8px'
listRadius	Radio de las esquinas de las filas de listas.	'6px'
fontPrimary	font-family principal.	'"Inter", system-ui, sans-serif'
fontMono	font-family monoespaciada.	'ui-monospace, monospace'
fontSizeBase	Tamaño base de la fuente.	'14px'
sidebarRailWidth	Anchura de la barra lateral de herramientas.	'64px'
quickActionsWidth	Anchura de la barra flotante de acciones rápidas.	'320px'

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

Comportamiento:

• El tema no es un conjunto arbitrario de propiedades CSS personalizadas. Una clave como '--my-color' se ignora.
• Los valores se aplican al elemento raíz del documento mientras el Editor está montado; así, los diálogos los reciben dondequiera que se muestren. Cuando se destruye el Editor, se restauran los valores anteriores.
• El tema se lee una sola vez, al montar. handle.setTheme no es compatible con el Editor; modificar el atributo theme de un elemento ya montado registra una advertencia y no produce efecto.
• Si theme es una cadena, debe contener JSON que comience por {. Cualquier otra cosa se ignora con una advertencia en consola.

Controlador

Kaleidr.mount devuelve inmediatamente el controlador. Consulta la matriz de controladores de todos los productos.

Miembro	En el Editor
handle.product	'editor'
handle.setCamera(camera)	Mueve el mapa del Editor.
handle.setTheme(theme)	No compatible. Registra una advertencia y no hace nada.
handle.setStyle(style)	No compatible. Registra una advertencia y no hace nada.
handle.destroy()	Elimina el Editor y su mapa, restaura los valores del tema y detiene las renovaciones de sesión. Descarta los cambios.

El controlador no tiene ningún miembro map. Tu página no puede acceder al objeto de mapa del Editor.

setCamera(camera)

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

Campo	Tipo	Descripción
center	[number, number]	Longitud, latitud.
zoom	número	Nivel de zoom.
pitch	número	Inclinación en grados.
bearing	número	Rotación en grados.
duration	número	Duración de la animación en milisegundos. Si se omite o vale 0, el cambio es inmediato.

Las llamadas realizadas mientras el Editor sigue cargando se ponen en cola y se ejecutan cuando haya comenzado.

Atributos del elemento después del montaje

En un <kaleidr-map product="editor"> ya montado, cambiar center, zoom, pitch o bearing mueve el mapa sin animación. Modificar style-id, theme o cualquier otro atributo no tiene efecto.

Ciclo de vida

Evento	Resultado
Kaleidr.mount(...) o se conecta el elemento	El intercambio de sesión y la carga de editor.js se ejecutan simultáneamente. El Editor comienza cuando ambos finalizan.
handle.destroy() o se elimina el elemento	Se eliminan el Editor y sus modificaciones.
Se mueve el elemento a otro elemento padre	Se destruye y se monta de nuevo. Se pierden los cambios.
Se monta un segundo Editor mientras existe otro	No se admite. Destruye el primero antes de montar otro.
Se recarga la página	Se pierden los cambios.

Qué se ejecuta en tu página

A diferencia de los productos en iframe, el Editor afecta a la página que lo integra:

• Carga editor.js, un paquete de varios megabytes, desde https://cdn.kaleidr.com.
• Añade sus hojas de estilo al documento mediante JavaScript.
• Solicita el estilo, las teselas, los sprites y las fuentes del mapa base desde https://tile.kaleidr.com. Las solicitudes de estilo, sprites y fuentes incluyen tu clave publicable como parámetro de consulta key, para que el servidor del mapa base reconozca tu página. Las solicitudes de teselas no llevan clave. El token de sesión nunca se introduce en una URL.
• Inicia trabajadores web desde URL blob: para el mapa.
• Mientras está montado, define valores de tema en el elemento raíz del documento.

Las directivas correspondientes figuran en Content Security Policy.

Mensajes de consola

Mensaje	Significado
[kaleidr:editor] [editor-embed] attach() requires an { apiKey }	No se proporcionó clave. No se muestra nada.
[kaleidr:editor] kaleidr session exchange failed (<status>)	Se rechazó el intercambio de sesión. La respuesta muestra la causa en la pestaña Network. Un 403 lleva su código en detail, por ejemplo insufficient_scope si la clave no tiene design. Un 429 lo lleva en error.
Error CORS para …/sdk/sessions, seguido de error fetch de [kaleidr:editor]	La clave es desconocida o fue revocada, o el origen de la página no está permitido.
[kaleidr:editor] Kaleidr: a server key (kld_sk_…) must never be used in the browser — it is a standing secret. …	Se proporcionó una clave de servidor. No se envía ninguna solicitud.
[kaleidr:editor] ignored <field>: <value> is not a finite value — using <default> instead.	Una opción de cámara pasada a Kaleidr.mount no era un número. Los atributos de elemento nunca generan este mensaje.
[kaleidr:editor] <message>	El mapa del Editor ha informado de un error, como el fallo al cargar un estilo o una tesela.
[kaleidr] theme string must be JSON …; named string themes are not supported. Ignored.	theme era una cadena que no contiene un objeto JSON.
[kaleidr] theme JSON parse failed (…); ignored.	theme contenía JSON mal formado.
[kaleidr] setTheme() is not supported on product "editor" — the call is a no-op. …	Se llamó a setTheme o se cambió el atributo theme después del montaje.
[kaleidr] setStyle() is not supported on product "editor" — the call is a no-op. …	Se llamó a setStyle.

No disponible

• Guardar, exportar o publicar el trabajo creado.
• Evento de cambios, evento de disponibilidad o callback de error.
• Objeto de mapa, capas personalizadas o lectura de lo que dibujó el usuario.
• Cambiar mapa base o tema después del montaje.
• Más de un Editor por página.

Relacionado

• Integrar el Editor
• El cargador kaleidr.js
• El elemento <kaleidr-map>
• Integrar un mapa publicado, para mapas que se conservan