지도 에디터 연결

Kaleidr editor를 페이지에 mount하고 사용자가 지도를 디자인할 수 있게 합니다.

Pro 이상에서 design scope를 가진 publishable key가 필요합니다. 페이지의 origin은 key allowlist에 포함되고 HTTP(S)로 제공되어야 하며, CSP는 'wasm-unsafe-eval'(MapLibre) 및 tile/vendor host를 허용해야 합니다 — API 키 받기 및 Content Security Policy를 참조하세요.

<div id="editor" style="height:640px"></div>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const handle = Kaleidr.mount('#editor', {
    product: 'editor',
    publishableKey: 'kld_pk_live_…',  // design scope
    styleId: 'kaleidr-night',         // catalog basemap id or full style URL
    center: [-0.12, 51.5],
    zoom: 11,
    pitch: 35,
    bearing: -15,
  });
  // later: handle.destroy();
</script>

editor는 #editor 내부에 자체 MapLibre 지도를 생성합니다. map-design helper(dataset 분석, layer 생성)는 key를 사용해 platform design surface를 호출하며 design scope로 과금됩니다. styleId(kaleidr-night 같은 catalog basemap id 또는 full style URL)를 전달하면 basemap에서 시작할 수 있습니다.

dev basemap의 경우 tileBase: 'https://tile-dev.kaleidr.com'을 전달하세요 — catalog style id가 production tile.kaleidr.com 대신 해당 주소를 기준으로 해석됩니다.

Editor attach를 참조하세요.