Zum Hauptinhalt springen

Editor — Karteneditor einbinden

product="editor" bindet den Kaleidr-Karteneditor in deine Seite ein. Er erstellt und steuert seine eigene MapLibre-Karte innerhalb des Elements — eine attach-Einbindung, kein iframe.

  • Einbindung: attach — MapLibre läuft im übergeordneten Dokument.
  • Erforderlicher Scope: design.
  • Mindestplan: Pro — Free-Schlüssel erlauben den design-Scope nicht.

Bevor du beginnst​

  • Der Origin deiner Seite muss in der Origin-Allowlist des Schlüssels enthalten sein. Andernfalls schlägt der Session-Austausch mit 403 session_origin_mismatch fehl. file:// sendet keinen Origin und schlägt immer fehl — nutze HTTP(S). Siehe API-Schlüssel erhalten.
  • Deine CSP muss den SDK-Loader, 'wasm-unsafe-eval' (MapLibre in der Seite) und die Tile-/Vendor-Hosts erlauben — siehe Content Security Policy.

Mount​

const handle = Kaleidr.mount('#editor', {
  publishableKey: 'kld_pk_live_…',
  product: 'editor',
  styleId: 'kaleidr-night',  // catalog basemap id or a full style URL
  // Omit it and the organization's stored default applies, falling back to
  // kaleidr-morning when it has none.
});

Das eigenständige Embed führt die clientseitigen Werkzeuge des Editors aus — die Karten- Bearbeitungsoberflächen werden über der Basiskarte eingebunden und Änderungen verbleiben in der In-Memory-Spezifikation des Embeds (nichts wird gespeichert). Die KI-gesteuerten Oberflächen (Map-Design und der Control Tower) sowie die 3D-Modellbibliothek gehören nicht zum eigenständigen Embed; sie benötigen ein Kaleidr-Backend und vom Host bereitgestellte Assets.

Für eine Entwicklungs-Basiskarte übergib tileBase: 'https://tile-dev.kaleidr.com' — Katalog- Style-IDs werden dann dagegen statt gegen das Produktionssystem tile.kaleidr.com aufgelöst. Siehe Editor anhängen.

Kameraoptionen​

center, zoom, pitch und bearing werden beim Mounten berücksichtigt. Das einheitliche SDK leitet auch spätere deklarative Änderungen der Kameraattribute über das Editor-Handle weiter.

Handle​

handle.destroy();
handle.setCamera({ center: [-0.12, 51.5], zoom: 11 });  // supported
  • handle.setTheme(...) akzeptiert ein JSON-CSS-Token-Objekt zum Mount-Zeitpunkt; Live-Updates über das Handle folgen in einer späteren SDK-Version (beim Mounten funktioniert es bereits).
  • handle.setStyle(...) wird im Editor nicht bereitgestellt. Verwende styleId beim Mounten oder die Style-API der zugrunde liegenden MapLibre-Karte für Wechsel nach dem Mounten.

Basemap-Anfragen übertragen deinen Schlüssel automatisch​

Kaleidr-Basiskarten sind schlüsselautorisiert — tile.kaleidr.com lehnt Browser- Origins ab, die nicht bekannt sind. Das Embed fügt daher deinen Publishable Key automatisch über MapLibres transformRequest zu Basemap-Anfragen hinzu:

// what the embed does internally — you don't write this
transformRequest: (url) =>
  url.startsWith('https://tile.kaleidr.com/')
    ? { url: `${url}?key=kld_pk_live_…` }
    : { url };

Zwei wichtige Konsequenzen:

  • Die erlaubten Origins deines Schlüssels müssen den Origin der Seite enthalten. Ein Schlüssel, der ohne den Origin deiner Website erstellt wurde, liefert 429 tile_access_restricted für jedes Tile. Aktualisiere ihn unter kaleidr.com/api-keys.
  • Nur Kaleidr-Tile-URLs werden umgeschrieben. Wenn du eine styleUrl auf einem anderen Host übergibst, lässt das Embed diese Anfragen unverändert — dein Schlüssel wird niemals an einen Drittanbieter-Origin angehängt.