Zum Hauptinhalt springen

Schnellstart

Bette eine Kaleidr-Karte in zwei Zeilen ein.

1. Loader hinzufügen​

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js ist sehr klein — es enthält weder MapLibre noch React. Es lädt das tatsächlich verwendete Produkt-Bundle bei Bedarf von cdn.kaleidr.com/embed/v1/<product>.js.

2. Element hinzufügen​

Beide Optionen funktionieren im Free-Tarif. Viewer wird über einen Share-Link autorisiert (ganz ohne Schlüssel); Tile verwendet einen Free-Publishable-Key, der auf maps / tile beschränkt ist.

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

Zwei Voraussetzungen, auf die der Browser dich nicht hinweist — siehe API-Schlüssel erhalten für die genauen Schritte:

  1. Der Origin deiner Seite muss in der Origin-Allowlist des Schlüssels stehen, sonst wird der Session-Austausch des SDK mit session_origin_mismatch abgelehnt. file://- Embeds schlagen immer fehl — nutze HTTP(S).
  2. Deine CSP muss den SDK-Loader und den Karten-iframe erlauben — siehe Content Security Policy.

Oder imperativ mounten​

Hänge KI-Chat an eine bereits auf der Seite vorhandene Karte an. Chat benötigt den ai-Scope und Pro oder höher — Free-Schlüssel können keine Chat-Session erstellen. contained: true dockt das Panel im Mount-Element an; andernfalls weicht das Panel auf document.body aus.

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google instance
  contained: true,
});

// later: handle.destroy();

Kaleidr.mount(target, opts) gibt synchron ein Handle zurück; das Produkt- Bundle lädt im Hintergrund und aufgeschobene Aufrufe werden nach dem Laden ausgeführt. Hinweis: handle.setCamera(...) ist bei Chat ein no-op — das Chat-Handle steuert die Kartenkamera nicht. Verwende die Kamera-API deiner Karteninstanz.

Weiter​