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

クイックスタート

Kaleidr マップを2行で埋め込みます。

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 key を使用します。

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

ブラウザからは分からない2つの前提条件があります — 正確な手順については APIキーを取得 を 参照してください：

  1. ページの origin はキーの origin allowlist に登録されている必要があります。登録されていない場合、SDK の セッション交換は session_origin_mismatch で拒否されます。file:// 埋め込みは常に失敗します — HTTP(S) で配信してください。
  2. CSP で SDK loader とマップ iframe を許可する必要があります — Content Security Policy を参照してください。

または命令的にマウント​

すでにページ上にあるマップに AI chat をアタッチします。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 を使用してください。

次へ​