Die grundlegende Integration ist einfach und unkompliziert. Sie müssen zunächst den folgenden Code hinzufügen:

  
<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>

Fügen Sie dann einfach diesen anderen Code hinzu, um das Widget einzubinden:

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

Die Funktion „_aqiFeed“ verwendet als Argument den Konfigurationsblock für das Widget. Der Parameter „container: „city-aqi-container““ bezieht sich auf die ID des Tags, in den Sie das Widget einfügen möchten (z. B. „<span id='city-aqi-container'></span>“), und der Parameter city der Name der Stadt, für die Sie den aktuellen Luftqualitätswert anzeigen möchten (z. B. „Stadt: „London““).

Sie können auch die zu verwendende Sprache angeben, indem Sie die Option lang festlegen. Um beispielsweise das Widget auf Chinesisch einzubinden (wie rechts gezeigt), verwenden Sie den folgenden Code:

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

Die derzeit unterstützten Sprachen sind:

Durch Angabe der display ist es möglich, den im Widget anzuzeigenden Text anzupassen. Um beispielsweise sowohl den Textnamen „AQI“ als auch die Aktualisierungszeit anzuzeigen (wie im Widget links gezeigt), können Sie den folgenden Code verwenden:

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

Die display ist eine HTML-basierte Zeichenfolge und kann eines der folgenden Schlüsselwörter enthalten:

• „%cityname“ für den Namen der Stadt (z. B. Beijing ),
• „%aqi“ für den dekorierten AQI-Wert (z. B. 58 ),
• „%aqiv“ für den nicht dekorierten (Rohtext) AQI-Wert (z. B. 58 ),
• „%style“ für die CSS-Deklaration der dekorierten AQI-Details (z. B. background-color: #ffde33;color:#000000; ),
• „%Datum“ für den Zeitpunkt, zu dem der AQI aktualisiert wurde (z. B. Wed 20:00 ),
• „%impact“ für die damit verbundene gesundheitliche Auswirkung (z. B. Good , Moderate ...)
• „%attribution“ für die AQI-Datenzuordnung (z. B. Beijing Environmental Protection Monitoring Center )
• „%details“ für die vollständigen AQI-Details (der Inhalt des Popups, das angezeigt wird, wenn die Maus über den AQI-Wert bewegt wird).

Hier ein paar Beispiele:

Wenn Sie eine DIY-Integration bevorzugen, können Sie auch einen Javascript-Funktionsrückruf angeben, der beim Laden der Daten erfolgen soll. Sie müssen lediglich die Option callback im Parameterblock hinzufügen, wie zum Beispiel:

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

Unter der Annahme, dass Sie auch JQuery verwenden, ergibt sich beispielsweise der folgende Code:

  
<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>

wird folgenden Inhalt produzieren:

Die aqi Objekte enthalten alle im Abschnitt C (Anzeigeformat) genannten Schlüsselwörter.

Es ist möglich, mehrere Widgets auf einer einzigen Seite einzubinden. Sie müssen lediglich ein Array mit allen Widgets, die Sie einschließen müssen, an die Funktion „_aqiFeed“ übergeben. Um beispielsweise London, Paris und New York einzufügen, können Sie diesen Code verwenden:

  
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>"));  
}  

Dieser Widget-Feed wird kostenlos und ausschließlich zum Zweck der Integration des Feeds in andere Websites (d. h. Apps sind ausgeschlossen) und unter der Bedingung einer angemessenen und akzeptablen Nutzung bereitgestellt. Wir behalten uns das Recht vor, die Feed-Struktur (Datenformat) jederzeit und ohne vorherige Ankündigung zu ändern. Kontaktieren Sie uns daher besser, wenn Sie eine benutzerdefinierte Integration planen.

Bei der Integration gibt es einige deontologische Regeln, die bei der Nutzung des Datenfeeds angewendet werden sollten:

• Stellen Sie zunächst immer sicher, dass die Zuordnung zur ursprünglichen EPA vorhanden ist. Alle Luftqualitätsdaten, die Sie im World Air Quality Index-Projekt finden können, sind der harten Arbeit aller EPAs auf der ganzen Welt zu verdanken. Geben Sie daher bitte auch die Quellenangabe für ihre Arbeit an. Wenn Sie die programmatische API verwenden, ist die Attribution im attribution verfügbar.
• Wenn Sie von einer Institution kommen und die Daten verwenden, zeigen Sie bitte Respekt und zahlen Sie die Credits für unsere Arbeit zurück. Wenn Sie versuchen, den Daten-Feed zu extrahieren, denken Sie bitte daran, dass dieses Projekt auf Sponsoring- und Kooperationsprojekten basiert. Denken Sie also darüber nach, uns zu unterstützen , anstatt uns zu verschrotten, insbesondere wenn Sie eine große Institution oder Universität sind.
• Handeln Sie in der Tat nicht wie das WRI ( World Resource Institute ): Sie verschrotten den gesamten Datenfeed des World Air Quality Index- Projekts und sind so billig, dass sie unsere Arbeit nicht einmal würdigen, und das trotz ihrer 80 Millionen jährliche USD-Finanzierungen. Glauben Sie uns nicht? Schauen Sie sich diesen Schnappschuss an.

Dies ist die erste Version dieser neuen Widget-Feed-API. Es sind bereits einige Verbesserungen in der Pipeline, wie z. B. einstellbare Grafikbreite und -höhe, wählbare AQI-Skala usw. Wenn Sie weitere spezifische Verbesserungen vorschlagen möchten, senden Sie uns gerne eine Nachricht.