Kaleidr AI an eine MapLibre-Karte anhängen

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://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-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://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json', // your own style here
    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>

Sowohl maplibre-gl.js als auch maplibre-gl.css sind auf 5.17.0 gepinnt — die nicht versionierte URL unpkg.com/maplibre-gl/dist/* ist nicht reproduzierbar.

Das Chat-Bundle erkennt MapLibre automatisch und funktioniert mit jedem Style, den deine Karte bereits verwendet. Für eine vollständig im Kaleidr-Stil gestaltete Karte mounte eine gestaltete Basemap mit <kaleidr-map product="tile"> und deinem Publishable Key, anstatt MapLibre auf eine rohe Style-URL zu verweisen — der Basemap-Zugriff wird durch deinen Schlüssel autorisiert und es gibt keine unauthentifizierte Tile-API. Die Nutzung wird über den ai-Scope abgerechnet.