Bármelyik aqicn.org valós idejű levegőminőségi térképet beágyazhatja webhelyére egyetlen szkriptcímkével.

Másold be az alábbi kódot oda, ahol a térképnek meg kell jelennie az oldaladon:

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

Eredmény (mozgassa vagy nagyítsa a térképet a fenti kód frissítéséhez):

Az oldal megjelenítésének késleltetésének elkerülése érdekében a szkript aszinkron módon tölthető be az async vagy defer attribútummal. Mivel a szkript ekkor nem a lapon belüli pozícióján fut, a data-dom-target attribútum szükséges annak az elemnek a megadásához, amelybe a map beszúrásra kerül. Az elem az oldal bármely pontján elhelyezhető, a szkript címke előtt vagy után.

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

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="hu"
        data-dom-target="aqi-map"
        data-height="450"></script>

Eredmény:

A szkript betöltése JavaScriptből

A szkript dinamikusan is beilleszthető, például egy címkekezelőből vagy egyoldalas alkalmazásból. Ugyanaz a data-dom-target szabály érvényes rá:

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

A térkép a szkriptcímke következő attribútumaival van konfigurálva. Ezek mind opcionálisak, kivéve data-dom-target aszinkron betöltéshez.

Több térkép is beágyazható ugyanazon az oldalon: térképenként egy szkriptcímkét használjon.

Töltsd ki az alábbi opciókat a térképed kódjának megszerzéséhez és előnézetének megtekintéséhez.

• A térképen található linkek (pl. állomás részletei) új lapon nyílnak meg, így a látogatók nem hagyják el az oldaladat.
• A térkép beágyazható bármely http vagy https protokollon keresztül kiszolgált weboldalba. Nem jeleníthető meg egy helyi fájlként ( file:// ) megnyitott oldalról.
• Ha a térkép egy sandboxos iframe-be kerül, a sandboxnak legalább allow-scripts allow-same-origin allow-popups engedélyeznie kell.
• Kérjük, ne távolítsa el vagy rejtse el a World Air Quality Index projekthez és az adatforrásokhoz való hozzárendelést.

iframe közvetlen használata

Ha nem tudsz szkripteket hozzáadni az oldaladhoz, a térkép beágyazható egy sima iframe-mel is. A helyszín az URL része, a nézetet pedig a lat , lng és zoom paraméterekkel állíthatod be:

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