將 Kaleidr AI 連接至 MapLibre 地圖

需要 Pro 或更高方案中具有 ai 範圍的 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 — 未指定版本的 unpkg.com/maplibre-gl/dist/* 無法重現。

chat bundle 會自動偵測 MapLibre，並可與您的地圖目前使用的任何 style 配合運作。如果需要完全採用 Kaleidr 樣式的地圖，請使用 <kaleidr-map product="tile"> 與您的 publishable key 掛載 designed basemap，而不是讓 MapLibre 直接指向 raw style URL — basemap access 由您的 key 授權，並不存在未驗證的 tile API。使用量計入 ai 範圍。