Adjuntar Kaleidr AI a un mapa de MapLibre

Requiere una clave publishable con ámbito ai en Pro o superior. El origin de tu página debe estar en la allowlist de la clave y servirse mediante HTTP(S) — consulta Obtener una clave API.

<link rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css">
<div id="mapHost" style="height:520px;position:relative">
  <div id="map" style="position:absolute;inset:0"></div>
  <div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>

<script src="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json', // your own style here
    center: [-0.12, 51.5],
    zoom: 11,
  });

  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,   // dock inside #chat, not on document.body
  });
</script>

Tanto maplibre-gl.js como maplibre-gl.css están fijados a 5.17.0 — la URL sin versión unpkg.com/maplibre-gl/dist/* no es reproducible.

El bundle de chat detecta MapLibre automáticamente y funciona con cualquier style que tu mapa ya utilice. Para un mapa completamente diseñado con el estilo de Kaleidr, monta un designed basemap con <kaleidr-map product="tile"> y tu clave publishable en lugar de apuntar MapLibre a una raw style URL — el acceso al basemap está autorizado por tu clave y no existe una tile API sin autenticación. Se factura el ámbito ai.