Integrating location into our app

The app module now takes the place parameter to display the location name.

1;(function(){
2  var app = this.app = this.app || {};
3
4  app.model.fetch('Macao,MO', function(weather, place){
5    app.view.update(weather, place);
6  });
7
8}).call(this);

We display the name in HTML.

1<div data-role='content' id='rain-content' class='loading'>
2  <div id="place">Loading</div>
3</div>

And the view to reflect the place.

 1;(function($){
 2  var app = this.app = this.app || {};
 3
 4  app.view = {
 5    update: function(weather, place) {
 6      $('#place').html(place);
 7      if (weather == 'rain') {
 8        $('#rain-content').removeClass().addClass('rain');
 9      } else {
10        $('#rain-content').removeClass().addClass('sunny');
11      }
12    }
13  }
14
15}).call(this, jQuery);

And finally the model.

 1;(function($){
 2  var app = this.app = this.app || {};
 3
 4  app.model = {
 5    fetch: function(query, callback) {
 6      navigator.geolocation.getCurrentPosition(function(location) {
 7        var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + location.coords.latitude + '&lon=' + location.coords.longitude + '&callback=?';
 8        $.getJSON(url, function(data){
 9          var code = data.weather[0].id + ""; // force to string
10          if (code[0] == 5) { // rainy code all start at 5
11            callback('rain', data.name);
12          } else {
13            callback('sunny', data.name);
14          }
15        });
16      });
17    }
18  }
19
20}).call(this, jQuery);

The final result.

What’s next? We’re going to take a look at “Project 5 – Exchange Rate”.

◀ Fetch weather from location Project 5 – Exchange Rate ▶

makzan.

Integrating location into our app

Makzan | Mobile web app dev with phonegap | Table of Content