Kaleidr AI를 MapLibre 지도에 연결

Pro 이상에서 ai scope를 가진 publishable key가 필요합니다. 페이지의 origin은 key allowlist에 포함되어 있어야 하며 HTTP(S)로 제공되어야 합니다 — 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>

maplibre-gl.js와 maplibre-gl.css 모두 5.17.0으로 고정되어 있습니다 — 버전이 없는 unpkg.com/maplibre-gl/dist/*는 재현 가능하지 않습니다.

chat bundle은 MapLibre를 자동 감지하고 현재 지도에서 사용하는 어떤 style과도 함께 작동합니다. 완전히 Kaleidr 스타일의 지도를 사용하려면 MapLibre를 raw style URL에 직접 연결하는 대신 <kaleidr-map product="tile"> 및 publishable key로 designed basemap을 mount하세요 — basemap access는 key로 인증되며 인증되지 않은 tile API는 없습니다. ai scope로 과금됩니다.