إرفاق Kaleidr AI بخريطة Mapbox

أرفق Control Tower بخريطة Mapbox GL موجودة.

يتطلب مفتاح publishable بنطاق ai ضمن خطة Pro أو أعلى. يجب أن يكون origin الخاص بصفحتك ضمن 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>

ملاحظات حول هذا المقتطف:

• mapbox-gl.css ليس اختياريًا — لن تظهر الخريطة بدونه.
• تم تثبيت كل من JS وCSS على إصدار محدد (3.9.4). عناوين URL غير محددة الإصدار من unpkg / api.mapbox.com ليست quickstart قابلًا لإعادة الإنتاج.
• contained: true يثبت لوحة chat داخل #chat. وبدونه تطفو اللوحة فوق document.body وتبدو معطلة فوق الخريطة.

تكتشف لوحة chat Mapbox تلقائيًا، وتعرض الأماكن التي تم تحديدها كـ markers على خريطتك، وتضبط إطار الكاميرا مع تطور المحادثة. تتم الفوترة ضمن نطاق ai. راجع Chat attach.