Saltar al contenido principal

Inicio rápido

Integra un mapa de Kaleidr en dos líneas.

1. Añade el cargador​

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js es muy pequeño — no incluye MapLibre ni React. Carga bajo demanda el paquete del producto que realmente utilizas desde cdn.kaleidr.com/embed/v1/<product>.js.

2. Añade un elemento​

Ambas opciones funcionan en el nivel Free. Viewer está protegido por un enlace compartido (sin clave en absoluto); Tile utiliza una clave publishable de Free restringida a maps / tile.

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

Hay dos requisitos que el navegador no te explicará — consulta Obtener una clave API para ver los pasos exactos:

  1. El origen de tu página debe estar en la lista de orígenes permitidos de la clave, o el intercambio de sesión del SDK se rechazará con session_origin_mismatch. Las integraciones file:// siempre fallan — utiliza HTTP(S).
  2. Tu CSP debe permitir el cargador del SDK y el iframe del mapa — consulta Content Security Policy.

O móntalo de forma imperativa​

Adjunta el chat con AI a un mapa que ya tienes en la página. Chat requiere el ámbito ai y Pro o superior — las claves Free no pueden crear una sesión de Chat. contained: true acopla el panel dentro del elemento de montaje; sin esta opción, el panel se desplaza a document.body.

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google instance
  contained: true,
});

// later: handle.destroy();

Kaleidr.mount(target, opts) devuelve un handle de forma síncrona; el paquete del producto se carga en segundo plano y las llamadas en cola se ejecutan al terminar. Nota: handle.setCamera(...) es un no-op en chat — el handle de chat no controla la cámara del mapa. Utiliza la API de cámara de tu propia instancia del mapa.

Siguiente​