إنتقل إلى المحتوى الرئيسي

البدء السريع

قم بتضمين خريطة Kaleidr في سطرين.

1. إضافة المحمّل​

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js صغير جدًا — فهو لا يتضمن MapLibre ولا React. ويقوم بالتحميل الكسول لحزمة المنتج التي تستخدمها فعليًا من cdn.kaleidr.com/embed/v1/<product>.js.

2. إضافة عنصر​

كلا الخيارين يعملان ضمن خطة Free. Viewer مقيد برابط المشاركة (دون مفتاح إطلاقًا)؛ بينما يستخدم Tile مفتاح publishable من خطة Free ومقيدًا بـ maps / tile.

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

هناك متطلبان أساسيان لن يخبرك المتصفح عنهما — راجع الحصول على مفتاح API لمعرفة الخطوات الدقيقة:

  1. يجب أن يكون أصل صفحتك ضمن قائمة الأصول المسموح بها للمفتاح، وإلا فسيتم رفض تبادل جلسة SDK باستخدام session_origin_mismatch. تضمينات file:// تفشل دائمًا — استخدم HTTP(S).
  2. يجب أن يسمح CSP الخاص بك بمحمّل SDK وiframe الخاص بالخريطة — راجع Content Security Policy.

أو قم بالتركيب برمجيًا​

أرفق دردشة AI بخريطة موجودة بالفعل في الصفحة. يتطلب Chat نطاق ai وخطة Pro أو أعلى — لا يمكن لمفاتيح Free إنشاء جلسة Chat. contained: true يثبت اللوحة داخل عنصر التركيب؛ وبدونه تخرج اللوحة إلى document.body.

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google instance
  contained: true,
});

// later: handle.destroy();

تعيد Kaleidr.mount(target, opts) مقبضًا بشكل متزامن؛ ويتم تحميل حزمة المنتج في الخلفية ثم تُنفذ الاستدعاءات الموجودة في قائمة الانتظار بعد التحميل. ملاحظة: handle.setCamera(...) هي no-op في chat — مقبض chat لا يتحكم في كاميرا الخريطة. استخدم API الخاص بالكاميرا في مثيل الخريطة لديك.

التالي​