How to use Cordova Geolocation with OpenWeatherMap in Ionic?

Question

I have an Ionic project connected to the OpenWeatherMap API, and I would like to use the Cordova plugin for geolocation; I tried to connect them, and I managed to be geolocalized, but impossible to get an answer from the API ...

However the API was configured correctly since I was able to get data before putting the plugin ...

Here is the code :

controllers.js =>

angular.module('weather')
.controller('WeatherCtrl', function($scope, $cordovaGeolocation, $http, OpenWeatherConfig) {
  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude;
      var lng = position.coords.longitude;
    }, function(err) {
    });
  $scope.state = false;
  $scope.weatherData = {
    icon: '',
    main: '',
    city: '',
    description: '',
    coord: '',
    temp: ''
  };
  $scope.loadWeather = function(lat, lng) {
    var url = OpenWeatherConfig.searchUrl + 'lat=' + lat + '&lon=' + lng + OpenWeatherConfig.units + OpenWeatherConfig.appid;
    $http.get(url).success(function(data) {
      $scope.weatherData.icon = OpenWeatherConfig.imgUrl + data.weather[0].icon + '.png';
      $scope.weatherData.main = data.weather[0].main;
      $scope.weatherData.city = data.name;
      $scope.weatherData.description = data.weather[0].description;
      $scope.weatherData.coord = data.coord;
      $scope.weatherData.temp = data.main.temp;
      $scope.state = true;
    });
  };
});

weather.html =>

<ion-view>
  <ion-content overflow-scroll="false" class="weather-home">
    <button class="button button-full button-calm" ng-click="loadWeather()">
      Search
    </button>
    <div ng-if="state" class="forecast">
        <img src="{{weatherData.icon}}" class="icon"/>
        <label class="bigText">{{weatherData.main}}</label>
        <div class="mainText">Town : {{weatherData.city}}</div>
        <div class="mainText">Current conditions : {{weatherData.description}}</div>
        <div class="mainText">Geographical coordinates : {{weatherData.coord}}</div>
        <div class="bigText">{{weatherData.temp}} °C</div>
    </div>
  </ion-content>
</ion-view>

Nothing appears in the Firefox console, and I have only made changes in these files since the API was running ...

Answer 1

Thanks to "digit" to helping me find the way !

Here is the solution :

controllers.js =>

.controller('WeatherCtrl', function($scope, $cordovaGeolocation, $http, OpenWeatherConfig) {
  $scope.state = false;
  $scope.weatherData = {
    icon: '',
    main: '',
    city: '',
    description: '',
    lat:'',
    lon: '',
    temp: ''
  };
  $scope.loadWeather = function() {
    var posOptions = {timeout: 10000, enableHighAccuracy: false};
    $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude;
      var lon = position.coords.longitude;

      var url = OpenWeatherConfig.searchUrl + 'lat=' + lat + '&lon=' + lon + OpenWeatherConfig.units + OpenWeatherConfig.appid;
      $http.get(url).success(function(data) {
       $scope.weatherData.icon = OpenWeatherConfig.imgUrl + data.weather[0].icon + '.png';
       $scope.weatherData.main = data.weather[0].main;
       $scope.weatherData.city = data.name;
       $scope.weatherData.description = data.weather[0].description;
       $scope.weatherData.lat = data.coord.lat;
       $scope.weatherData.lon = data.coord.lon;
       $scope.weatherData.temp = data.main.temp;
       $scope.state = true;
      });
    }, function(err) {
    });
  };
});

weather.html =>

<ion-view>
  <ion-content overflow-scroll="false" class="weather-home">
    <button class="button button-full button-calm" ng-click="loadWeather()">
      Search
    </button>
    <div ng-if="state" class="forecast">
      <img src="{{weatherData.icon}}" class="icon"/>
      <label class="bigText">{{weatherData.main}}</label>
      <div class="mainText">Town : {{weatherData.city}}</div>
      <div class="mainText">Current Conditions : {{weatherData.description}}</div>
      <div class="mainText">Geographical coordinates : {{weatherData.lat}}, {{weatherData.lon}}</div>
      <div class="bigText">{{weatherData.temp}} °C</div>
    </div>
  </ion-content>
</ion-view>