Карту якості повітря в режимі реального часу проєкту World Air Quality Index можна вбудувати на будь-який веб-сайт за допомогою одного тегу скрипта. Карта відображає індекс якості повітря в режимі реального часу всіх станцій моніторингу навколо вибраного місця та оновлюється автоматично.

Скопіюйте код нижче туди, де має з’явитися карта на вашій сторінці:

<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="uk"
        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="uk"
        data-dom-target="aqi-map"
        data-height="450"></script>

Результат:

Завантаження скрипта з javascript

Скрипт також можна вставляти динамічно, наприклад, з менеджера тегів або односторінкового застосунку. Застосовується те саме правило 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", "uk");
  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/uk/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>