Map-Editor-SDK: Kartenerstellung in ein SaaS-Produkt integrieren

Ein Map-Editor-SDK ermöglicht die Kartenerstellung oder -bearbeitung direkt in einem SaaS-Produkt, ohne Nutzer in einen separaten Builder zu zwingen. Die Host-Anwendung behält die Kontrolle über Identitäten, Berechtigungen, Projekte, Abrechnung, Datenhoheit und Veröffentlichungsrichtlinien; das SDK stellt die Zeichenfläche und Werkzeuge innerhalb der Seite bereit. Kaleidr Editor bindet eine eigene MapLibre-Karte ein, authentifiziert sich mit einem auf Ursprungsdomains beschränkten veröffentlichbaren Schlüssel und hält Änderungen im Arbeitsspeicher, bis der Host eine Persistenzlösung definiert.

Die folgenden Abschnitte behandeln Produktgrenzen, Architektur, Einbindung, Persistenz, Sicherheit, UX und häufige Fehler. Informationen zur dialogorientierten Anbindung an einen aktiven Renderer finden Sie unter KI-Chat zu einer Karte hinzufügen. Einen Überblick über die übergeordnete SDK-Kategorie bietet Was ist ein KI-Karten-SDK?.

Grundlagen eines Map-Editor-SDKs

• Bearbeitungsfläche vs. Produkt: Der Editor verwaltet die Bearbeitungsfläche; der Host verwaltet Nutzer, Projekte, Berechtigungen, Persistenz und Veröffentlichung.
• Standardmäßig im Arbeitsspeicher: Der eigenständige Kaleidr Editor speichert Änderungen nicht dauerhaft. Planen Sie Speichern und Veröffentlichen vor dem Start.
• Veröffentlichbarer Schlüssel + design: Verwenden Sie einen auf Ursprungsdomains beschränkten Browser-Schlüssel mit dem Scope design; geben Sie niemals Server-Schlüssel preis.
• Einmal einbinden, einmal zerstören: Koppeln Sie den Lebenszyklus an SPA-Routen und Mandantenwechsel.
• Veröffentlichungsrechte trennen: Die Berechtigung zur Bearbeitung eines Entwurfs ist nicht mit der Freigabe einer öffentlichen Karte gleichzusetzen.

Wie integrieren Sie ein Map-Editor-SDK in ein SaaS-Produkt?

Dieser Leitfaden integriert einen Arbeitsbereich zur Kartenerstellung in einen bestehenden SaaS-Ablauf. Nutzer können ein Projekt öffnen, auf einer MapLibre-Zeichenfläche arbeiten, einen Basiskartenstil wählen, verfügbare Werkzeuge auf der Karte verwenden und die Ansicht verlassen, ohne SDK-Zustand zurückzulassen. Sobald eine Persistenzintegration vorhanden ist, bleiben Speichern, Veröffentlichen und Übergabe unter Kontrolle des Hosts. Die Beispiele verwenden Kaleidr Editor, weil dessen In-Page-Editor über den gemeinsamen Loader dokumentiert ist. Dasselbe Zuständigkeitsmodell gilt bei der Bewertung anderer Map-Editor-SDKs von Drittanbietern.

Was unterscheidet ein Map-Editor-SDK von Studio, Viewer oder GIS?

Ein Map-Editor-SDK ist eine wiederverwendbare Komponente, die einer anderen Anwendung Autorenwerkzeuge wie Navigation, Auswahl, Zeichnen, Gestaltung und zugehörige Steuerelemente hinzufügt. Es sollte weder das Kontensystem noch die Datenbank, Berechtigungslogik, Prüfprotokolle oder Projektabläufe des Hosts ersetzen. Eine belastbare Abgrenzung lautet: Der Editor besitzt die Bearbeitungsfläche; das Host-Produkt besitzt Nutzer, Projekt, Berechtigungen, Persistenz und die Entscheidung über die Veröffentlichung.

Kaleidr Studio ist das vollständige, Prompt-orientierte Autorenprodukt mit dem Ablauf Prompt → Process → Refine → Deploy. Kaleidr Editor ist die einbettbare Bearbeitungsfläche. Kaleidr Viewer zeigt eine veröffentlichte Karte. Diese Wege teilen Rendering- und Stilkonzepte, sind aber keine austauschbaren Produktoberflächen.

Wie sollte die SaaS-Architektur den Editor-Zustand verwalten?

Ein produktiver Kartenbearbeitungsablauf braucht klare Zuständigkeiten für Produktoberfläche, Editor, Zugangsdaten, Backend-Richtlinien, Datensysteme und Bereitstellung. Das Host-SaaS besitzt Identität, Mandant, Navigation, Projekte, Abrechnung, Berechtigungen und Arbeitsabläufe. Kaleidr Editor besitzt die Bearbeitungsfläche in der Seite, seine MapLibre-Karte, den Lebenszyklus und die verfügbaren clientseitigen Werkzeuge. Ein veröffentlichbarer Schlüssel gewährt dem Browser Zugriff auf den Editor und die Funktion design. Das Host-Backend besitzt Autorisierung, Persistenz, Versionierung, Audit, Importe, Exporte und Veröffentlichungsrichtlinien. Maßgebliche Datensysteme besitzen Datensätze und Geschäftsregeln. Ein Viewer oder ein anderes Ziel liefert freigegebene, schreibgeschützte Ergebnisse aus.

Das Host-Backend darf einer vom Browser gelieferten Projekt-, Mandanten- oder Datensatz-ID beziehungsweise einem Veröffentlichungsziel nicht ohne erneute Autorisierung vertrauen. Durch die Einbindung wirkt die Kartenerstellung nativ, doch der Browser bleibt eine nicht vertrauenswürdige Umgebung. Die öffentliche Dokumentation legt fest, dass product: "editor" das Editor-Bundle auswählt, der Standardweg attach/in-process statt iframe ist, styleId eine Basiskarten-ID aus dem Katalog oder eine vollständige Stil-URL akzeptiert, kaleidr-morning die Standardbasiskarte ist und das Handle stets destroy() bereitstellt; Kamera- und Theme-Aktualisierungen sind verfügbar, sofern unterstützt. Die eigenständige Einbettung speichert Änderungen nicht dauerhaft und enthält ohne zusätzliche Backend-Konfiguration weder die vollständigen KI-gestützten Studio-Oberflächen noch Control Tower oder eine eigenständige 3D-Asset-Bibliothek.

Wie binden Sie Kaleidr Editor sicher ein?

Prüfen Sie Pro- oder Enterprise-Zugriff für API-Schlüssel und Einbettungen, einen für Editor zugelassenen veröffentlichbaren Schlüssel mit Scope design, exakt erlaubte Ursprungsdomains für Entwicklung, Staging und Produktion, ein Zielelement mit expliziter Höhe, einen Ausgangsstil, ein Host-Projekt- und Berechtigungsmodell, eine Persistenzstrategie sowie den SPA-Abbau. Laden Sie den versionierten Loader einmalig von https://cdn.kaleidr.com/embed/v1/kaleidr.js. Der Loader ist standardmäßig inaktiv; aktivieren Sie Einbettungen daher vor dem Laden oder übergeben Sie bei jeder Einbindung die Option enabled. Eine minimale Einbindung sieht so aus:

const editor = Kaleidr.mount("#editor", {
  product: "editor",
  publishableKey: "kld_pk_live_REPLACE_ME",
  styleId: "kaleidr-morning",
  enabled: true
});

window.addEventListener("pagehide", () => {
  editor.destroy();
});

Ersetzen Sie den Platzhalterschlüssel durch einen echten veröffentlichbaren Schlüssel, reservieren Sie ausreichend Höhe für die Bearbeitungswerkzeuge und geben Sie Lade- oder Fehlerstatus außerhalb der Karte bekannt. Das Beispiel folgt der aktuellen Editor-Attach-Referenz, dem Editor-Integrationsleitfaden und der kaleidr.js-Loader-Referenz. Es bindet den Editor ein, speichert aber die In-Memory-Spezifikation nicht, weil die öffentliche Handle-Referenz keine Persistenzmethoden dokumentiert. Das Element <kaleidr-map> kann product="editor" zusammen mit publishable-key und style-id verwenden, wenn deklaratives Markup ausreicht. Bevorzugen Sie die imperative API, wenn der Host ein ausdrückliches Handle oder einen vom Framework verwalteten Lebenszyklus benötigt. Binden Sie in React oder einer anderen SPA den Editor einmal in einem Effect ein und rufen Sie bei der Bereinigung destroy() auf. Führen Sie nicht bei jeder Änderung eines Formularfelds eine neue Einbindung durch.

Wie planen Sie Persistenz, Sicherheit und UX?

Die eigenständige Einbettung hält Änderungen im Arbeitsspeicher. Teams wählen üblicherweise einen von drei Wegen: den Editor als temporäre Oberfläche für Prototypen zu verwenden; die vollständige Autorenarbeit in Kaleidr Studio zu belassen, wenn Nutzer die SaaS-Oberfläche verlassen können; oder einen hostintegrierten Ablauf mit Projektladen, Validierung, Entwurfsspeicherung, Versionierung, Konfliktbehandlung, Freigabe, Veröffentlichung, Rollback und Audit aufzubauen. Die öffentliche Editor-SDK-Referenz dokumentiert keine frei erfindbaren Methoden wie nicht ausgewiesene Speicher- oder Änderungs-Listener. Klären Sie daher die unterstützte Zustandsübertragung mit Kaleidr, bevor Sie Kunden eine Speicherfunktion zusagen. Plattform-Routen unter design, etwa Datensatzanalyse, partielle Anwendung einer Kartenspezifikation oder Stil- und Theme-Kataloge, gehören hinter einem Server-Schlüssel in das Host-Backend. Der Browser-Editor verwendet über das SDK weiterhin den veröffentlichbaren Schlüssel.

Beschränken Sie veröffentlichbare Schlüssel auf genaue Ursprungsdomains, verlangen Sie außerhalb der lokalen Entwicklung HTTPS, begrenzen Sie Schlüssel auf design und ausschließlich benötigte Produkte und zerstören Sie den Editor beim Konto- oder Mandantenwechsel. Autorisieren Sie im Backend jedes Projekt und jeden Datensatz nach Nutzer und Mandant, prüfen Sie Besitzverhältnisse unabhängig vom Browser-Zustand, validieren Sie Kartenspezifikationen vor Speicherung oder Veröffentlichung und trennen Sie Rechte für Entwurf, Prüfung und Veröffentlichung. Die OWASP API Security Top 10 führt mangelhafte Autorisierung auf Objektebene als zentrales Risiko auf. Eine vom Browser gelieferte Projekt-ID reicht daher niemals als Autorisierung. Lassen Sie die Produktoberfläche sichtbar, damit Nutzer erkennen, welches Projekt sie bearbeiten. Platzieren Sie Speichern und Veröffentlichen in der Host-Oberfläche, statt aus reinen In-Memory-Änderungen fälschlich den Status „Gespeichert“ abzuleiten, und reservieren Sie mehr vertikalen Raum als für einen Viewer üblich. Versehen Sie den Editorbereich mit einer barrierefreien Bezeichnung, erhalten Sie den Tastaturzugriff auf umgebende Aktionen, vermeiden Sie Fokusfallen, geben Sie Speicher- und Fehlerstatus bekannt und bieten Sie nach Möglichkeit Alternativen zu Drag-and-drop gemäß WCAG 2.2.

Fazit

Ein Map-Editor-SDK kann einem SaaS-Produkt Kartenerstellung hinzufügen, ohne eine vollständige Bearbeitungsfläche, Renderer-Integration und Browser-Authentifizierung von Grund auf neu zu entwickeln. Kaleidr Editor bietet derzeit eine einbettbare, MapLibre-basierte In-Page-Oberfläche, die über einen veröffentlichbaren Schlüssel mit dem Scope design authentifiziert wird. Da die eigenständige Einbettung Änderungen im Arbeitsspeicher hält, entspricht das Einbinden des Editors noch keinem vollständigen persistenten Autorensystem. Wählen Sie das Editor SDK, wenn das Produkt eine integrierte Bearbeitungsfläche benötigt und das Host-Team Projekte, Berechtigungen, Persistenz, Veröffentlichung und Auditierbarkeit übernimmt. Wählen Sie Kaleidr Studio, wenn ein separater vollständiger Autorenablauf akzeptabel ist. Klären Sie die Zustandsübertragung und mögliche KI-gestützte Schnittstellen, bevor Sie Kunden eine Speicherfunktion zusagen.

Kartenbearbeitung zu Ihrem SaaS-Produkt hinzufügen

Binden Sie Kaleidr Editor mit dem versionierten JavaScript-Loader, einem auf Ursprungsdomains beschränkten veröffentlichbaren Schlüssel und dem Scope design ein. Lesen Sie den Editor-Integrationsleitfaden zu Einbindungsoptionen und Lebenszyklus. Informationen zu Authentifizierung, Design-Endpunkten und hostintegrierten Abläufen finden Sie in der Entwicklerdokumentation und den Anforderungen für Enterprise.

Häufig gestellte Fragen

Was ist ein Map-Editor-SDK?

Ein Map-Editor-SDK ist eine wiederverwendbare Komponente, die einer anderen Anwendung Werkzeuge zur Kartenerstellung oder -bearbeitung hinzufügt. Das Host-Produkt behält üblicherweise Nutzer, Projekte, Berechtigungen, Persistenz und Veröffentlichung.

Kann Kaleidr Editor in ein SaaS-Produkt eingebettet werden?

Ja. Das aktuelle SDK dokumentiert product: "editor" für die Einbindung in ein Zielelement. Der Editor erstellt auf der Seite eine eigene MapLibre-Karte.

Speichert der eigenständige Editor die Karten der Nutzer?

Nein. Laut öffentlicher Dokumentation liegen Änderungen in einer In-Memory-Spezifikation und werden von der eigenständigen Einbettung nicht gespeichert. Planen Sie vor dem Start eine hostseitige Persistenz.

Welche Zugangsdaten verwendet der Editor?

Verwenden Sie über das SDK einen veröffentlichbaren Browser-Schlüssel mit dem Scope design, der auf genehmigte Ursprungsdomains beschränkt ist. Platzieren Sie niemals einen Server-Schlüssel im Browser-Code.

Sind Kaleidr Editor und Kaleidr Studio dasselbe?

Nein. Studio ist das vollständige, Prompt-orientierte Produkt zur Erstellung und Veröffentlichung. Editor ist die einbettbare Bearbeitungsfläche zur Verwendung in einer anderen Anwendung.

References

• Kaleidr. Attach the Map Editor. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/guides/attach-the-editor
• Kaleidr. Auth & Scopes. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/auth-and-scopes
• Kaleidr. CORS & Allowed Origins. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/cors-and-allowed-origins
• Kaleidr. Editor — Mount the Map Editor. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/sdk/editor-attach
• Kaleidr. Endpoints. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/endpoints
• Kaleidr. kaleidr.js — the Loader. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/sdk/kaleidr-js
• Kaleidr. Pricing & Plans. kaleidr.com. Accessed 3 August 2026. https://kaleidr.com/pricing
• MapLibre. Map — MapLibre GL JS. Accessed 3 August 2026. https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
• OWASP. OWASP Top 10 API Security Risks — 2023. Accessed 3 August 2026. https://owasp.org/API-Security/editions/2023/en/0x11-t10/
• World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2. Accessed 3 August 2026. https://www.w3.org/TR/WCAG22/

@misc{kaleidr_editor_attach,
  title  = {Editor -- Mount the Map Editor},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/sdk/editor-attach}
}

@misc{kaleidr_editor_guide,
  title  = {Attach the Map Editor},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/guides/attach-the-editor}
}

@misc{kaleidr_loader,
  title  = {kaleidr.js -- the Loader},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/sdk/kaleidr-js}
}

@misc{kaleidr_auth_scopes,
  title  = {Auth and Scopes},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/platform-api/auth-and-scopes}
}

@misc{owasp_api_security,
  title  = {OWASP Top 10 API Security Risks -- 2023},
  author = {{OWASP}},
  note   = {Accessed 3 August 2026},
  url    = {https://owasp.org/API-Security/editions/2023/en/0x11-t10/}
}

@misc{wcag22,
  title  = {Web Content Accessibility Guidelines 2.2},
  author = {{World Wide Web Consortium}},
  note   = {Accessed 3 August 2026},
  url    = {https://www.w3.org/TR/WCAG22/}
}