본문으로 건너뛰기

빠른 시작

두 줄로 Kaleidr 지도를 임베드하세요.

1. Loader 추가​

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

kaleidr.js는 매우 작습니다 — MapLibre나 React를 포함하지 않습니다. 실제로 사용하는 제품 bundle만 cdn.kaleidr.com/embed/v1/<product>.js에서 지연 로드합니다.

2. 요소 추가​

둘 다 Free 플랜에서 실행됩니다. Viewer는 share-link 기반이며 키가 전혀 필요하지 않습니다. Tile은 maps / tile로 제한된 Free publishable 키를 사용합니다.

<!-- 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>

브라우저에서 알려주지 않는 두 가지 전제 조건이 있습니다 — 정확한 단계는 API 키 받기를 참조하세요:

  1. 페이지 origin이 키의 origin allowlist에 있어야 하며, 그렇지 않으면 SDK의 세션 교환이 session_origin_mismatch로 거부됩니다. file:// 임베드는 항상 실패합니다 — HTTP(S)로 제공하세요.
  2. CSP가 SDK loader와 지도 iframe을 허용해야 합니다 — Content Security Policy를 참조하세요.

또는 명령형으로 마운트​

페이지에 이미 있는 지도에 AI 채팅을 연결하세요. Chat에는 ai 범위와 Pro 이상이 필요합니다 — Free 키는 Chat 세션을 생성할 수 없습니다. contained: true는 패널을 마운트 요소 안에 고정하며, 없으면 패널이 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)는 handle을 동기적으로 반환합니다. 제품 bundle은 백그라운드에서 로드되고 대기 중인 호출은 로드 후 실행됩니다. 참고: handle.setCamera(...)는 chat에서 no-op입니다 — chat handle은 지도 카메라를 제어하지 않습니다. 지도 인스턴스 자체의 카메라 API를 사용하세요.

다음 단계​