Možete ugraditi bilo koju od karata kvalitete zraka u stvarnom vremenu s aqicn.org na svoju web stranicu pomoću jedne oznake skripte.

Kopirajte donji kod na mjesto gdje bi se karta trebala pojaviti na vašoj stranici:

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

Rezultat (premjestite ili zumirajte kartu kako biste ažurirali gornji kod):

Kako biste izbjegli odgađanje prikazivanja stranice, skripta se može učitati asinkrono, s atributom async ili defer . Budući da se skripta tada ne izvršava na svojoj poziciji na stranici, atribut data-dom-target je potreban za određivanje elementa u koji se umeće mapa. Element se može postaviti bilo gdje na stranici, prije ili poslije oznake skripte.

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

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

Proizlaziti:

Učitavanje skripte iz javascripta

Skripta se također može dinamički umetnuti, na primjer iz upravitelja oznaka ili aplikacije za jednu stranicu. Primjenjuje se isto pravilo 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", "hr");
  document.head.appendChild(s);
</script>

Mapa je konfigurirana sa sljedećim atributima oznake skripte. Svi su opcionalni, osim data-dom-target za asinkrono učitavanje.

Na istu stranicu može se ugraditi nekoliko mapa: koristite jednu oznaku skripte po mapi.

Ispunite donje opcije kako biste dobili kod za svoju kartu i pregledali je.

• Linkovi na karti (npr. detalji stanice) otvaraju se u novoj kartici, tako da posjetitelji ne napuštaju vašu stranicu.
• Karta se može ugraditi na bilo koju web stranicu koja se poslužuje putem http ili https . Ne može se prikazati sa stranice otvorene kao lokalna datoteka ( file:// ).
• Ako se karta nalazi u sandbox iframeu, sandbox mora barem dopustiti allow-scripts allow-same-origin allow-popups .
• Molimo vas da ne uklanjate ili skrivate pripisivanje projekta Svjetskog indeksa kvalitete zraka i izvorima podataka.

Izravno korištenje iframea

Ako ne možete dodati skripte na svoju stranicu, karta se može ugraditi i običnim iframeom. Lokacija je dio URL-a, a prikaz se postavlja parametrima lat , lng i zoom :

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