Базовая интеграция проста и понятна. Сначала вам нужно добавить следующий фрагмент кода:

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

Затем просто добавьте этот другой код, чтобы включить виджет:

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

Функция `_aqiFeed` принимает в качестве аргумента блок конфигурации виджета. Параметр `container: "city-aqi-container"` относится к идентификатору тега, в который вы хотите вставить виджет (например, `<span id='city-aqi-container'></span>`), и параметр city название города, для которого вы хотите отобразить текущие показания качества воздуха (например, «город: «лондон»»).

Вы также можете указать используемый язык, установив параметр lang . Например, чтобы включить виджет на китайском языке (как показано справа), используйте следующий код:

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

В настоящее время поддерживаются следующие языки:

Можно настроить текст, отображаемый в виджете, указав параметр display . Например, для отображения как текстового имени «AQI», так и времени обновления (как показано в виджете слева), вы можете использовать следующий код:

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

display параметр представляет собой строку на основе HTML и может содержать любое из следующих ключевых слов:

• `%cityname` для названия города (например, Beijing ),
• `%aqi` для декорированного значения AQI (например, 58 ),
• `%aqiv` для недекорированного (необработанного текста) значения AQI (например, 58 ),
• `%style` для объявления CSS оформленных деталей AQI (например background-color: #ffde33;color:#000000; ),
• `%date` для времени обновления AQI (например Wed 20:00 ),
• `%impact` для соответствующего воздействия на здоровье (например, Good , Moderate ...)
• `%attribution` для атрибуции данных AQI (например Beijing Environmental Protection Monitoring Center )
• `%details` для получения полной информации об AQI (содержимое всплывающего окна, отображаемого при наведении указателя мыши на значение AQI).

Вот несколько примеров:

Если вы предпочитаете интеграцию DIY, вы также можете указать обратный вызов функции JavaScript при загрузке данных. Вам просто нужно добавить callback опции в блок параметров, например:

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

Например, если вы также используете jquery, следующий код:

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

создаст следующий контент:

Объекты aqi содержат все ключевые слова, упомянутые в разделе C (формат отображения).

Возможно включение нескольких виджетов на одну страницу. Все, что вам нужно, это передать в функцию _aqiFeed массив со всеми виджетами, которые вам нужно включить. Например, чтобы вставить Лондон, Париж и Нью-Йорк, можно использовать этот код:

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

Этот канал виджетов предоставляется бесплатно и с единственной целью интеграции канала в другие веб-сайты (т. е. приложения исключаются) и при условии разумного и приемлемого использования. Мы оставляем за собой право изменить структуру фида (формат данных) в любое время и без предварительного уведомления, поэтому лучше свяжитесь с нами, если вы планируете выполнить индивидуальную интеграцию.

При интеграции существует несколько деонтологических правил, которые следует применять при использовании канала данных:

• Во-первых, всегда проверяйте, что указана ссылка на исходное EPA. Все данные о качестве воздуха, которые вы можете найти в проекте «Мировой индекс качества воздуха», получены благодаря упорной работе всех агентств по охране окружающей среды по всему миру, поэтому, пожалуйста, не забудьте также указать авторство их работы. Если вы используете программный API, атрибуция доступна в поле attribution .
• Если вы из учреждения и используете данные, пожалуйста, проявите уважение и верните кредиты за нашу работу. Если вы пытаетесь очистить канал данных, имейте в виду, что этот проект опирается на проекты спонсорства и сотрудничества, поэтому рассмотрите возможность поддержки нас , а не отказа от нас, особенно если вы представляете крупное учреждение или университет.
• На самом деле, не поступайте как WRI ( Институт мировых ресурсов ): отказывайтесь от общего потока данных проекта Мирового индекса качества воздуха и будьте настолько дешевы, что даже не указали бы никакого указания на нашу работу, и это несмотря на их 80 миллионы долларов ежегодного финансирования. Не верите нам? Проверьте этот снимок .

Это первая версия нового API фида виджетов. В стадии разработки уже находится немало улучшений, таких как регулируемая ширина и высота графики, выбор масштаба AQI и т. д. Если вы хотите предложить какие-либо другие конкретные улучшения, отправьте нам сообщение.