WeatherLabs

Prerequisites

The following post assumes the user have a basic knowledge on AngularJS and worked on the basics. If not, I would suggest you read through what Angular is and its basic tags here: Egghead IO or in Angular site.

Introduction

In this post, we will be working on implementing a complex weather reporting view with multiple functionalities like Google Maps integration, Reverse Geo-code using Google APIs, etc. The scope of this document is to let you know how to integrate all these APIs together in a Angular page and not for fully understanding the internals of the APIs.

Details

What do we need to achieve a data rep as shown: link to demo – We need hourly weather, daily weather, narration, sunrise, sunset, google charts, google maps, google geo API’s, type ahead, etc.

Aggregation data

$resource is a way to get JSON data object with a simple syntax like object.getMethod(). However, $http is even more flexible with its promise methods and $resource is more useful when performing CRUD operations. The advantage of using a resource is the output of the operations inside the $resource first returns a empty object and later returns the AJAX output once done. This is specifically useful when you assign the resource output directly to UI model. However, it is not particularly useful when you have to do some operations on top of AJAX call. I have used $resource in this demo for just showing usage.

wxModule.factory("mobagg", ['$http', '$routeParams', '$resource', function($http, $routeParams, $resource) {
    return $resource("http://wxdata.weather.com/wxdata/mobile/mobagg/:locID.js",
        {
            cb:'JSON_CALLBACK', locID:'@id'
        },
        {
            getAggregatedInfo: {method:'JSONP', params:{"key" : "2227ef4c-dfa4-11e0-80d5-0022198344f4", "hours" : "48"}, isArray: true}
        }
    );
}]);

The same can be written in $http using

function doDS2Cmd( cmd, params ) {
    var url = $rootScope.wxdata_server + cmd + "/" + params.locid + ".js";
    return $http.jsonp(url, { params: angular.extend( {}, url_defaults, params ) } )
      .success(function (data, status) {
        if($rootScope.debug) {
          $log.log(cmd + ": " + JSON.stringify(data));
        }
      })
      .error(function (data, status) {
        $log.error("error $http failed with " + status + " for " + url);
      });
}

// params contain key, locid.
var deferredObj = doDS2Cmd( 'mobagg', params );

The output of the call looks like below:

Routes

The routes are going to be either location key based or latlong:

var wxForecastModule = angular.module('wxforecast', ['ngResource', 'ui', 'ui.bootstrap', 'google-maps', 'googlechart.directives']).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
        when('/:locId', {templateUrl: 'partials/skeleton.html'}).
        when('/:lat/:lng', {templateUrl: 'partials/skeleton.html'}).
        otherwise({redirectTo: '/30339'});
}]);

Page Content Partial

<div class="container" ng-controller="ForecastController">
    <h3 class="page-header">WX Forecast Prototype</h3>
    <div class="span12 nomargin-left">
        <div ng-controller="AlertController">
            <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
        </div>
    </div>
    <div class="well span7 nomargin-left">
        <div>Map with Weather Layer.</div>
        <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" fit="false" latitude="latitude" longitude="longitude" class="angular-google-map ng-isolate-scope ng-scope" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);"></google-map>
        <div ng-show="address">Exact Location Assumed: {{address}}</div>
        <span ng-repeat="place in places">{{place}}<span ng-hide="$last"> &gt; </span></span>
    </div>
    <div class="span4">
        <div ng-controller="TypeaheadController" class="ta">
            <input type="text" ng-model="selected" typeahead="location as location.displayName for location in searchDS2($viewValue)" ng-change="update()" ui-keypress="{enter:'directLoad($event)'}" placeholder="Search location or enter zip..." />
        </div>
        <a><span tooltip-html-unsafe="{{tooltipString}}"><img src="img/locicon.png" width="40px" height="40px" ng-click="getCurrentLocation()" style="padding-bottom: 10px; float: right;"  /></span></a>
    </div>
    <div class="span4">
        <div class="forecastimg" ng-show="nowWxIcon"><img ng-src="http://s.imwx.com/v.20120328.084208/img/wxicon/120/{{nowWxIcon}}.png" height="180" width="180" alt="Rain Shower" class="wx-weather-icon"></div>
        <div class="header">{{hiradObs.temp}}<sup>&deg;<span class="wx-unit">F</span></sup></div>
    </div>
    <div class="span11">
        <table>
            <tbody ng-repeat="dailyForecast in dailyForecasts" class="span10 modal-header wxrow" ng-init="dayText = ['Today', 'Tomorrow']" ng-click="dailyForecast.isCollapsed = !dailyForecast.isCollapsed">
                <tr>
                    <td class="span2"><span ng-show="$index > 1">{{getDate($index) | date:'MMM dd'}}</span><span ng-show="$index <= 1">{{dayText[$index]}}</span></td>
                    <td class="span7">{{dailyForecast.narration.phrase}}</td>
                    <td class="span2"><div ng-show="dailyForecast.maxTemp">{{dailyForecast.maxTemp}}<sup>&deg;F</sup> <span class="icon-arrow-up"></span></div> <div>{{dailyForecast.minTemp}}<sup>&deg;F</sup> <span class="icon-arrow-down"></span></div></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div collapse="dailyForecast.isCollapsed">
                            <div class="well wxdetails">
                                <div ng-controller="ChartDataController" ng-show="isHourlyDataAvailable">
                                    <div google-chart chart="chart" style="{{chart.cssStyle}}"/>
                                </div>
                                <div>
                                    <div class="span4">Sunrise: {{getDateFromEpoch(dailyForecast.sunData.rise) | date:'hh:mm a'}}</div>
                                    <div class="span4">Sunrise: {{getDateFromEpoch(dailyForecast.sunData.set) | date:'hh:mm a'}}</div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

As you can see from the partial, the page is quite a bit collection of google maps, google chat for each daily row, sunrise-sunset data, narration data, etc. The population javascript is quite simple, we get the mobagg response and map it to appropriate models.

mobagg.getAggregatedInfo({locID : locId}, function(aggdata) {
            if(aggdata && aggdata[0]) {
                $scope.aggInfo = aggdata[0];
                $scope.weatherAlerts = $scope.aggInfo.WeatherAlerts;
                $scope.hiradObs = $scope.aggInfo.HiradObservation;
                ....
            }
});

Google Maps

Google maps is included by angular-google-maps plugin available on the internet. However, I had to make some modifications to enhance the map such as weather layer, click traversal, etc. The angular directive “google-maps” creates a DOM element inside the directive and provides the DOM element to google maps for map rendering.

// Create our model
var _m = new MapModel(angular.extend(opts, {
      container: element[0],
      center: new google.maps.LatLng(scope.center.latitude, scope.center.longitude),
      draggable: attrs.draggable == "true",
      zoom: scope.zoom
}));

The scope is initialized with default zoom and lat/long we provide. However, we update the latlong on getting the values from mobagg call. The $watch listeners then update the map with the latest center latlong values.

The address resolution in google maps is an amazing functionality and can provide you with an almost accurate address.

(new google.maps.Geocoder()).geocode({latLng: latLng}, function(resp) {
        if (resp[0]) {
              var bits = [];
              for (var i = 0, I = resp[0].address_components.length; i < I; ++i) {
                    var component = resp[0].address_components[i];
                    if ($scope.contains(component.types, 'political')) {
                        bits.push(component.long_name);
                    }
                }
                $scope.places = bits;
                $scope.address = resp[0].formatted_address;
                $scope.$digest();
        }
});

Google Charts

Google charts are provided by angular-google-chart plugin available in the internet. Configuring the chart is a slightly complicated process as the data passed to charts API on each ngRepeat directive. Hence, we have manually update few attributes for each chart data. Hence, we have a separate ChartDataController which populates one.

<div ng-controller="ChartDataController" ng-show="isHourlyDataAvailable">
    <div google-chart chart="chart" style="{{chart.cssStyle}}"/>
</div>

Weather Alerts

The alerts are shown on the top bar on the block level and uses bootstrap’s alert functionality.

<div ng-controller="AlertController">
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
....
angular.module('wxforecast').controller('AlertController', function($scope, $http) {
    $scope.alerts = [];

    $scope.$watch('weatherAlerts', function(newValue, oldValue) {
        $scope.alerts = [];
        angular.forEach($scope.weatherAlerts, function(weatherAlert) {
            $scope.alerts.push({'type' : (weatherAlert.severity == 1 ? 'error' : 'warning'), 'msg' : weatherAlert.description, 'closeable' : false});
        });
    });

    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
    };
});

Conclusion

So, we have just seen how to integrate several APIs in an Angular page and still makes it more responsive and end up with a cleaner code. We have also seen few code examples on how to do certain things like creating Angular alerts bar, google chart, etc along the way.