본문으로 건너뛰기

Tiles — 디자인된 베이스맵 임베드

product="tile"은 style id를 사용해 디자인된 Kaleidr 베이스맵을 iframe에 임베드합니다. 자체 지도를 가지며 kaleidr-embed:* postMessage seam을 통해 제어합니다.

통합 방식: iframe — 지도는 map-embed.kaleidr.com 내부에서 로드됩니다.
필수 범위: maps.
최소 플랜: Free — Free 키는 ["maps"] 범위와 ["tile"] 제품 권한으로 생성됩니다. Tile은 Free에서 사용할 수 있는 유일한 키 기반 제품입니다.

시작하기 전에

페이지 origin이 키의 origin allowlist에 포함되어 있어야 합니다. 그렇지 않으면 세션 교환이 403 session_origin_mismatch로 실패합니다. file://은 Origin을 보내지 않으므로 항상 실패합니다 — HTTP(S)로 제공하세요. API 키 받기를 참조하세요.
CSP는 SDK loader와 map-embed.kaleidr.com frame host를 허용해야 합니다. Tile만 임베드하는 경우 tile / vendor image host는 필요하지 않습니다 — 해당 리소스는 Kaleidr iframe 내부에서 사용됩니다. Content Security Policy를 참조하세요.

마운트

<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             center="-0.12,51.5" zoom="11" style="height:480px"></kaleidr-map>

기본 제공 style id에는 kaleidr-morning, kaleidr-afternoon, kaleidr-night, kaleidr-editorial, kaleidr-plain(및 registry alias)이 포함됩니다.

Handle

const handle = Kaleidr.mount('#basemap', {
  product: 'tile',
  publishableKey: 'kld_pk_live_…',
  styleId: 'kaleidr-night',
});

handle.setCamera({ center: [2.35, 48.85], zoom: 12 });
handle.setStyle('kaleidr-editorial');   // live style swap — tile only
handle.destroy();

setStyle(styleId)은 tile handle에만 노출됩니다. chat, editor 또는 viewer에서 호출하면 [kaleidr] 경고를 기록하고 반환합니다.

하나의 키, 하나의 풀

publishable-key(maps 범위)가 베이스맵 접근을 인증합니다 — 별도의 tile 키는 없으며 — 모든 베이스맵 session은 플랜의 공유 월간 map-loads 허용량에 포함됩니다. Tile 사용을 참조하세요.

시작하기 전에
마운트
Handle