traffic-incidents-data.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
Provide information about traffic of a any City. Its use two api:

- **Google Maps Geocoding API**: to convert any address to geographical coordinates.

- **Bing Maps Traffic API**    : to get information about traffic issues in any city.

Example:
```
<traffic-incidents-data city="Madrid" api_key_geocoding="your_google_geocoding_key"
app_key_traffic="yout_bing_maps_key" auto_refresh refresh_time="60000">
```

@demo demo/index.html
@hero hero.svg
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">

<dom-module id="traffic-incidents-data">
  <template>
    <style>
      :host {
        display:none;
      }
  </style>

  <iron-ajax id="requestGeoencode" method="GET" url="https://maps.googleapis.com/maps/api/geocode/json" params="{{geo_params}}"
    handleAs="json" on-response="_geocodingResponse">
  </iron-ajax>
  <iron-ajax id="requestData" method="GET" url="https://centauro.ls.etsiinf.upm.es:4444/traffic" params="{{traffic_params}}" handleAs="json"
    on-response="_trafficCallback">
  </iron-ajax>
</template>

<script>
  Polymer({
    is: 'traffic-incidents-data',
    /**
    * Fired when a geocoding request send an error.
    *
    * @event geocoding-request-error
    * @event geocoding-request-error
    */
    /**
    * Fired when a traffic api request send an error.
    *
    * @event traffic-request-error
    * @event traffic-request-error
    */
    /**
    * Fired when a traffic information is received.
    *
    * @event traffic_info-ready
    * @event traffic_info-ready
    */
    /**
    * Fired when a traffic request is iniciated.
    *
    * @event traffic-request_iniciated
    * @event traffic-request_iniciated
    */
    properties: {
      /*
      * Params for request latitude and longitude of selected city
      **/
      geo_params: {
        type: 'Object',
        computed: '_getGeoParams(api_key_geocoding,city)'
      },
      /*
      * Google geoencody api_key.
      * Go to https://developers.google.com/maps/documentation/geocoding/get-api-key
      * to get your key
      **/
      api_key_geocoding: {
        type: String,
        vale: '',
        reflectToAttribute: true
      },
      /*
      * Bing maps key.
      * Go to https://msdn.microsoft.com/en-us/library/ff428642.aspx
      * to get your key
      *
      */
      app_key_traffic: {
        type: String,
        value: '',
        reflectToAttribute: true
      },
      /*
      * Value of the url where the component must request a traffic information
      */

      traffic_params: {
        type: String,
        computed: '_traffic_params(geo_info.map, app_key_traffic)'
      },
      /*
      * `City` where you want to obtain traffic information
      */
      city: {
        type: String,
        value: '',
        reflectToAttribute: true,
        observer: '_cityChanged',
        notify: true
      },
      /*
      * geographical information about a city selected.
      */
      geo_info: {
        type: Object,
        value: {},
      },
      /*
      * Radio (Km value) around city location where traffic information will be searched.
      */
      radio: {
        value: 100,
        type: Number,
        reflectToAttribute: true
      },
      /*
      * Traffic information obtained from Bing Maps Traffic API
      */
      traffic_info: {
        value: function () { return [] },
        type: Array,
        notify: true
      },
      /*
      * Value that indicate if city must be requested again.
      * Its true if city was changed
      */
      refreshCity: {
        value: false,
        type: Boolean,
      },
      /*
      * `auto_refresh` is true when we want to refresh automatically each any (`refresh_time`) seconds
      */
      auto_refresh: {
        value: true,
        type: Boolean,
        reflectToAttribute: true,
        observer: '_setRefresh',
        notify: true
      },
      /*
      * How often traffic information is requested if `auto_refresh` is true (in seconds).
      */
      refresh_time: {
        value: 120000,
        type: Number,
        reflectToAttribute: true,
        observer: '_setRefreshTime'
      },
    },
    // Life cycle functions
    attached: function () {
      this.$.requestGeoencode.generateRequest();
      this._disableChange = true;
    },
    detached: function () {
      window.clearInterval(this._interval);
    },
    // observer
    _cityChanged: function (newValue, oldValue) {
      if (oldValue !== undefined) {
        this.refreshCity = true;
      }
    },
    _setRefresh: function (newValue, oldValue) {
      if (newValue && this.refresh_time && !this._interval) {
        this._interval = window.setInterval(this.requestTraffic.bind(this), this.refresh_time)
      } else if (this._interval && !newValue) {
        window.clearInterval(this._interval);
      }
    },
    _setRefreshTime: function (newValue) {
      if (this.auto_refresh && newValue && !this._interval) {
        this._interval = window.setInterval(this.requestTraffic.bind(this), newValue);
      } else if (this.auto_refresh && newValue) {
        window.clearInterval(this._interval);
        this._interval = window.setInterval(this.requestTraffic.bind(this), newValue);
      }
    },
    // computed properties
    _getGeoParams: function (api_key_geocoding, city) {
      var params = {};
      if (api_key_geocoding) {
        params.key = api_key_geocoding;
        if (city) params.address = city;
      } else {
        console.error('Api key is required');
      }
      return params;
    },
    _traffic_params: function (map, key) {
      var params = {};
      if (map) {
        params.map = map.s + ',' + map.w + ',' + map.n + ',' + map.e;
      }
      params.key = key;
      return params;
    },

    // Ajax response callback
    _geocodingResponse: function (e, res) {
      var traffic_info = res.response.results;
      if (traffic_info && traffic_info.length > 0) {
        this.set('geo_info.lat', traffic_info[0].geometry.location.lat);
        this.set('geo_info.lng', traffic_info[0].geometry.location.lng);
        this.set('geo_info.city', traffic_info[0].formatted_address);
        this.set('geo_info.full_info', traffic_info[0]);
        this.set('geo_info.map', this._getMap(this.geo_info.lat, this.geo_info.lng, this.radio));
        this.refreshCity = false;
        this._getTraffic();
      } else {
        this.fire('geocoding-request-error', { error: e, code: 404 });
      }
    },



    _getTraffic: function () {
      this.fire('traffic-request_iniciated');
      this.set('traffic_info', []);
      this.$.requestData.generateRequest();
    },
    _trafficCallback: function (event, detail) {
      var result = detail.response;
      if (result && result.resourceSets && result.resourceSets[0].resources) {
        this.set('traffic_info', result.resourceSets[0].resources);
        this.fire('traffic_info-ready', { traffic_info: this.traffic_info });
      } else {
        console.error('Error Bind traffic: response is empty')
        this.fire('traffic-request-error', { error: result });
      }
    },
    /**
    * Get data from Bing Traffic Api. If city was changed, a geocoding request
    * is generated
    * @method requestTraffic
    */
    requestTraffic: function () {
      if (this.refreshCity) {
        this.$.requestGeoencode.generateRequest();
      } else {
        this._getTraffic();
      }
    },
    // Aux function

    _getMap: function (lat, lng, radio) {
      // Radio need be transformed to square.
      var ratio = radio / 111; // transform km in lat/lng
      var map = {};
      map.n = lat + ratio > 180 ? -180 + lat % 180 : lat + ratio;
      map.s = lat - ratio < -180 ? 180 - lat % 180 : lat - ratio;
      map.e = lng + ratio > 180 ? -180 + lng % 180 : lng + ratio;
      map.w = lng - ratio < -180 ? 180 - lng % 180 : lng - ratio;
      return map;
    }

  });
</script>
</dom-module>