Kaleidr AI を MapLibre マップにアタッチ

Pro 以上で ai scope を持つ publishable key が必要です。ページの origin は key の allowlist に登録され、HTTP(S) で配信されている必要があります — 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 と maplibre-gl.css はどちらも 5.17.0 に固定されています — version 未指定の unpkg.com/maplibre-gl/dist/* は再現可能ではありません。

chat bundle は MapLibre を自動検出し、現在マップで使用している どの style とも動作します。完全に Kaleidr style のマップにするには、MapLibre を raw style URL に 向ける代わりに、<kaleidr-map product="tile"> と publishable key を使用して designed basemap を mount してください — basemap access は key によって認証され、 認証なしの tile API はありません。ai scope に課金されます。