نقشه کیفیت هوای لحظه‌ای پروژه شاخص کیفیت هوای جهانی را می‌توان با یک تگ اسکریپت در هر وب‌سایتی جاسازی کرد. این نقشه، شاخص کیفیت هوای زنده تمام ایستگاه‌های پایش اطراف مکان انتخاب‌شده را نشان می‌دهد و به‌طور خودکار به‌روزرسانی می‌شود.

کد زیر را در جایی که نقشه باید در صفحه شما نمایش داده شود، کپی کنید:

<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="fa"
        data-height="450"></script>

نتیجه (برای به‌روزرسانی کد بالا، نقشه را حرکت دهید یا بزرگنمایی کنید):

برای جلوگیری از تأخیر در رندر صفحه، اسکریپت را می‌توان به صورت غیرهمزمان، با استفاده از ویژگی async یا defer بارگذاری کرد. از آنجایی که اسکریپت در موقعیت خود در صفحه اجرا نمی‌شود، ویژگی data-dom-target برای مشخص کردن عنصری که نقشه در آن درج شده است، لازم است. این عنصر را می‌توان در هر جایی از صفحه، قبل یا بعد از تگ script، قرار داد.

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

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="fa"
        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", "fa");
  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/fa/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>