De basisintegratie is eenvoudig en ongecompliceerd. Je moet eerst het volgende stukje code toevoegen:

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

Voeg vervolgens gewoon deze andere code toe om de widget op te nemen:

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

De functie `_aqiFeed` neemt als argument het configuratieblok voor de widget. De parameter `container: "city-aqi-container"` verwijst naar de id van de tag waarin u de widget wilt invoegen (bijvoorbeeld `<span id='city-aqi-container'></span>`), en de parameter city de naam van de stad waarvoor u de huidige luchtkwaliteitwaarde wilt weergeven (bijvoorbeeld `stad: "london"`).

U kunt ook de te gebruiken taal opgeven door de lang in te stellen. Om de widget bijvoorbeeld in het Chinees op te nemen (zoals rechts weergegeven), gebruikt u de volgende code:

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

De momenteel ondersteunde talen zijn:

Het is mogelijk om de tekst die in de widget moet worden weergegeven, aan te passen door de display op te geven. Om bijvoorbeeld zowel de tekstuele "AQI"-naam als de updatetijd weer te geven (zoals weergegeven in de widget aan de linkerkant), kunt u de volgende code gebruiken:

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

De display is een op HTML gebaseerde tekenreeks en kan een van de volgende trefwoorden bevatten:

• `%cityname` voor de naam van de stad (bijvoorbeeld Beijing ),
• `%aqi` voor de gedecoreerde AQI-waarde (bijv. 58 ),
• `%aqiv` voor de onversierde (onbewerkte tekst) AQI-waarde (bijv. 58 ),
• `%style` voor de CSS-declaratie van de gedecoreerde AQI-details (bijv. background-color: #ffde33;color:#000000; ),
• `%date` voor het tijdstip waarop de AQI is bijgewerkt (bijvoorbeeld Wed 20:00 ),
• `%impact` voor de bijbehorende gezondheidsimpact (bijv. Good , Moderate ...)
• `%attribution` voor de attributie van AQI-gegevens (bijv. Beijing Environmental Protection Monitoring Center )
• `%details` voor de volledige AQI-details (de inhoud van de pop-up die wordt weergegeven wanneer u de muis over de AQI-waarde beweegt).

Hier zijn een paar voorbeelden:

Als u de voorkeur geeft aan doe-het-zelf-integratie, kunt u ook een JavaScript-functie-callback opgeven wanneer de gegevens worden geladen. U hoeft alleen maar de optie callback toe te voegen in het parameterblok, zoals bijvoorbeeld:

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

Ervan uitgaande dat u bijvoorbeeld ook jQuery gebruikt, is de volgende 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>

zal de volgende inhoud produceren:

De aqi -objecten bevatten alle trefwoorden genoemd in sectie C (weergaveformaat).

Het is mogelijk om meerdere widgets op één pagina op te nemen. Het enige dat u hoeft te doen, is een array door te geven aan de `_aqiFeed`-functie met alle widgets die u moet opnemen. Als u bijvoorbeeld Londen, Parijs en New York wilt invoegen, kunt u deze code gebruiken:

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

Deze widgetfeed wordt gratis aangeboden en heeft uitsluitend als doel de feed te integreren in andere websites (d.w.z. apps zijn uitgesloten) en onder de voorwaarde van redelijk en acceptabel gebruik. We behouden ons het recht voor om de feedstructuur (gegevensformaat) op elk moment en zonder voorafgaande kennisgeving te wijzigen. Neem dus beter contact met ons op als u van plan bent een integratie op maat te doen.

Bij het uitvoeren van de integratie zijn er enkele deontologische regels die moeten worden toegepast bij het gebruik van de datafeed:

• Zorg er eerst altijd voor dat de toeschrijving aan de oorspronkelijke EPA aanwezig is. Alle gegevens over de luchtkwaliteit die u kunt vinden in het World Air Quality Index-project zijn te danken aan het harde werk van alle EPA's over de hele wereld, dus zorg ervoor dat u ook de bronvermelding voor hun werk vermeldt. Als u de programmatische API gebruikt, is de toeschrijving beschikbaar via het attribution .
• Als u van een instelling bent en de gegevens gebruikt, toon dan alstublieft respect en betaal de credits voor ons werk terug. Als u de datafeed probeert te schrappen, houd er dan rekening mee dat dit project afhankelijk is van sponsoring en samenwerkingsprojecten. Overweeg dus om ons te steunen in plaats van ons te schrappen, vooral als u een grootschalige instelling of universiteit bent.
• In feite, gedraag je niet zoals de WRI ( World Resource Institute ): het schrappen van de algemene datafeed van het World Air Quality Index- project, en het zo goedkoop maken dat ze zelfs geen enkele attributie voor ons werk zouden willen geven, en dit ondanks hun 80 miljoenen jaarlijkse USD-financieringen. Geloof je ons niet? Controleer deze momentopname .

Dit is de eerste versie van deze nieuwe widgetfeed-API. Er zitten al heel wat verbeteringen in de pijplijn, zoals de aanpasbare grafische breedte en hoogte, de selecteerbare AQI-schaal, enz. Als u nog andere specifieke verbeteringen wilt voorstellen, kunt u ons gerust een bericht sturen.