Ajouter Kaleidr AI à une carte MapLibre

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

maplibre-gl.js et maplibre-gl.css sont tous deux épinglés à 5.17.0 — la version non versionnée unpkg.com/maplibre-gl/dist/* n’est pas reproductible.

Le bundle chat détecte automatiquement MapLibre et fonctionne avec n’importe quel style déjà utilisé par votre carte. Pour une carte entièrement stylée par Kaleidr, montez un designed basemap avec <kaleidr-map product="tile"> et votre clé publishable au lieu de pointer MapLibre vers une raw style URL — l’accès au basemap est autorisé par votre clé et il n’existe aucune tile API sans authentification. La facturation utilise le scope ai.