マップエディターをアタッチ

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 を作成します。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 を参照してください。