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

Viewer — 公開マップを埋め込む

product="viewer" は公開された Kaleidr マップを share id によって iframe に埋め込みます。独自のマップを持ち、kaleidr-embed:* postMessage seam を通じて操作します。

  • 組み込み方式: iframe — マップは map-embed.kaleidr.com 内に読み込まれます。
  • 必要なスコープ: なし。Viewer は keyless です — share authorization が credential です。
  • 最小プラン: Free — share id を持つ人なら誰でも、どのプランでも Viewer を 埋め込めます。

share-id は 必須 です — 省略すると bundle 読み込み時にエラーになります。 Viewer embed に publishable key を渡すと product_not_allowed で拒否されます。

マウント​

<kaleidr-map product="viewer" share-id="abcd1234"
             center="-0.12,51.5" zoom="11" style="height:520px"></kaleidr-map>

Handle​

const handle = Kaleidr.mount('#map', { product: 'viewer', shareId: 'abcd1234' });
handle.setCamera({ center: [-0.12, 51.5], zoom: 12, duration: 800 });
handle.destroy();

公開者が設定した allowed domains は引き続き適用されます — 特定の サイトに制限されたマップは、share id があっても他の場所では表示されません。 マップを埋め込む を参照してください。