メインコンテンツまでスキップ

Editor — マップエディターをマウント

product="editor" は Kaleidr マップエディターをページ内にマウントします。要素内に 独自の MapLibre マップを作成して操作する attach 方式であり、 iframe ではありません。

  • 組み込み方式: attach — MapLibre は親ドキュメント内で実行されます。
  • 必要なスコープ: design.
  • 最小プラン: Pro — Free のキーでは design スコープを利用できません。

始める前に​

  • ページの origin はキーの origin allowlist に登録されている必要があります。登録されていない場合、セッション交換は 403 session_origin_mismatch で失敗します。file:// は Origin を送信しないため必ず失敗します — HTTP(S) で配信してください。 APIキーを取得 を参照してください。
  • CSP では SDK loader、'wasm-unsafe-eval'（ページ内 MapLibre）、 tile/vendor host を許可する必要があります — Content Security Policy を参照してください。

マウント​

const handle = Kaleidr.mount('#editor', {
  publishableKey: 'kld_pk_live_…',
  product: 'editor',
  styleId: 'kaleidr-night',  // catalog basemap id or a full style URL
  // Omit it and the organization's stored default applies, falling back to
  // kaleidr-morning when it has none.
});

スタンドアロン embed はエディターのクライアント側ツールを実行します — マップ上の 編集 UI がベースマップ上にマウントされ、編集内容は embed の インメモリ spec に保持されます（永続化されません）。AI 駆動の UI（map-design および Control Tower）と 3D モデルライブラリは スタンドアロン embed には含まれず、Kaleidr backend と host が配信する asset が必要です。

開発用ベースマップには tileBase: 'https://tile-dev.kaleidr.com' を渡します — カタログの style id は本番環境の tile.kaleidr.com ではなく、こちらに対して解決されます。 エディターをアタッチ を参照してください。

カメラオプション​

center、zoom、pitch、bearing はマウント時に反映されます。統合 SDK は、その後の宣言的なカメラ属性の変更も editor handle を通じて転送します。

Handle​

handle.destroy();
handle.setCamera({ center: [-0.12, 51.5], zoom: 11 });  // supported
  • handle.setTheme(...) は マウント時 に JSON CSS-token オブジェクトを受け付けます。 handle によるライブ更新は今後の SDK リリースで追加されます（マウント時はすでに 動作します）。
  • handle.setStyle(...) は editor では 公開されていません。マウント時に styleId を 使用するか、基盤となる MapLibre マップ自身の style API を使用して マウント後に切り替えてください。

ベースマップリクエストにはキーが自動的に付加されます​

Kaleidr ベースマップはキー認証されています — tile.kaleidr.com は未知のブラウザ origin を拒否します。そのため embed は MapLibre の transformRequest を使用して、 publishable key をベースマップリクエストに自動的に追加します：

// what the embed does internally — you don't write this
transformRequest: (url) =>
  url.startsWith('https://tile.kaleidr.com/')
    ? { url: `${url}?key=kld_pk_live_…` }
    : { url };

知っておくべき重要な点は2つあります：

  • キーの allowed origins にページの origin を含める必要があります。 サイトの origin を 含めずに発行されたキーでは、すべての tile に対して 429 tile_access_restricted が返されます。以下で更新してください： kaleidr.com/api-keys.
  • 書き換えられるのは Kaleidr の tile URL のみです。 別の host の styleUrl を 渡した場合、embed はそのリクエストを変更しません — キーが サードパーティ origin に付加されることはありません。