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