Zum Hauptinhalt springen

Kaleidr AI an eine Mapbox-Karte anhängen

Hänge den Control Tower an eine vorhandene Mapbox-GL-Karte an.

Erfordert einen Publishable Key mit ai-Scope auf Pro oder höher. Der Origin deiner Seite muss in der Allowlist des Schlüssels stehen und über HTTP(S) ausgeliefert werden — siehe API-Schlüssel erhalten.

<link rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.css">
<div id="mapHost" style="height:520px;position:relative">
  <div id="map" style="position:absolute;inset:0"></div>
  <div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>

<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  mapboxgl.accessToken = 'pk.…';
  const map = new mapboxgl.Map({ container: 'map', center: [-0.12, 51.5], zoom: 11 });

  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,        // dock inside #chat, not on document.body
  });
</script>

Hinweise zu diesem Snippet:

  • mapbox-gl.css ist nicht optional — ohne diese Datei ist die Karte unsichtbar.
  • Sowohl JS als auch CSS sind auf eine bestimmte Version (3.9.4) gepinnt. Nicht versionierte unpkg- / api.mapbox.com-URLs ergeben keinen reproduzierbaren Quickstart.
  • contained: true dockt das Chat-Panel innerhalb von #chat an. Ohne diese Option schwebt das Panel auf document.body und wirkt über der Karte fehlerhaft.

Das Chat-Panel erkennt Mapbox automatisch, stellt aufgelöste Orte als Marker auf deiner Karte dar und passt die Kamera an, während sich die Unterhaltung bewegt. Die Nutzung wird über den ai-Scope abgerechnet. Siehe Chat attach.