Вы можаце ўбудаваць любую з карт якасці паветра ў рэжыме рэальнага часу з сайта 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="be"
        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="be"
        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", "be");
  document.head.appendChild(s);
</script>

Карта наладжваецца з наступнымі атрыбутамі тэга 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/be/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>