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

Скопируйте приведенный ниже код в то место на вашей странице, где должна отображаться карта:

<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="ru"
        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="ru"
        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", "ru");
  document.head.appendChild(s);
</script>

Карта настраивается с помощью следующих атрибутов тега <script>. Все они являются необязательными, за исключением data-dom-target для асинхронной загрузки.

На одной странице можно разместить несколько карт: для каждой карты используйте отдельный тег script.

Заполните поля ниже, чтобы получить код для вашей карты и просмотреть её.

• Ссылки на карте (например, подробная информация о станции) открываются в новой вкладке, чтобы посетители не покидали вашу страницу.
• Карту можно встроить на любой веб-сайт, работающий по протоколам http или https . Её нельзя отобразить со страницы, открытой как локальный файл ( file:// ).
• Если карта размещена в изолированном iframe, то в этой песочнице должны быть разрешены как минимум allow-scripts allow-same-origin allow-popups .
• Пожалуйста, не удаляйте и не скрывайте информацию об авторстве проекта «Всемирный индекс качества воздуха» и об источниках данных.

Использование iframe напрямую

Если вы не можете добавить скрипты на свою страницу, карту можно также встроить с помощью обычного iframe. Местоположение указывается в URL-адресе, а отображение задается параметрами lat , lng и zoom :

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