L'intégration de base est simple et directe. Vous devez d'abord ajouter le morceau de code suivant :

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

Ensuite, ajoutez simplement cet autre code pour inclure le widget :

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

La fonction `_aqiFeed` prend en argument le bloc de configuration du widget. Le paramètre `container: "city-aqi-container"` fait référence à l'identifiant du tag dans lequel vous souhaitez insérer le widget (par exemple `<span id='city-aqi-container'></span>`), et le paramètre city le nom de la ville pour laquelle vous souhaitez afficher la lecture actuelle de la qualité de l'air (par exemple `city: "london"`).

Vous pouvez également spécifier la langue à utiliser en définissant l'option lang . Par exemple, pour inclure le widget en chinois (comme indiqué à droite), utilisez le code suivant :

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

Les langues actuellement prises en charge sont :

Il est possible de personnaliser le texte à afficher dans le widget en spécifiant l'option display . Par exemple, pour afficher à la fois le nom textuel « AQI » ainsi que l'heure de mise à jour (comme indiqué sur le widget de gauche), vous pouvez utiliser le code suivant :

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

L' display du paramètre est une chaîne HTML et peut contenir l'un des mots-clés suivants :

• `%cityname` pour le nom de la ville (par exemple Beijing ),
• `%aqi` pour la valeur AQI décorée (par exemple 58 ),
• `%aqiv` pour la valeur AQI non décorée (texte brut) (par exemple 58 ),
• `%style` pour la déclaration css des détails AQI décorés (par exemple background-color: #ffde33;color:#000000; ),
• `%date` pour l'heure à laquelle l'AQI a été mis à jour (par exemple Wed 20:00 ),
• `%impact` pour l'impact sur la santé associé (ex : Good , Moderate ...)
• `%attribution` pour l'attribution des données AQI (par exemple Beijing Environmental Protection Monitoring Center )
• `%details` pour les détails complets de l'AQI (le contenu de la fenêtre contextuelle affichée lorsque vous déplacez la souris sur la valeur de l'AQI).

Voici quelques exemples:

Si vous préférez l'intégration DIY, vous pouvez également spécifier un rappel de fonction javascript lors du chargement des données. Il suffit d'ajouter l'option callback dans le bloc paramètre, comme par exemple :

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

Par exemple, en supposant que vous utilisez également jquery, le code suivant :

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

produira le contenu suivant :

Les objets aqi contiennent tous les mots-clés mentionnés dans la section C (format d'affichage).

Il est possible d'inclure plusieurs widgets sur une seule page. Tout ce dont vous avez besoin est de transmettre à la fonction `_aqiFeed` un tableau avec tous les widgets que vous devez inclure. Par exemple, pour insérer Londres, Paris et New York, on peut utiliser ce code :

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

Ce flux de widgets est fourni gratuitement et dans le seul but d'intégrer le flux dans d'autres sites Web (c'est-à-dire que les applications sont exclues), et sous condition d'utilisation raisonnable et acceptable. Nous nous réservons le droit de modifier la structure du flux (format des données) à tout moment et sans préavis, mieux vaut donc nous contacter si vous envisagez de faire une intégration personnalisée.

Lors de l'intégration, quelques règles déontologiques doivent être appliquées lors de l'utilisation du flux de données :

• Tout d’abord, assurez-vous toujours que l’attribution à l’EPA d’origine est présente. Toutes les données sur la qualité de l'air que vous pouvez trouver sur le projet World Air Quality Index sont le résultat du travail acharné de toutes les EPA du monde entier, alors assurez-vous de fournir également l'attribution de leur travail. Si vous utilisez l'API programmatique, l'attribution est disponible à partir du champ attribution .
• Si vous faites partie d'une institution et utilisez les données, veuillez faire preuve de respect et rembourser les crédits pour notre travail. Si vous essayez de supprimer le flux de données, gardez à l'esprit que ce projet repose sur des projets de parrainage et de coopération, alors pensez à nous soutenir plutôt que de nous supprimer, surtout si vous êtes une institution ou une université à grande échelle.
• En fait, n'agissez pas comme le WRI ( World Resource Institute ) : en supprimant le flux global de données du projet World Air Quality Index , et en étant si bon marché qu'ils ne donneraient même aucune attribution à notre travail, et ce malgré leurs 80 millions de dollars de financement annuel. Vous ne nous croyez pas ? Vérifiez cet instantané .

Il s'agit de la première version de cette nouvelle API de flux de widgets. De nombreuses améliorations sont déjà en cours, telles que la largeur et la hauteur graphiques réglables, l'échelle AQI sélectionnable, etc. Si vous souhaitez suggérer d'autres améliorations spécifiques, n'hésitez pas à nous envoyer un message.