Harta calității aerului în timp real a proiectului Indexul Calității Aerului la nivel mondial poate fi integrată pe orice site web cu o singură etichetă de script. Harta prezintă Indexul Calității Aerului în timp real al tuturor stațiilor de monitorizare din jurul locației selectate și este actualizată automat.

Copiați codul de mai jos unde ar trebui să apară harta pe pagina dvs.:

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

Rezultat (mutați sau măriți harta pentru a actualiza codul de mai sus):

Pentru a evita întârzierea randării paginii, scriptul poate fi încărcat asincron, cu atributul async sau defer . Deoarece scriptul nu rulează apoi în poziția sa din pagină, atributul data-dom-target este necesar pentru a specifica elementul în care este inserată harta. Elementul poate fi plasat oriunde în pagină, înainte sau după eticheta scriptului.

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

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

Rezultat:

Încărcarea scriptului din javascript

Scriptul poate fi inserat și dinamic, de exemplu dintr-un manager de etichete sau dintr-o aplicație cu o singură pagină. Se aplică aceeași regulă 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", "ro");
  document.head.appendChild(s);
</script>

Harta este configurată cu următoarele atribute ale etichetei de script. Toate sunt opționale, cu excepția data-dom-target pentru încărcarea asincronă.

Mai multe hărți pot fi încorporate pe aceeași pagină: utilizați o etichetă de script per hartă.

Completați opțiunile de mai jos pentru a obține codul pentru harta dvs. și a o previzualiza.

• Linkurile de pe hartă (de exemplu, detalii despre stație) se deschid într-o filă nouă, astfel încât vizitatorii să nu părăsească pagina.
• Harta poate fi încorporată pe orice site web servit prin http sau https . Nu poate fi afișată dintr-o pagină deschisă ca fișier local ( file:// ).
• Dacă harta este plasată într-un iframe cu sandbox, sandbox-ul trebuie să permită cel puțin allow-scripts allow-same-origin allow-popups .
• Vă rugăm să nu eliminați sau să nu ascundeți atribuirea către proiectul Indexului Mondial al Calității Aerului și către sursele de date.

Utilizarea directă a unui iframe

Dacă nu puteți adăuga scripturi pe pagina dvs., harta poate fi încorporată și cu un iframe simplu. Locația face parte din URL, iar vizualizarea este setată cu parametrii lat , lng și zoom :

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