将 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 作用域。