Editor リファレンス

product="editor" は Kaleidr の地図編集ツールをページにマウントします。エディターはマウント先の内部に独自の地図を作成し、その上に操作パネルを重ねて表示します。iframe ではなく、ページのドキュメント内で動作します。

埋め込みエディターでの作業はページのメモリにだけ保持されます。埋め込み版から保存、エクスポート、公開はできず、変更コールバックもありません。ページの再読み込みや handle.destroy() により編集内容は失われます。

項目	内容
キー	公開可能キー（`kld_pk_live_…`）。必須。
スコープ	`design`。新しいキーにはデフォルトで付与されます。
プラン	Free を含むすべてのプラン。
表示場所	ご自身のページ。
永続化	なし。
インスタンス	1 ページにつき 1 つ。
CSP	Content Security Policy の Editor の項目を参照してください。

手順は Editor の組み込みを参照してください。

機能の範囲

含まれる機能	含まれない機能
地図上に配置するテキスト	データタブとデータセットのアップロード
地図上に配置する画像	Studio のサンプルマップおよびスタイルのデザインカタログ
マーカー	AI パネル
ポップアップ	3D モデルライブラリ
背景：地図の背後にある背景	共有と公開
レイヤー：ベースマップのラベル、3D 建物、照明と地形	プロジェクト：地図の保存、表示、一覧取得
デザイン：ベースマップの地物、カテゴリ、地域を選択してスタイルを変更	サインイン
凡例：ラベルと凡例の設定

左列はエディターのサイドツールバーを上から順に示しています。埋め込み版のデザインはスタイル変更ツールであり、Studio のデザインカタログは含まれません。

マウント

const handle = Kaleidr.mount('#editor', {
  product: 'editor',
  publishableKey: 'kld_pk_live_…',
  styleId: 'kaleidr-night',
  center: [-0.1276, 51.5072],
  zoom: 12,
});

<kaleidr-map product="editor" publishable-key="kld_pk_live_…"
             style-id="kaleidr-night" center="-0.1276,51.5072" zoom="12"
             style="display:block; height:640px"></kaleidr-map>

マウント先には高さを指定してください。エディターは対象の幅と高さの 100% を使います。既存の子要素は削除せずに新しい要素を追加するため、空のコンテナーを使用してください。

オプション

マウントオプション	属性	型	デフォルト	必須	説明
`product`	`product`	`'editor'`	なし	はい	Editor を選択します。
`publishableKey`	`publishable-key`	文字列	なし	はい	`design` スコープを持つ `kld_pk_…` キー。サーバーキー `kld_sk_…` はリクエストの前にブラウザーで拒否されます。
`styleId`	`style-id`	文字列	組織のデフォルトのベースマップ、なければ `kaleidr-morning`	いいえ	`kaleidr-night` などのスタイル ID、またはスタイルの完全な URL。スタイル IDを参照。マウント時に固定されます。
`center`	`center`	`[longitude, latitude]`。属性では `"longitude,latitude"`	`[0, 0]`	いいえ	初期中心座標。
`zoom`	`zoom`	数値	`2`	いいえ	初期ズーム。`center` なしでも動作します。
`pitch`	`pitch`	数値（度）	`0`	いいえ	初期傾斜角。
`bearing`	`bearing`	数値（度）	`0`	いいえ	初期回転角。
`theme`	`theme`	オブジェクトまたはその JSON 文字列	なし	いいえ	最大 17 個の名前付きキー。テーマキーを参照。マウント時に一度だけ読み込みます。
`apiBase`	`api-base`	URL	`https://api.kaleidr.com/inference-api`	いいえ	セッション交換の送信先。`/inference-api` パスが必要です。本番では通常不要です。
`tileBase`	`tile-base`	URL	`https://tile.kaleidr.com`	いいえ	スタイル ID を解決するホスト。本番では通常不要です。
`base`	`base`	URL	`https://cdn.kaleidr.com`	いいえ	SDK が `editor.js` を取得するオリジン。オリジン部分だけが使われ、ベースの上書きに記載されたオリジンのみが許可されます。
`enabled`	`flag`	真偽値	なし	いいえ	有効化ゲートのマウント単位の設定。

shareId、map、mapTarget、contained、viewerBase は Editor のマウントには影響しません。styleUrl オプションはありません。URL は styleId に渡してください。

ベースマップ

エディターは次の優先順位でベースマップを選択します：

指定された styleId。
設定されている場合、組織のデフォルトのベースマップ。
kaleidr-morning。

マウント後はベースマップを変更できず、Editor は handle.setStyle をサポートしません。変更する場合はエディターを破棄してマウントし直してください。編集内容は失われます。

カメラ

center は経度を先に指定します。
各値は数値または数値を表す文字列にできます。
有限数でないマウントオプションは無視され、デフォルトが使用されます。例えば [kaleidr:editor] ignored zoom: abc is not a finite value — using 2 instead. とコンソールに表示されます。
数値として解釈できない要素のカメラ属性はメッセージなしで破棄され、デフォルトが使われます。

テーマキー

theme は次の一覧のキーを持つオブジェクトです。値は CSS 値を含む文字列で指定します。一覧にないキーや空でない文字列以外の値は、通知なしで無視されます。fontSizeBase: 14 は無効で、fontSizeBase: '14px' は機能します。

キー	スタイルの対象	例
`brandColor`	主要ボタン、フォーカスリング、アクティブなツール。	`'#0b5fff'`
`brandColorHover`	`brandColor` のホバー状態。	`'#0847c2'`
`brandColorOn`	`brandColor` 上の文字とアイコン。	`'#ffffff'`
`textColor`	本文と見出しの文字。	`'#111827'`
`textColorMuted`	キャプションなどの補助テキスト。	`'#6b7280'`
`surfaceColor`	カードとダイアログの背景色。	`'#ffffff'`
`borderColor`	枠線と区切り線。	`'#e5e7eb'`
`glassBg`	半透明パネル（サイドバーと展開パネル）の背景。単色を指定するとフラットになります。	`'rgba(255,255,255,0.8)'`
`glassBlur`	パネルの `backdrop-filter`。	`'blur(12px)'`
`cardRadius`	カードとダイアログの角丸。	`'12px'`
`buttonRadius`	ボタンとチップの角丸。	`'8px'`
`listRadius`	リスト行の角丸。	`'6px'`
`fontPrimary`	基本の `font-family`。	`'"Inter", system-ui, sans-serif'`
`fontMono`	等幅の `font-family`。	`'ui-monospace, monospace'`
`fontSizeBase`	基本フォントサイズ。	`'14px'`
`sidebarRailWidth`	サイドツールバーの幅。	`'64px'`
`quickActionsWidth`	浮動クイック操作バーの幅。	`'320px'`

Kaleidr.mount('#editor', {
  product: 'editor',
  publishableKey: 'kld_pk_live_…',
  theme: {
    brandColor: '#0b5fff',
    brandColorOn: '#ffffff',
    fontPrimary: '"Inter", system-ui, sans-serif',
    buttonRadius: '8px',
  },
});

動作：

テーマは任意の CSS カスタムプロパティを受け付けるわけではありません。'--my-color' のようなキーは無視されます。
エディターのマウント中は、値がドキュメントのルート要素に適用されるため、どこに表示されるダイアログにも反映されます。破棄時には以前の値に戻ります。
テーマはマウント時に一度だけ読み込まれます。Editor は handle.setTheme をサポートしません。マウント後に theme 属性を変更すると警告が出るだけです。
theme を文字列で指定する場合、{ で始まる JSON でなければなりません。それ以外はコンソール警告とともに無視されます。

操作ハンドル

Kaleidr.mount はハンドルを同期的に返します。全製品についてはハンドル一覧を参照してください。

メンバー	Editor での動作
`handle.product`	`'editor'`
`handle.setCamera(camera)`	エディターの地図を移動します。
`handle.setTheme(theme)`	非対応。警告を出すだけです。
`handle.setStyle(style)`	非対応。警告を出すだけです。
`handle.destroy()`	エディターと地図を削除し、テーマ値を戻してセッション更新を停止します。編集内容も失われます。

ハンドルには map メンバーがなく、ページからエディター内部の地図オブジェクトにアクセスできません。

`setCamera(camera)`

handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 1000 });

フィールド	型	説明
`center`	`[number, number]`	経度、緯度。
`zoom`	数値	ズームレベル。
`pitch`	数値	傾斜角（度）。
`bearing`	数値	回転角（度）。
`duration`	数値	アニメーション時間（ミリ秒）。省略または `0` で即時移動します。

エディターの読み込み中に行った呼び出しはキューに入り、起動後に実行されます。

マウント後の要素属性

マウント済みの <kaleidr-map product="editor"> で center、zoom、pitch、bearing を変更すると、アニメーションなしで地図が移動します。style-id、theme、その他の属性変更は反映されません。

ライフサイクル

イベント	結果
`Kaleidr.mount(...)` または要素の接続	セッション交換と `editor.js` の読み込みが同時に行われ、両方完了すると編集を開始します。
`handle.destroy()` または要素の削除	エディターと編集内容がなくなります。
要素を別の親要素に移動	破棄されて再マウントされます。編集内容は失われます。
エディターがある状態で 2 個目をマウント	非対応です。最初のものを破棄してください。
ページを再読み込み	編集内容は失われます。

ページ内で実行される処理

iframe 製品とは異なり、Editor は埋め込み先のページに影響します：

数 MB の editor.js バンドルを https://cdn.kaleidr.com から読み込みます。
JavaScript からスタイルシートをドキュメントに追加します。
ベースマップのスタイル、タイル、スプライト、フォントを https://tile.kaleidr.com から取得します。スタイル、スプライト、フォントの要求には、ベースマップホストがページを認識するために公開可能キーをクエリパラメーター key として付けます。タイルデータの要求にはキーを付けません。セッショントークンは URL に含めません。
地図用に blob: URL から Web Worker を起動します。
マウント中はドキュメントのルート要素にテーマ値を設定します。

必要な CSP ディレクティブは Content Security Policyに記載されています。

コンソールメッセージ

メッセージ	意味
`[kaleidr:editor] [editor-embed] attach() requires an { apiKey }`	キーがありません。何も表示しません。
`[kaleidr:editor] kaleidr session exchange failed (<status>)`	セッション交換が拒否されました。理由は Network タブの応答から確認できます。403 のコードは `detail` にあり、`design` がない場合は `insufficient_scope` などです。429 のコードは `error` にあります。
`…/sdk/sessions` で CORS エラー、その後 `[kaleidr:editor]` の fetch エラー	キーが不明・失効しているか、ページのオリジンが許可されていません。
`[kaleidr:editor] Kaleidr: a server key (kld_sk_…) must never be used in the browser — it is a standing secret. …`	サーバーキーが渡されました。リクエストは送信されません。
`[kaleidr:editor] ignored <field>: <value> is not a finite value — using <default> instead.`	`Kaleidr.mount` に渡したカメラオプションが数値ではありません。要素属性ではこのメッセージは出ません。
`[kaleidr:editor] <message>`	スタイルやタイルの読み込み失敗など、地図からのエラーです。
`[kaleidr] theme string must be JSON …; named string themes are not supported. Ignored.`	`theme` が JSON オブジェクトではない文字列でした。
`[kaleidr] theme JSON parse failed (…); ignored.`	`theme` の JSON が不正です。
`[kaleidr] setTheme() is not supported on product "editor" — the call is a no-op. …`	`setTheme` が呼ばれた、またはマウント後に `theme` が変更されました。
`[kaleidr] setStyle() is not supported on product "editor" — the call is a no-op. …`	`setStyle` が呼ばれました。

利用できない機能

作成内容の保存、エクスポート、公開。
変更イベント、準備完了イベント、エラーコールバック。
地図オブジェクトへのアクセス、カスタムレイヤー、描画内容の読み取り。
マウント後のベースマップやテーマの変更。
同じページでの複数 Editor。

機能の範囲​

マウント​

オプション​

ベースマップ​

カメラ​

テーマキー​

操作ハンドル​

setCamera(camera)​

マウント後の要素属性​

ライフサイクル​

ページ内で実行される処理​

コンソールメッセージ​

利用できない機能​

関連ページ​