エディター
Editor は Kaleidr のマップ編集ツールをページ内に配置します。Kaleidr ベースマップに文字、画像、マーカー、ポップアップを追加したり、マップ上の 要素を再スタイリングしたりできます。
開発前に機能範囲を確認してください
埋め込みエディターはページ内で動作し、編集内容はページのメモリ内に保持されます。 埋め込みから保存・エクスポート・公開することはできず、変更時にページへコールバックも送られません。 ページの再読み込みやエディターの破棄で編集内容は消えます。ユーザー向けのマップ公開ワークフローを提供するものではありません。保存・共有・埋め込みするマップは Kaleidr Studio で作成し、Viewer で表示してください。
概要
| 質問 | 回答 |
|---|---|
| 必要なものは？ | 公開可能キー（kld_pk_live_…）で、design スコープを持つもの。新しいキーには既定で含まれます。 |
| 対応プランは？ | Free を含むすべてのプラン。 |
| 表示方法は？ | iframe ではなくページ内です。マップとエディターのパネルはドキュメント内の要素になります。 |
| 編集内容はどこに保存される？ | 保存されません。ページの再読み込みやエディターの破棄までメモリ内に残ります。 |
| コードから編集内容を読める？ | いいえ。変更イベント、エクスポート機能、マップオブジェクトへのアクセスはありません。 |
| 1 ページに何個置ける？ | 1 個。 |
最小限のマウント
<div id="editor" style="height:640px"></div>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
const handle = Kaleidr.mount('#editor', {
product: 'editor',
publishableKey: 'kld_pk_live_…',
});
</script>
マウント先の要素には高さが必要です。エディターはその領域全体を埋めます。
埋め込みエディターに含まれる機能
エディターのツールバーには 8 つの項目があります。
- テキスト： マップ上に配置する見出しと本文。
- 画像： マップ上に配置する画像。
- マーカー： 位置を示すマーカー。
- ポップアップ： 場所に結び付けたポップアップ。
- 背景： マップの背後にある背景。
- レイヤー： ベースマップのラベル、3D 建物、照明、地形の各レイヤー。
- デザイン： ベースマップの地物、地物カテゴリ、地域を選び、スタイルを変更する機能。
- 凡例： ラベルと凡例の設定。
含まれない機能
Kaleidr Studio の次の機能は埋め込み版に含まれません。
- データタブ：データセットのアップロードはできません。そのため、アップロード済みデータをスタイリングする機能は対象データがありません。
- サンプルマップやスタイル種類を含む Studio のデザインカタログ。
- AI パネル。
- 3D モデルライブラリ。
- 共有と公開。
- プロジェクト：保存済みマップ一覧、開く機能、保存機能はありません。
- サインイン：埋め込みは個人の Kaleidr アカウントではなく、あなたのキーを使用します。
仕組み
- SDK は公開可能キーを短期セッションと交換し、キー、
designスコープ、ページのオリジンを確認します。 - 同時に、SDK は
editor.jsをhttps://cdn.kaleidr.comから読み込みます。数 MB のファイルで、エディターのマウント時にのみ読み込まれます。両方が完了するとエディターが起動します。 - エディターはマウント先にマップを作成し、
https://tile.kaleidr.comからベースマップを読み込みます。スタイル、スプライト、フォントのリクエストに公開可能キーを含めることで、ベースマップサーバーがページを識別します。セッショントークンを URL に入れることはありません。 - エディターのパネルがマウント先のマップ上に表示されます。
これらすべてがページ内で動作するため、Content Security Policy では Viewer や Tile より多くのリソースを許可する必要があります。詳しいディレクティブはコンテンツセキュリティポリシーにあります。
ページからできること
- ベースマップを選択：
styleIdを使用します（例：kaleidr-night）。 - 初期カメラを設定：
center、zoom、pitch、bearingを指定します。 - 後からカメラを移動：
handle.setCamera(...)を使用します。 - ブランドに合わせる：
themeに 17 種類の名前付きキーを持つオブジェクトを渡します（例：brandColor、fontPrimary）。 - エディターを削除：
handle.destroy()を呼び出します。
制限
- 保存、エクスポート、公開はできず、変更コールバックもありません。
- ハンドルからマップにアクセスできません。独自のレイヤーを追加したり、ユーザーが描いた内容を読み取ったりできません。
- ベースマップとテーマはマウント時に固定されます。変更するにはエディターを破棄して再マウントする必要があり、編集内容は失われます。
- 1 ページにつき同時に 1 エディターのみ使用できます。
- マウント中はテーマの値がドキュメント全体に適用され、破棄時に以前の値へ戻ります。
- コード向けの準備完了や失敗の通知はありません。エラーはブラウザーコンソールに表示されます。
次のステップ
- エディターの追加：手順付きガイド。
- エディターリファレンス：すべてのオプション、17 種類のテーマキー、ハンドル、コンソールメッセージ。
- コンテンツセキュリティポリシー：ページ内エディターに必要なディレクティブ。
- Viewer：Studio で保存・公開したマップを表示します。