Insertar un mapa publicado

Al terminar la guía tendrás en tu página un mapa creado en Kaleidr Studio, publicado y limitado a los sitios que elijas. Tu página podrá saber si se cargó correctamente. Funciona en todos los planes, incluido Free. Necesitas una cuenta Kaleidr para publicar, pero no una clave API.

Antes de empezar

Un mapa en Kaleidr Studio que quieras mostrar públicamente.
Una página que puedas editar. El elemento SDK requiere una etiqueta <script>; el iframe normal solo HTML.
Si aplicas una Política de seguridad de contenido, autoriza https://map-embed.kaleidr.com en los marcos y, para el elemento SDK, los scripts de https://cdn.kaleidr.com. Consulta Política de seguridad de contenido.
Un servidor HTTP, por ejemplo npx serve . en la carpeta de prueba.

Paso 1: Publicar el mapa

Abre el mapa en Studio y pulsa Publish. Se abre la página Publish & embed.
En Project status aparece Draft. Pulsa Go Live.

Resultado esperado: el estado cambia a Live, el botón pasa a llamarse Re-publish, aparece Unpublish y debajo se muestran el código de inserción y una vista previa.

Un mapa publicado muestra el estado guardado actualmente en Studio, no una copia congelada al pulsar Go Live. Studio guarda las modificaciones automáticamente, de modo que cualquier cambio posterior —incluido añadir un dataset— será público cuando se cargue de nuevo el mapa. No necesitas pulsar Re-publish. Re-publish registra una nueva versión publicada pero conserva el ID, enlace y código de inserción; los visitantes ven el mismo mapa antes y después.

Si necesitas editar un mapa publicado sin que los visitantes vean el trabajo en curso, pulsa Unpublish antes de modificarlo y publícalo de nuevo al terminar, o edita una copia separada. Anular la publicación detiene todos los embeds hasta que vuelvas a publicar.

La publicación incluye los datos que hayas subido. Los datasets y superposiciones de imagen del panel Data se muestran a los visitantes como las capas que configuraste. Lee Datos subidos en un mapa publicado antes de publicar información que no deba ser pública.

Paso 2: Copiar el código de inserción

La sección Embed code de Studio ofrece dos formatos.

Formato en Studio	Resultado	Cuándo elegirlo
iFrame	Un `<iframe>` que apunta al mapa publicado.	Cuando la página no puede ejecutar tus scripts (constructor web, bloque CMS, wiki) o solo necesitas mostrar el mapa.
Developer	El loader del SDK y un elemento `<kaleidr-map product="viewer">`.	Cuando controlas la página y quieres mover la cámara mediante código, superponer chat o gestionar el ciclo de vida del mapa en una aplicación de una sola página.

Elige un formato y pulsa Copy.

El formato iFrame:

<iframe
  src="https://map-embed.kaleidr.com/embed/YOUR_MAP_ID"
  width="100%"
  height="480"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; microphone; fullscreen; clipboard-write"
  title="Kaleidr map"
></iframe>

El formato Developer:

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js" async></script>
<kaleidr-map product="viewer" share-id="YOUR_MAP_ID"
  style="display:block;width:100%;height:480px;"></kaleidr-map>

YOUR_MAP_ID representa el ID que Studio introduce en el fragmento. Puede contener letras, números y ., _, ~ y -, hasta 100 caracteres. El mismo ID sirve en ambos formatos.

Ambos formatos incluyen la Kaleidr AI del mapa: el panel Ask Kaleidr cuando su Control Tower está activado, y el chat con IA en sus ventanas emergentes cuando Popup Window está activado. Consulta Kaleidr AI en un mapa publicado.

Paso 3: Añadirlo a la página y darle tamaño

Pega el fragmento donde debe aparecer el mapa.

Resultado esperado: aparece «Loading map…» y después el mapa en la vista guardada en Studio.

Reglas de tamaño:

Iframe normal: define width y height en el iframe como harías habitualmente.
Elemento SDK: define una altura. <kaleidr-map> usa display:block por defecto, pero el fragmento incluye style="display:block; height:480px" para Safari anterior a 16.4, donde de otro modo sería inline e ignoraría height. También puedes definir el tamaño mediante CSS:
```
kaleidr-map { display: block; height: 480px; }
```
El mapa ocupa todo el ancho del elemento. Si este no tiene altura al montarse, el mapa adopta 500 píxeles fijos y mantiene esa altura aunque luego cambies su tamaño. Un elemento dentro de una pestaña oculta o panel colapsado no tiene altura: móntalo cuando sea visible o asígnale una altura explícita.
Para altura adaptable, usa CSS que calcule una altura real: height:60vh, aspect-ratio:16/9 o una celda flex/grid.

Paso 4: Definir la cámara inicial (opcional)

El mapa se abre con la vista que guardó su autor. Se pueden guardar vistas diferentes para escritorio, tableta y móvil, o ajustar el mapa para que encuadre su contenido; en ese caso se elige la vista según el ancho y vuelve a encuadrarse si cambia el tamaño del iframe. Para abrir otra región, pasa una cámara. En center, el orden es longitud y después latitud.

En el elemento:

<kaleidr-map product="viewer" share-id="YOUR_MAP_ID"
             center="-0.1276,51.5072" zoom="12" pitch="45" bearing="-20"
             style="display:block; height:480px"></kaleidr-map>

En el iframe normal, añade la cámara a la URL como camera=longitude,latitude,zoom:

<iframe
  src="https://map-embed.kaleidr.com/embed/YOUR_MAP_ID?camera=-0.1276,51.5072,12&pitch=45&bearing=-20"
  width="100%" height="480" style="border:0;" loading="lazy"
  referrerpolicy="no-referrer-when-downgrade" allow="geolocation; microphone; fullscreen; clipboard-write"
  title="Kaleidr map"></iframe>

La cámara que pases prevalece sobre la vista guardada, incluidas las configuraciones por ancho de pantalla y el encuadre automático. Cada valor sustituye solo ese componente de la cámara; los que omitas conservan su valor original. Después de establecer una cámara desde la página, el mapa deja de encuadrarse automáticamente cuando cambia el tamaño. zoom se ignora si no pasas también center. pitch y bearing funcionan por separado.

Resultado esperado: el mapa se abre en la cámara indicada, conservando marcadores, capas y datos subidos.

Para mover la cámara después de cargar el mapa, móntalo desde JavaScript y conserva el objeto de control:

<div id="map" style="height:480px"></div>
<button id="paris">Paris</button>

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const handle = Kaleidr.mount('#map', {
    product: 'viewer',
    shareId: 'YOUR_MAP_ID',
  });

  document.getElementById('paris').addEventListener('click', () => {
    // duration is in milliseconds. Leave it out to jump with no animation.
    handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 800 });
  });
</script>

Aspectos importantes de setCamera:

Es un método del handle devuelto por Kaleidr.mount, no del elemento. document.querySelector('kaleidr-map').setCamera es undefined. Para mover un mapa montado como elemento, cambia sus atributos center, zoom, pitch o bearing; esto desplaza la vista sin animación.
Puedes llamar al método setCamera en cualquier momento después de que Kaleidr.mount devuelva el handle. Las llamadas antes de que el mapa del iframe esté listo se guardan y aplican cuando llegue kaleidr-embed:ready (paso 6); no tienes que esperar tú. Para elegir la vista inicial, usa las opciones de montaje.
Como la cámara inicial, esta opción prevalece sobre la vista guardada y desactiva el encuadre automático al cambiar el tamaño. Los campos omitidos conservan su valor actual.

Paso 5: Restringir los sitios que pueden mostrar el mapa (opcional)

Por defecto, un mapa publicado se muestra en cualquier sitio que conozca su ID. Para limitarlo:

En Studio, abre el mapa y elige Share. Abrir este diálogo publica el mapa si aún no lo estaba y crea un nuevo enlace compartido cada vez.
Abre la pestaña Embed.
Cambia la opción de Any domain a Specific domains.
Introduce un dominio por línea, por ejemplo:
```
example.com
blog.example.org
```
Haz clic fuera del campo. Studio guarda la lista y muestra Saved.

Resultado esperado: el mapa sigue apareciendo en los sitios listados. En los demás, el marco muestra «This map isn't allowed to render on this site. Please contact the map owner.».

Cómo se coteja la lista:

Introduce solo el nombre del host. Se ignora https:// al principio; no añadas rutas ni puertos.
Un dominio incluye sus subdominios: example.com permite example.com, www.example.com y shop.eu.example.com.
Para hacer pruebas locales mientras la lista esté activa, añade localhost.

Esta comprobación depende del referente

El mapa determina si un sitio está autorizado leyendo el referente enviado por el navegador al cargar el iframe. Si no llega ninguno, no se muestra un mapa restringido por dominio. Ocurre si:

la página envía Referrer-Policy: no-referrer o same-origin, como cabecera o etiqueta <meta name="referrer">;
el iframe incluye referrerpolicy="no-referrer";
la página se abre desde una URL file://;
alguien abre directamente la URL del iframe en una pestaña.

La política predeterminada del navegador, strict-origin-when-cross-origin, envía el origen y funciona. Si tu sitio aplica una política más estricta, conserva referrerpolicy="no-referrer-when-downgrade" en el iframe normal o flexibiliza la política para la página que contiene el mapa.

Si tu página muestra el mapa dentro de otro iframe, el referente será la dirección de ese iframe, por lo que debes incluir su dominio en la lista.

Los dominios permitidos determinan dónde puede aparecer el mapa, pero no protegen el contenido como secreto. Esto incluye los datasets que dibuja el mapa: consulta Datos subidos en un mapa publicado. No publiques datos confidenciales.

Paso 6: Detectar si el mapa se cargó o falló (opcional)

El SDK no tiene una promesa ready y el elemento no emite eventos. La señal procede del iframe, que envía un mensaje a la página en dos situaciones:

Mensaje	Cuándo	Campos
`kaleidr-embed:ready`	La primera vez que se dibuja el mapa.	`type`, `id` (ID del mapa), `source` (`"publish"` o `"share"`)
`kaleidr-embed:error`	El mapa no se pudo cargar o una parte no se pudo dibujar.	`type`, `id`, `code`, `message`

Escucha los mensajes en window y comprueba tanto su origen como qué marco los ha enviado:

const el = document.getElementById('locations'); // the <kaleidr-map> element

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://map-embed.kaleidr.com') return;
  const frame = el.querySelector('iframe');
  if (!frame || event.source !== frame.contentWindow) return;

  const msg = event.data;
  if (!msg || typeof msg.type !== 'string') return;

  if (msg.type === 'kaleidr-embed:ready') {
    console.log('map loaded', msg.id);
  } else if (msg.type === 'kaleidr-embed:error') {
    console.warn('map problem', msg.code, msg.message);
  }
});

Con un iframe normal, compara event.source con su contentWindow.

Los posibles valores de code en un error son:

`code`	Significado	Lo que ve el visitante
`no_id`	Falta el ID del mapa en la URL del iframe.	"Couldn't find a map id in the URL."
`not_found`	No existe un mapa publicado con ese ID: no se publicó, se despublicó o el ID está mal escrito.	"This map isn't available — it may have been unpublished, paused, or the link is incorrect."
`domain_not_allowed`	Hay una lista de dominios permitidos y tu página no está incluida o no envía referente.	"This map isn't allowed to render on this site. Please contact the map owner."
`map_loads_exhausted`	La organización propietaria agotó sus cargas de mapa para el período.	"This map has reached its map load limit. It will be available again when the owner's allowance resets."
`fetch_failed`	El mapa no se pudo obtener, por ejemplo por una falla de red.	"Could not load the map. Please try again in a moment."
`maplibre_error`	El mapa comenzó a cargar, pero una parte no se pudo dibujar; `message` contiene el detalle.	El mapa, posiblemente con una parte ausente.

Notas sobre el momento de las señales:

Para todos los códigos excepto maplibre_error, el mapa no se muestra y nunca llega ready.
maplibre_error puede llegar antes o después de ready, incluso varias veces. Trátalo como advertencia, no como prueba de que todo el mapa sea inutilizable.
El SDK carga el iframe de manera diferida. Un mapa mucho más abajo de la página no comienza a cargar hasta que el visitante se acerca al desplazarse; no tomes unos segundos de silencio como error.
El iframe también envía otros mensajes kaleidr-embed: usados internamente. No forman parte del contrato público. Escucha los dos tipos anteriores e ignora el resto.

Página completa

Guarda esto como index.html, sustituye YOUR_MAP_ID y sirve la carpeta por HTTP.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Our locations</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; }
    #map { height: 480px; }
  </style>
</head>
<body>
  <h1>Our locations</h1>
  <p id="status">Loading the map…</p>

  <div id="map"></div>
  <p>
    <button id="london">London</button>
    <button id="paris">Paris</button>
  </p>

  <script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
  <script>
    const target = document.getElementById('map');
    const status = document.getElementById('status');

    const handle = Kaleidr.mount(target, {
      product: 'viewer',
      shareId: 'YOUR_MAP_ID',
    });

    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://map-embed.kaleidr.com') return;
      const frame = target.querySelector('iframe');
      if (!frame || event.source !== frame.contentWindow) return;
      const msg = event.data;
      if (!msg || typeof msg.type !== 'string') return;

      if (msg.type === 'kaleidr-embed:ready') {
        status.textContent = 'Map loaded.';
      } else if (msg.type === 'kaleidr-embed:error' && msg.code !== 'maplibre_error') {
        status.textContent = 'The map could not load (' + msg.code + ').';
      }
    });

    document.getElementById('london').addEventListener('click', () => {
      handle.setCamera({ center: [-0.1276, 51.5072], zoom: 12, duration: 800 });
    });
    document.getElementById('paris').addEventListener('click', () => {
      handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 800 });
    });
  </script>
</body>
</html>

Cómo funciona

Tema	Comportamiento
Vista inicial	La vista guardada por el autor, salvo que pases una cámara. Sus valores prevalecen campo por campo.
Desplazamiento	Con el puntero sobre el mapa, la rueda amplía el mapa, como en Studio. Con el puntero fuera del mapa, el desplazamiento mueve la página. En pantallas táctiles, arrastrar mueve el mapa y pellizcar lo amplía.
Actualizaciones	El embed muestra el mapa guardado en Studio y lo lee cuando se carga. Los cambios guardados aparecen al volver a cargar, sin republicar.
Datos subidos	Los datasets y superposiciones de imagen añadidos en Data se dibujan para los visitantes. Consulta Datos subidos en un mapa publicado.
Anular publicación	Un embed no publicado muestra el mensaje de indisponibilidad. Consulta Despublicar un mapa. Al publicar de nuevo se restauran las mismas URL.
Ventanas emergentes	Al hacer clic se abren ventanas de lugares solo si el autor las activó.
Altura	Sigue la del elemento si está definida al montarse; si no, usa 500 píxeles fijos.
Carga	El iframe del SDK se carga de forma diferida al aproximarse a la zona visible.
Clave	No requiere clave. No pases una clave publicable a un montaje Viewer: crearía una solicitud de sesión innecesaria y, si se rechaza, impediría mostrar el mapa.

Datos subidos en un mapa publicado

Los datasets que agregas desde el panel Data de Studio forman parte del mapa publicado. Cada visitante los ve representados como las capas que diseñaste, así como las imágenes superpuestas. Se aplica al iframe normal, elemento SDK y enlace compartido. No hay que activarlo y la página que inserta el mapa no necesita clave.

Un mapa publicado usa el estado guardado actualmente. Si agregas un dataset a un mapa que ya está publicado, se vuelve público al guardarse, sin necesidad de republicar.

Qué se entrega y a quién:

Solo los datos de un mapa publicado. Un dataset se envía a un visitante únicamente como parte de un mapa publicado o un enlace compartido que lo incluya. Los datasets de mapas no publicados no se entregan.
No se puede obtener un dataset por separado. No existe una lista pública de datasets de un mapa, y su ID no abre nada sin el mapa publicado correspondiente.
Cualquiera que pueda abrir el mapa puede leer los datos. Un mapa publicado es público. Los dominios permitidos controlan dónde se muestra, no la confidencialidad.
Se envían todas las columnas, no solo las que hayas usado para el estilo. El navegador recibe cada fila con todas sus columnas. Elimina las columnas sensibles del archivo antes de publicarlo y súbelo nuevamente.

Cómo dejar de servir un dataset:

Acción en Studio	Efecto en el mapa publicado	Efecto en un enlace compartido
Borrar el dataset en Data	Se elimina y deja de servirse; el resto del mapa permanece intacto.	El enlace dibuja el mapa sin la capa del dataset.
Despublicar el mapa	No se sirve ninguna parte del mapa, incluidos sus datasets.	No cambia; el enlace sigue mostrando los datos que tenía.

Para eliminar un conjunto de datos, pulsa el icono de la papelera en su fila del panel de Datos y confirma. Eliminar o sustituir un conjunto de datos explica los pasos y qué ocurre después al usar Deshacer. Eliminar solo las capas que muestran un conjunto de datos no es lo mismo: el conjunto continúa almacenado y asociado al mapa, por lo que sigue sirviéndose.

Un enlace compartido es una instantánea del diseño del mapa. Muestra el mapa tal como estaba cuando se creó el enlace: editarlo más adelante o retirarlo de publicación no cambia lo que muestra. La instantánea también conserva el nombre del mapa, la lista de dominios permitidos y los interruptores de Kaleidr AI vigentes al crearla, por lo que un cambio posterior en ellos no altera dónde se muestra un enlace ya creado ni qué funciones de Kaleidr AI ofrece. Su Kaleidr AI también necesita el mapa: solo funciona mientras el mapa está publicado, y solo en una página que incluyan ahora los dominios permitidos del mapa, así que retirar la publicación del mapa o eliminar un dominio la detiene. La paga el propietario del mapa; consulta Kaleidr AI en un mapa publicado.

Un enlace compartido es una instantánea del diseño del mapa. Muestra el diseño tal como estaba cuando se creó. Modificar o despublicar el mapa después no cambia el enlace. Los datasets son la excepción: el enlace lee cada dataset de la misma copia almacenada que utiliza el mapa, por lo que eliminarlo lo retira de todos los enlaces que lo muestran.

Cada vez que abres el diálogo Share de Studio, el mapa se publica y se crea un enlace compartido nuevo. Un mapa compartido varias veces tendrá varios enlaces, cada uno con su instantánea del momento de creación.

Studio no dispone de controles para eliminar o pausar un enlace compartido. Sigue funcionando hasta que borres los datos que muestra o pidas a Kaleidr que lo elimine. Para compartir una versión de diseño más reciente, abre Share y usa el nuevo enlace; los anteriores siguen mostrando el estado que tenían.

Despublicar un mapa

En la página Publish & embed, un mapa en estado Live tiene un botón Unpublish junto a Re-publish. Studio pide confirmación: «Unpublish this map? Embeds of it stop working. Share links you have already handed out still show the map, but their Kaleidr AI stops.» Pulsa Unpublish para continuar o Cancel para mantener el mapa.

Todos los embeds del mapa dejan de funcionar: muestran el mensaje de indisponibilidad y envían not_found.
El mapa conserva su ID. Si pulsas Go Live otra vez, se restauran las mismas URL; no necesitas modificar los fragmentos en tus páginas.
Los enlaces compartidos ya distribuidos siguen funcionando con los datos que mostraban. Su Kaleidr AI se detiene hasta que vuelvas a publicar el mapa.

La interrupción no es inmediata en todas partes:

Un navegador que ya cargó los datos los conserva. Un visitante con el mapa abierto sigue viendo la capa y el navegador puede reutilizar datos cargados en los últimos minutos.
Un enlace de descarga emitido puede seguir activo hasta una hora. En datasets grandes, el navegador recibe un enlace temporal; si se emitió antes de borrar el dataset o despublicar el mapa, seguirá funcionando hasta caducar, como máximo una hora.

Cómo se cargan:

Cada visitante descarga el dataset completo. No se carga por partes mientras el visitante desplaza la vista. Muchas filas o columnas aumentan el tiempo de carga, especialmente con conexiones lentas. Publica solo las filas y columnas necesarias.
Un dataset que no se puede cargar no impide mostrar el resto del mapa. El mapa se dibuja sin esa capa.

Los límites de subida se explican en Límites de datasets.

Cómo se cuentan las vistas

Cada vez que el embed se carga para un visitante cuenta como una carga de mapa de la organización propietaria, no del sitio que lo inserta. Si el mismo visitante carga el mismo mapa otra vez antes de 24 horas, no se vuelve a contar. Las vistas en páginas propias de Kaleidr, como la vista previa de Studio, no se contabilizan.

Cuando la organización agota las cargas de mapa del período, los embeds muestran el mensaje de límite y envían map_loads_exhausted hasta el reinicio de la cuota. Las cuotas de los planes están en Cuotas y límites de frecuencia.

Comprobar que funciona

En la página: el mapa muestra marcadores, rutas, datasets y superposiciones añadidos en Data, con sus estilos. Los controles de zoom funcionan y la línea de créditos aparece en la parte inferior.
En la consola: ninguna línea contiene [kaleidr.
En Network: solicitud de documento a https://map-embed.kaleidr.com/embed/YOUR_MAP_ID con estado 200. Con elemento SDK se ven además kaleidr.js y viewer.js de https://cdn.kaleidr.com.
En el listener: un mensaje kaleidr-embed:ready.

Si no funciona

Síntoma	Causa	Solución
El mapa mantiene `height` en 500 píxeles de alto	Al montar, el elemento no tenía altura, usaba `display:inline` o Safari era anterior a 16.4 y faltaba `display:block`.	Asigna `display:block` y una altura y móntalo cuando sea visible.
No aparece nada; `[kaleidr] <kaleidr-map> requires product="chat\|viewer\|editor\|tile"`	El atributo `product` falta o está mal escrito.	Define `product="viewer"`.
No aparece nada; `[kaleidr:viewer] Kaleidr map: invalid id "" — must match ^[A-Za-z0-9._~-]{1,100}$.`	`share-id` falta, está vacío o contiene caracteres no permitidos.	Copia otra vez el ID de Studio.
No aparece nada; `[kaleidr:viewer] mount target not found: #map`	`Kaleidr.mount` se ejecutó antes de que existiera el destino o el selector es incorrecto.	Ejecuta el montaje después de crear el elemento o corrige el selector.
`Kaleidr is not defined`	El script se ejecutó antes de terminar `kaleidr.js`, por ejemplo porque Studio lo carga con `async`.	Quita `async` o ejecuta tu código en el evento `load`.
El marco dice "This map isn't available…"	El mapa nunca se publicó, se despublicó o el ID es incorrecto.	Pulsa Go Live en Studio y, si es nuevo, copia el ID del fragmento.
El marco dice "This map isn't allowed to render on this site."	El dominio no está permitido o la página no envió referente.	Autoriza el dominio en Studio o corrige la política de referentes.
El marco dice "This map has reached its map load limit."	La organización agotó las cargas del período.	Espera al reinicio o amplía la cuota. Consulta Cuotas y límites de frecuencia.
El marco dice "Could not load the map. Please try again in a moment."	No se pudo obtener el mapa.	Recarga; si persiste, comprueba la red e intenta abrir la URL del iframe en otra pestaña.
Un cuadro vacío y violación de `frame-src`	La Política de seguridad de contenido no permite el iframe.	Autoriza `https://map-embed.kaleidr.com` en `frame-src`.
Violación de `script-src`	La política bloquea el loader.	Autoriza `https://cdn.kaleidr.com` en `script-src` o usa el iframe normal.
`setCamera` no hace nada	El mapa no terminó de cargar y la llamada espera, o el handle se destruyó.	Comprueba `kaleidr-embed:error` y la consola; las llamadas tempranas se aplican al estar listo. Si el mapa no comunica que está listo tras una espera limitada, normalmente 10 segundos desde la carga del iframe, la llamada se envía igualmente y la consola muestra `[kaleidr] the map frame has not reported ready`: si el marco muestra un error, no hay ningún mapa que mover o modificar.
`el.setCamera is not a function`	Se llamó `setCamera` en el elemento.	Llama al método en el handle de `Kaleidr.mount` o cambia los atributos de cámara.
El desplazamiento de la página se detiene en el mapa	Es esperado: con el puntero sobre el mapa, la rueda amplía el mapa.	Desplázate con el puntero junto al mapa. Dale al mapa menos altura que la pantalla para que los visitantes puedan pasar de largo.
Los cambios no aparecen en el embed	El embed lee el estado guardado al cargarse; la página se abrió antes de guardar el cambio.	Recarga la página. No es necesario republicar.
El embed muestra un cambio que no querías publicar	Un mapa publicado refleja el estado guardado actualmente.	Deshaz el cambio; para editar en privado, despublica temporalmente o crea una copia. Referencia
Falta una capa de un dataset subido	El dataset se eliminó o no se pudo cargar; el resto del mapa aparece.	Comprueba que el dataset y su capa existen en Data y se ven en Studio; luego recarga.
Una capa grande aparece con retraso	Cada visitante descarga el dataset completo.	Sube menos filas o columnas; consulta Datos subidos en un mapa publicado.

Limitaciones

El embed es de solo lectura. Tu página no puede añadirle marcadores ni capas, leer sus datos o recibir eventos de clic.
Las únicas señales hacia tu página son kaleidr-embed:ready y kaleidr-embed:error.
No puedes cambiar estilo o mapa base desde el embed. Modifícalo en Studio; los cambios guardados aparecerán en la siguiente carga.
Cambiar share-id después de montar no tiene efecto. Quita y añade un nuevo elemento o llama a handle.destroy() y monta de nuevo.
Los dominios permitidos dependen del referente del navegador y no son un secreto.

Próximos pasos

Referencia de Viewer: todas las opciones, atributos y mensajes.
Kaleidr AI en un mapa publicado: permite que los visitantes pregunten sobre el mapa.
Datasets en un mapa: formatos, límites y columnas de datos.
Integración con frameworks: montar y destruir mapas con React, Next.js y Vue.
Política de seguridad de contenido: permisos de los hosts necesarios.

Antes de empezar​

Paso 1: Publicar el mapa​

Paso 2: Copiar el código de inserción​

Paso 3: Añadirlo a la página y darle tamaño​

Paso 4: Definir la cámara inicial (opcional)​

Paso 5: Restringir los sitios que pueden mostrar el mapa (opcional)​

Paso 6: Detectar si el mapa se cargó o falló (opcional)​

Página completa​

Cómo funciona​

Datos subidos en un mapa publicado​

Enlaces compartidos​

Despublicar un mapa​

Cómo se cuentan las vistas​

Comprobar que funciona​

Si no funciona​

Limitaciones​

Próximos pasos​