Tiles — デザインされたベースマップを埋め込む

product="tile" は style id によって、デザインされた Kaleidr ベースマップを iframe に埋め込みます。独自のマップを持ち、kaleidr-embed:* postMessage seam を通じて操作します。

組み込み方式: iframe — マップは map-embed.kaleidr.com 内に読み込まれます。
必要なスコープ: maps.
最小プラン: Free — Free のキーは ["maps"] スコープと ["tile"] product admission で発行されます。Tile は Free で利用できる唯一のキー必須 product です。

始める前に

ページの origin はキーの origin allowlist に登録されている必要があります。登録されていない場合、セッション交換は 403 session_origin_mismatch で失敗します。file:// は Origin を送信しないため必ず失敗します — HTTP(S) で配信してください。 APIキーを取得を参照してください。
CSP では SDK loader と map-embed.kaleidr.com frame host を許可する必要があります。Tile のみの embed では 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] warning が記録され、そのまま戻ります。

1つのキー、1つのプール

publishable-key（maps スコープ）がベースマップへのアクセスを認証します — 別の tile key はありません — また、すべてのベースマップ session はプランの共有月間 map-loads allowance に計上されます。Tile を使用を参照してください。

始める前に​

マウント​

Handle​

始める前に

マウント

Handle