L'integrazione di base è semplice e diretta. Devi prima aggiungere il seguente pezzo di codice:

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

Quindi, aggiungi semplicemente questo altro codice per includere il widget:

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

La funzione `_aqiFeed` prende come argomento il blocco di configurazione per il widget. Il parametro `container: "city-aqi-container"` si riferisce all'id del tag in cui si vuole inserire il widget (es. `<span id='city-aqi-container'></span>`), e il parametro city il nome della città per la quale si desidera mostrare la lettura attuale della qualità dell'aria (ad esempio `city: "london"`).

È inoltre possibile specificare la lingua da utilizzare impostando l'opzione lang . Ad esempio, per includere il widget in cinese (come mostrato a destra), utilizza il seguente codice:

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

Le lingue attualmente supportate sono:

È possibile personalizzare il testo da visualizzare all'interno del widget specificando l'opzione display . Ad esempio, per visualizzare sia il nome testuale "AQI" che l'orario di aggiornamento (come mostrato nel widget a sinistra), è possibile utilizzare il seguente codice:

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

Il parametro display è una stringa basata su HTML e può contenere una qualsiasi delle seguenti parole chiave:

• `%cityname` per il nome della città (ad esempio Beijing ),
• `%aqi` per il valore AQI decorato (ad esempio 58 ),
• "%aqiv" per il valore AQI non decorato (testo grezzo) (ad esempio 58 ),
• `%style` per la dichiarazione css dei dettagli AQI decorati (ad esempio background-color: #ffde33;color:#000000; ),
• "%date" per l'ora in cui l'AQI è stato aggiornato (ad esempio Wed 20:00 ),
• "%impact" per l'impatto sulla salute associato (ad es. Good , Moderate ...)
• "%attribution" per l'attribuzione dei dati AQI (ad es. Beijing Environmental Protection Monitoring Center )
• "%dettagli" per i dettagli AQI completi (il contenuto del popup visualizzato quando si sposta il mouse sul valore AQI).

Ecco alcuni esempi:

Se preferisci l'integrazione fai-da-te, puoi anche specificare una richiamata della funzione JavaScript da eseguire quando i dati vengono caricati. Devi solo aggiungere l'opzione callback nel blocco parametri, come ad esempio:

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

Ad esempio, supponendo che tu stia utilizzando anche jquery, il seguente codice:

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

produrrà il seguente contenuto:

Gli oggetti aqi contengono tutte le parole chiave menzionate nella sezione C (formato di visualizzazione).

È possibile includere più widget in una singola pagina. Tutto ciò che serve è passare alla funzione `_aqiFeed` un array con tutti i widget che devi includere. Ad esempio, per inserire Londra, Parigi e New York, potete utilizzare questo codice:

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

Questo feed widget è fornito gratuitamente e al solo scopo di integrare il feed in altri siti Web (ad esempio, le app sono escluse) e a condizione di un utilizzo ragionevole e accettabile. Ci riserviamo il diritto di modificare la struttura del feed (formato dei dati) in qualsiasi momento e senza preavviso, quindi è meglio contattarci se prevedi di effettuare un'integrazione personalizzata.

Quando si esegue l'integrazione, ci sono alcune regole deontologiche che dovrebbero essere applicate quando si utilizza il feed di dati:

• Innanzitutto, assicurati sempre che sia presente l'attribuzione all'APE di origine. Tutti i dati sulla qualità dell'aria che puoi trovare sul progetto World Air Quality Index sono frutto del duro lavoro di tutte le EPA di tutto il mondo, quindi assicurati di fornire anche l'attribuzione per il loro lavoro. Se utilizzi l'API programmatica, l'attribuzione è disponibile dal campo attribution .
• Se appartieni a un'istituzione e utilizzi i dati, per favore, mostra rispetto e ripaga i crediti per il nostro lavoro. Se stai cercando di recuperare il feed di dati, tieni presente che questo progetto si basa su progetti di sponsorizzazione e cooperazione, quindi considera di supportarci piuttosto che eliminarci, soprattutto se sei un'istituzione o un'università su larga scala.
• In realtà, non comportatevi come il WRI ( World Resource Institute ): eliminando il feed di dati complessivo del progetto World Air Quality Index e comportandosi così a buon mercato da non dare nemmeno alcuna attribuzione per il nostro lavoro, e questo nonostante i loro 80 anni. milioni di finanziamenti annuali in USD. Non ci credi? Controlla questa istantanea .

Questa è la prima versione di questa nuova API del feed widget. Ci sono già alcuni miglioramenti in cantiere, come larghezza e altezza grafica regolabili, scala AQI selezionabile, ecc. Se desideri suggerire altri miglioramenti specifici, sentiti libero di inviarci un messaggio.