將 Kaleidr AI 連接至 Mapbox 地圖

將 Control Tower 連接至現有的 Mapbox GL 地圖。

需要 Pro 或更高方案中具有 ai 範圍的 publishable key。您頁面的 origin 必須位於該 key 的 allowlist 中，並透過 HTTP(S) 提供 — 請參閱 取得 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>

關於此 snippet 的說明：

• mapbox-gl.css 不是選用項目 — 缺少它時地圖不可見。
• JS 與 CSS 都固定為特定版本（3.9.4）。未指定版本的 unpkg / api.mapbox.com URL 無法構成可重現的 quickstart。
• contained: true 會將 chat panel 固定在 #chat 內。否則 panel 會浮動在 document.body 上方，在地圖上看起來像是損壞。

chat panel 會自動偵測 Mapbox，將解析出的地點作為 marker 繪製在您的地圖上，並隨著對話推進調整相機視野。 使用量計入 ai 範圍。請參閱 Chat attach。