La integración básica es simple y directa. Primero debe agregar el siguiente fragmento de código:

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

Luego, simplemente agrega este otro código para incluir el widget:

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

La función `_aqiFeed` toma como argumento el bloque de configuración del widget. El parámetro `container: "city-aqi-container"` se refiere al id de la etiqueta en la que desea insertar el widget (por ejemplo, `<span id='city-aqi-container'></span>`), y el parámetro city , el nombre de la ciudad para la cual desea mostrar la lectura actual de la calidad del aire (por ejemplo, `ciudad: "Londres"`).

También puede especificar el idioma que se utilizará configurando la opción lang . Por ejemplo, para incluir el widget en chino (como se muestra a la derecha), use el siguiente código:

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

Los idiomas admitidos actualmente son:

Es posible personalizar el texto que se mostrará dentro del widget especificando la opción display . Por ejemplo, para mostrar tanto el nombre textual "AQI" como la hora de actualización (como se muestra en el widget de la izquierda), puede usar el siguiente código:

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

La display del parámetro es una cadena basada en HTML y puede contener cualquiera de las siguientes palabras clave:

• `%cityname` para el nombre de la ciudad (por ejemplo, Beijing ),
• `%aqi` para el valor AQI decorado (por ejemplo, 58 ),
• `%aqiv` para el valor AQI sin decorar (texto sin formato) (por ejemplo, 58 ),
• `%style` para la declaración CSS de los detalles de AQI decorados (por ejemplo, background-color: #ffde33;color:#000000; ),
• `%date` para la hora a la que se actualizó el AQI (por ejemplo, Wed 20:00 ),
• `%impacto` para el impacto en la salud asociado (por ejemplo, Good , Moderate ...)
• `%atribución` para la atribución de datos de AQI (p. ej. Beijing Environmental Protection Monitoring Center )
• `%details` para obtener los detalles completos de AQI (el contenido de la ventana emergente que se muestra al mover el mouse sobre el valor de AQI).

Aquí están algunos ejemplos:

Si prefiere la integración de bricolaje, también puede especificar una devolución de llamada de función de JavaScript cuando se cargan los datos. Sólo necesita agregar la opción callback en el bloque de parámetros, como por ejemplo:

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

Por ejemplo, suponiendo que también estás usando jquery, el siguiente código:

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

producirá el siguiente contenido:

Los objetos aqi contienen todas las palabras clave mencionadas en la sección C (formato de visualización).

Es posible incluir varios widgets en una sola página. Todo lo que necesitas es pasar a la función `_aqiFeed` una matriz con todos los widgets que necesitas incluir. Por ejemplo, para insertar Londres, París y Nueva York, puede utilizar este código:

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

Este widget se proporciona de forma gratuita y con el único propósito de integrar el feed en otros sitios web (es decir, se excluyen las aplicaciones) y bajo la condición de un uso razonable y aceptable. Nos reservamos el derecho de cambiar la estructura del feed (formato de datos) en cualquier momento y sin previo aviso, por lo que es mejor que nos contactes si planeas realizar una integración personalizada.

Al realizar la integración, existen algunas reglas deontológicas que se deben aplicar al utilizar el feed de datos:

• Primero, asegúrese siempre de que la atribución a la EPA de origen esté presente. Todos los datos sobre la calidad del aire que puede encontrar en el proyecto del Índice Mundial de la Calidad del Aire se deben al arduo trabajo de todas las EPA de todo el mundo, así que asegúrese de proporcionar también la atribución de su trabajo. Si utiliza la API programática, la atribución está disponible en el campo attribution .
• Si usted es de una institución y utiliza los datos, por favor, muestre respeto y devuelva los créditos por nuestro trabajo. Si está intentando eliminar la fuente de datos, tenga en cuenta que este proyecto depende de proyectos de patrocinio y cooperación, así que considere apoyarnos en lugar de descartarnos, especialmente si es una institución o universidad de gran escala.
• De hecho, no actúes como el WRI ( Instituto de Recursos Mundiales ): eliminando la fuente de datos general del proyecto del Índice Mundial de Calidad del Aire , y siendo tan tacaño que ni siquiera darían ninguna atribución a nuestro trabajo, y esto a pesar de sus 80 millones de dólares anuales en financiación. ¿No nos crees? Mira esta instantánea .

Esta es la primera versión de esta nueva API de alimentación de widgets. Ya hay bastantes mejoras en proceso, como ancho y alto de gráficos ajustables, escala AQI seleccionable, etc. Si desea sugerir alguna otra mejora específica, no dude en enviarnos un mensaje.