Anexar Kaleidr AI a um mapa MapLibre

Requer uma chave publishable com escopo ai no plano Pro ou superior. A origin da sua página deve estar na allowlist da chave e ser servida via HTTP(S) — consulte Obter uma chave de 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 quanto maplibre-gl.css estão fixados em 5.17.0 — a URL sem versão unpkg.com/maplibre-gl/dist/* não é reproduzível.

O bundle de chat detecta o MapLibre automaticamente e funciona com qualquer style que seu mapa já utilize. Para um mapa totalmente estilizado pela Kaleidr, monte um designed basemap com <kaleidr-map product="tile"> e sua chave publishable em vez de apontar o MapLibre para uma raw style URL — o acesso ao basemap é autorizado pela sua chave e não existe uma tile API sem autenticação. O uso é cobrado no escopo ai.