يمكنك تضمين أي من خرائط جودة الهواء في الوقت الفعلي من موقع aqicn.org على موقعك الإلكتروني باستخدام علامة نصية واحدة.

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

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-lang="ar"
        data-height="450"></script>

النتيجة (قم بتحريك الخريطة أو تكبيرها لتحديث الكود أعلاه):

لتجنب تأخير عرض صفحتك، يمكن تحميل البرنامج النصي بشكل غير متزامن باستخدام السمة async أو defer . ولأن البرنامج النصي لا يُنفذ في موضعه المحدد في الصفحة، فإن السمة data-dom-target ضرورية لتحديد العنصر الذي تُدرج فيه الخريطة. يمكن وضع هذا العنصر في أي مكان في الصفحة، قبل أو بعد وسم البرنامج النصي.

<div id="aqi-map"></div>

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="ar"
        data-dom-target="aqi-map"
        data-height="450"></script>

نتيجة:

تحميل البرنامج النصي من جافا سكريبت

يمكن أيضًا إدراج النص البرمجي ديناميكيًا، على سبيل المثال من مدير العلامات أو تطبيق صفحة واحدة. وينطبق نفس مبدأ data-dom-target :

<div id="aqi-map"></div>

<script>
  var s = document.createElement("script");
  s.src = "https://aqicn.org/maplet/embed.v1.js";
  s.setAttribute("data-city", "london");
  s.setAttribute("data-dom-target", "aqi-map");
  s.setAttribute("data-lang", "ar");
  document.head.appendChild(s);
</script>

تم تكوين الخريطة باستخدام السمات التالية لعلامة البرنامج النصي. جميعها اختيارية، باستثناء data-dom-target للتحميل غير المتزامن.

يمكن تضمين عدة خرائط في نفس الصفحة: استخدم علامة نصية واحدة لكل خريطة.

املأ الخيارات أدناه للحصول على رمز خريطتك، ومعاينتها.

• تفتح الروابط الموجودة في الخريطة (مثل تفاصيل المحطة) في علامة تبويب جديدة، حتى لا يغادر الزوار صفحتك.
• يمكن تضمين الخريطة في أي موقع ويب يتم تقديمه عبر http أو https . ولا يمكن عرضها من صفحة مفتوحة كملف محلي ( file:// ).
• إذا تم وضع الخريطة في إطار iframe معزول، فيجب أن يسمح الإطار المعزول على الأقل بـ allow-scripts allow-same-origin allow-popups .
• يرجى عدم إزالة أو إخفاء الإشارة إلى مشروع مؤشر جودة الهواء العالمي ومصادر البيانات.

استخدام إطار iframe مباشرة

إذا لم تتمكن من إضافة نصوص برمجية إلى صفحتك، فيمكنك تضمين الخريطة باستخدام إطار iframe عادي. الموقع جزء من عنوان URL، ويتم ضبط العرض باستخدام معلمات lat lng والتكبير zoom .

<iframe src="https://aqicn.org/maplet/london/ar/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>