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

يتطلب مفتاح publishable بنطاق ai ضمن خطة Pro أو أعلى. يجب أن يكون origin الخاص بصفحتك ضمن 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 MapLibre تلقائيًا وتعمل مع أي style تستخدمه خريطتك بالفعل. للحصول على خريطة مصممة بالكامل بواسطة Kaleidr، قم بتركيب designed basemap باستخدام <kaleidr-map product="tile"> و مفتاح publishable الخاص بك بدلًا من توجيه MapLibre إلى raw style URL — يتم التصريح بالوصول إلى basemap بواسطة مفتاحك، ولا توجد tile API غير موثقة. تتم الفوترة ضمن نطاق ai.