Ajouter Kaleidr AI à une carte Mapbox

Ajoutez le Control Tower à une carte Mapbox GL existante.

Nécessite une clé publishable avec le scope ai sur un forfait Pro ou supérieur. L’ origin de votre page doit figurer dans l’allowlist de la clé et être servi en HTTP(S) — consultez Obtenir une clé API.

<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>

Remarques sur cet extrait :

• mapbox-gl.css n’est pas facultatif — la carte est invisible sans lui.
• JS et CSS sont tous deux épinglés à une version précise (3.9.4). Les URL non versionnées de unpkg / api.mapbox.com ne constituent pas un quickstart reproductible.
• contained: true ancre le panneau chat dans #chat. Sans cela, le panneau flotte sur document.body et semble cassé au-dessus de la carte.

Le panneau chat détecte automatiquement Mapbox, affiche les lieux résolus sous forme de marqueurs sur votre carte et recadre la caméra à mesure que la conversation avance. La facturation utilise le scope ai. Consultez Chat attach.