<kaleidr-map> — 要素
宣言的 façade です。要素を配置して属性を設定すると、 connect 時に mount され、削除時に teardown されます。
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>
属性テーブル
kaleidr-sdk/packages/embed/src/element.ts に対して検証済みです。属性名は
kebab-case で、kaleidr.js の対応する Kaleidr.mount(...) option 名は
camelCase です。
| 属性 | 製品 | 必須 | デフォルト | 意味 |
|---|---|---|---|---|
product | すべて | はい | — | chat | viewer | editor | tile |
publishable-key | chat, editor, tile | はい* | — | kld_pk_live_…；実行時に session token と交換されます |
api-key | chat, editor, tile | — | — | 非推奨 alias。旧 kld_live_… も使用可能 |
share-id | viewer | はい | — | 公開 map / share id；省略すると bundle 読み込み時にエラーになります |
map-id | viewer | — | — | share-id の alias |
style-id | tile, editor | 任意 | tile: viewer default；editor: org default → kaleidr-morning | Basemap style id、または（editor）完全な style URL |
map-target | chat | 任意 | — | host map element の CSS selector |
contained | chat | 任意 | false | パネルを document.body 上に浮かせず mount element 内に固定します |
center | viewer, tile, editor | 任意 | — | lon,lat |
zoom | viewer, tile, editor | 任意 | editor: 2 | 初期 zoom |
pitch | viewer, tile, editor | 任意 | 0 | 初期 pitch |
bearing | viewer, tile, editor | 任意 | 0 | 初期 bearing |
theme | chat, editor | 任意 | — | JSON CSS-token object string |
doorway | すべて | 任意 | product default | iframe | attach override |
base | すべて | 任意 | https://cdn.kaleidr.com | lazy bundle（/embed/v1/*.js）用 CDN origin |
viewer-base | viewer, tile | 任意 | https://map-embed.kaleidr.com | iframe が読み込む origin — bundle CDN とは別 |
api-base | chat, editor, tile | 任意 | https://api.kaleidr.com/inference-api | /inference-api を含める必要があります。 https://api.kaleidr.com のような bare origin は session exchange で 404 になります。session exchange を行うすべての product（chat, editor, tile）に適用されます。 |
tile-base | editor | 任意 | https://tile.kaleidr.com | カタログの style-id 値を解決する Tile CDN |
flag | すべて | 任意 | — | 要素ごとの dormancy override |
* 認証済み/課金対象の利用には必須です。Viewer にはキーは不要です。Viewer embed に
キーを渡すと product_not_allowed で拒否されます。
要素に高さを設定してください（inline style または CSS）。すべての product は
container 全体を使用します。サイズ未指定 の container 内の iframe product は、
表示を維持するため固定 500px にフォールバックします。
Handle matrix
/embed/v1/ で提供されているとおりの動作です。サポートされていない組み合わせでも例外は発生せず、
SDK は [kaleidr] warning を記録して戻ります。これは v1 major alias の contract であり、
呼び出し可能な method の削除は behavior breaking になります。
| Method | chat | viewer | editor | tile |
|---|---|---|---|---|
destroy() | はい | はい | はい | はい |
setCamera(camera) | no-op | はい | はい | はい |
setTheme(theme) | はい（live） | n/a | mount 時のみ | n/a |
setStyle(styleId) | n/a | n/a | n/a | tile のみ公開 |
Chat はマップカメラを操作しません — Kaleidr.mount(...) 後は
マップインスタンス自身の camera API を使用してください。Editor の live-setTheme は今後の SDK
リリースで追加されます。mount 時の theme はすでに動作します。
ライブ更新
center、zoom、pitch、bearing は監視され、remount せずに viewer、
editor、tile を再フレーミングします。theme の変更は chat を live 更新します。
editor theme は mount 時のみのままです。
Chat + map-target
Chat は 稼働中のマップにアタッチ しますが、string 属性では map instance を渡せません。 渡す方法は2つあります：
- Imperative（推奨）:
Kaleidr.mount(el, { product: 'chat', publishableKey, map, contained: true }). - Declarative: host element に map instance を
hostEl.__kaleidrMap__ = mapとして保存し、map-target="#host"を指定します。
マップがない場合、chat は headless で動作します（マップ操作なし）。