La mappa in tempo reale della qualità dell'aria del progetto World Air Quality Index può essere integrata in qualsiasi sito web con un singolo tag script. La mappa mostra l'indice di qualità dell'aria in tempo reale di tutte le stazioni di monitoraggio intorno alla località selezionata e viene aggiornata automaticamente.

Copia il codice seguente nel punto in cui la mappa dovrebbe apparire sulla tua pagina:

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

Risultato (sposta o ingrandisci la mappa per aggiornare il codice sopra):

Per evitare di ritardare il rendering della pagina, lo script può essere caricato in modo asincrono, utilizzando l'attributo async o defer . Poiché in questo caso lo script non viene eseguito nella posizione indicata nella pagina, è necessario specificare l'attributo data-dom-target per indicare l'elemento in cui inserire la mappa. L'elemento può essere posizionato ovunque nella pagina, prima o dopo il tag `<script>`.

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

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

Risultato:

Caricamento dello script da javascript

Lo script può essere inserito anche dinamicamente, ad esempio da un tag manager o da un'applicazione a pagina singola. Si applica la stessa regola 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", "it");
  document.head.appendChild(s);
</script>

La mappa è configurata con i seguenti attributi del tag script. Sono tutti opzionali, ad eccezione data-dom-target per il caricamento asincrono.

È possibile incorporare più mappe nella stessa pagina: utilizzare un tag script per ogni mappa.

Seleziona le opzioni seguenti per ottenere il codice della tua mappa e visualizzarne l'anteprima.

• I link presenti sulla mappa (ad esempio, i dettagli della stazione) si aprono in una nuova scheda, in modo che i visitatori non debbano abbandonare la pagina.
• La mappa può essere incorporata in qualsiasi sito web servito tramite http o https . Non può essere visualizzata da una pagina aperta come file locale ( file:// ).
• Se la mappa viene inserita in un iframe in ambiente sandbox, quest'ultimo deve consentire almeno le seguenti opzioni: allow-scripts allow-same-origin allow-popups .
• Si prega di non rimuovere o nascondere l'attribuzione al progetto World Air Quality Index e alle fonti dei dati.

Utilizzo diretto di un iframe

Se non è possibile aggiungere script alla pagina, la mappa può essere incorporata anche tramite un semplice iframe. La posizione è parte dell'URL e la visualizzazione è definita dai parametri lat , lng e zoom :

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