Christina Ng

Last week, we introduced the Breezometer Air Quality API. This week, we have a second guest post from Breezometer on how to create an Air Quality and Weather API mashup.


The goal of this post is to demonstrate how easy it is to integrate BreezoMeter’s Air Quality Data through Mashape platform. There are endlessness use cases for Air Quality data, and this is just a small example on how we used Mashape’s awesome API service.
 
In the example below, we decided to use PHP foundation of WordPress that will combine our API with the Simple weather API on Mashape. We hope that through such a mashup, it will inspire you to come up with more innovative ways to use our API.
 
Here is a picture of what you will get at the end (you can also watch it live):
 
Breezometer Air Quality API and Weather API Mashup
 

Let’s get started!

We’ve been using Mashape Unirest for PHP (Unirest is a set of lightweight HTTP libraries). The call can be used in PHP like so:
 

<?php
$response = Unirest\Request::get("https://breezometer.p.mashape.com/spot/?lat=40.7324296&lon=-73.9977264",
    array(
        "X-Mashape-Key" =>your_mashape_key,
        "Accept" => "application/json"
    )
);
 
The response is an object that contains a few keys. We would like to use the BreezoMeter JSON from the response, like so:
 
<?php
$json = $response->raw_body;
$Data = json_decode($json);
 
When running the code above, $Data contains the attributes of BreezoMeter’s API objects as you can see below:

Breezometer API response

Breezometer API response

Interpreting the JSON

 
To make it a bit easier and cleaner we will be creating a class that can handle the calls for us for cities and locations.
 

<?php
class City{
  public $lat;
  public $lon;
  public $aqiData;
  private $_mashape_key = 'your_massapp_key';
 
  function __construct($lat = 0, $lon = 0){
    $this->lat = $lat;
    $this->lon = $lon;
    // invoke the get call automatic if lat lon supplied
    if( $lat != 0 && $lon!= 0 ){
      $this->getAqiDataMashape();
    }
  }
  // get using Mashape API
  public function getAqiDataMashape(){
    $response = Unirest\Request::get("https://breezometer.p.mashape.com/spot/?lat=$this->lat&lon=$this->lon",
    array(
      "X-Mashape-Key" => $this->_mashape_key,
      "Accept" => "application/json"
    )
   );
   $json = $response->raw_body;
   $this->_aqiData = json_decode($json);
  }
 
}// end City Class
 

In order to get us even closer to the example above, we will add two new properties to the city class, one would be name and the other background image, those will allow us to add the graphical representation you see above.
 

<?php
/**
 * @param float $lat [Latitude]
 * @param float $lon [Longitude]
 * @param string $name [Location Name]
 * @param string $bg_image [url to background image in the example]
 */
class City{
 public $lat;
 public $lon;
 public $name;
 public $aqiData;
 public $background_image;
 private $_mashape_key = 'your_Mashape_key';
 
 function __construct($lat = 0, $lon = 0, $name = 'NS', $bg_image = "default-city.jpg"){
   $this->lat = $lat;
   $this->lon = $lon;
   $this->name = $name;
   $this->backgound_image = $bg_image;
   if( $lat != 0 && $lon!= 0 ){
     $this->getAqiDataMashape();
     }
   }
   public function getBackgroundImage(){
   // this example is on a WordPress website
   // therefore using the WordPress API for the url
     return get_template_directory_uri().'/assets/img/'.$this->backgound_image;
   }
   // get using Mashape API
   public function getAqiDataMashape(){
   $response = Unirest\Request::get("https://breezometer.p.mashape.com/spot/?lat=$this->lat&lon=$this->lon",
   array(
     "X-Mashape-Key" => $this->_mashape_key,
     "Accept" => "application/json"
    )
   );
   $json = $response->raw_body;
   $this->aqiData = json_decode($json);
   }
  }
 
We create an array of cities to allow us to not repeat ourselves too much:
 

<?php
require_once("City.class.php");
 
$cities = [
  new City (40.7324296,-73.9977264, "New York, NY","new-york-city.jpg"),
  new City (38.8982475,-77.0330429, "Washington, DC","washington-dc.jpg"),
  new City (34.0483926,-118.2396698, "Los Angeles, CA")];
 
In the HTML we embed the php code for the loop like so:
 

<?php
if(is_array($cities)){
   foreach ($cities as $key => $city) {
   $city->getAqiDataMashape();
   ?>
 
   <div class="col-md-4">
     <div class="city_wrapper" >
       <div class="city_header" style="background-image: url(<?php echo $city->getBackgroundImage();?>)">
         <h2><?php echo $city->name;?></h2>
         <div class="hr" style="background: <?php echo $city->aqiData->breezometer_color?> "></div>
       </div>
       <div class="city_footer">
         <div class="health-recommendations">
           <?php echo $city->aqiData->random_recommendations->health;?>
         </div>
         <div class="breezometer-aqi-data">
           BreezoMeter AQI:
           <span class="breezometer-aqi-number"
           style="color: <?php echo $city->aqiData->breezometer_color?> ">
           <?php echo $city->aqiData->breezometer_aqi?></span> / 100
         </div>
      </div><!-- city_footer -->
    </div><!-- city_wrapper-->
   </div><!-- col-md-4 -->
  <?php
      } // end foreach
    }// end if is_array ($cities)
  ?>
 
Now if you will look at the air quality & weather widget, you can see that I used breezometer_color (separates between the picture to the white background), breezometer_aqi (which is 73 out of 100 in NY) and a random_recommendations (from the health sensitives segment).

That’s all folks!

Ready to start hacking?
category:
Share this: