Kaleidr AI를 Mapbox 지도에 연결

기존 Mapbox GL 지도에 Control Tower를 연결합니다.

Pro 이상에서 ai scope를 가진 publishable key가 필요합니다. 페이지의 origin은 key allowlist에 포함되어 있어야 하며 HTTP(S)로 제공되어야 합니다 — API 키 받기를 참조하세요.

<link rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-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://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  mapboxgl.accessToken = 'pk.…';
  const map = new mapboxgl.Map({ container: 'map', 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>

이 snippet에 대한 참고 사항:

• mapbox-gl.css는 선택 사항이 아닙니다 — 이것이 없으면 지도가 보이지 않습니다.
• JS와 CSS 모두 특정 버전(3.9.4)으로 고정되어 있습니다. 버전이 없는 unpkg / api.mapbox.com URL은 재현 가능한 quickstart가 아닙니다.
• contained: true는 chat panel을 #chat 내부에 고정합니다. 없으면 panel이 document.body 위에 떠서 지도 위에서 깨진 것처럼 보입니다.

chat panel은 Mapbox를 자동 감지하고 확인된 장소를 지도 위 marker로 표시하며 대화 진행에 따라 카메라 프레임을 조정합니다. ai scope로 과금됩니다. Chat attach를 참조하세요.