How to use Cordova Geolocation with OpenWeatherMap in Ionic? - angularjs

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>