Pull to refresh and geolocation

Hi people, I’m trying to create a view with a pull to refresh option. The idea is to list some POIs (Points of Interest), the nearest the first. When I enter the view, the list is printed with “? km” distance in each POI. Then the user pull to refresh, and I calculate the user position, and then calculate the distance to each of the POIs. The problem is it doesn’t work as expected. Some times it doesn’t refresh the list, and it doesn’t calculate my position. I can’t explain you better because it’s a bit random… Maybe the problem is in geolocation? This is my controller.

.controller('Aprop', function ($scope) {
var myLat;
var myLong;
var coords = [];
$scope.distance = [];

storeCoordinate(1,"Finca Bell Resguard",41.47808400000000,2.30440600000000,coords);
storeCoordinate(2,"Can Teixidor",41.47499800000000,2.30231200000000,coords);
storeCoordinate(3,"Can Targa",41.47610500000000,2.30640500000000,coords);
storeCoordinate(4,"Can Xala",41.47817400000000,2.31013300000000,coords);
storeCoordinate(5,"Carrers de Sant Pere...",41.47814200000000,2.31331900000000,coords);
storeCoordinate(6,"Església de Sant Pere",41.47930300000000,2.31642900000000,coords);
storeCoordinate(7,"Casa Benèfica",41.47969300000000,2.31547200000000,coords);
storeCoordinate(8,"Escola Ocata",41.48008700000000,2.31654700000000,coords);
storeCoordinate(9,"Can Millet",41.48013700000000,2.31768600000000,coords);
storeCoordinate(10,"Plaça de la Llibertat",41.47902900000000,2.31818900000000,coords);
storeCoordinate(11,"Casino",41.47904500000000,2.31883900000000,coords);
storeCoordinate(12,"Ajuntament",41.47912200000000,2.31915300000000,coords);
storeCoordinate(13,"Can Malet",41.47968200000000,2.31937600000000,coords);
storeCoordinate(14,"Casa de Cultura",41.47942800000000,2.32049300000000,coords);
storeCoordinate(15,"Carrer Adra",41.47967700000000,2.32114700000000,coords);
storeCoordinate(16,"Plaça d'Ocata",41.48129300000000,2.32204900000000,coords);
storeCoordinate(17,"Cal Ros de les Cabres",41.48218000000000,2.32479300000000,coords);

for (var i = 0; i < coords.length; i++) { //Create $scope.distance with POI's array
    var x = coords[i].x;
    var y = coords[i].y;
    var poi = coords[i].poi;
    var url = "app.poi" + coords[i].poi;
    var nom = coords[i].nom;
    var distancia = "?"; //unknown distance
    var img = "img/poi_" + coords[i].poi + "_t.jpg";
    $scope.distance.push({distancia: distancia, poi: poi, url: url, nom: nom, img: img, x: x, y: y});
} 

$scope.doRefresh = function() {
    navigator.geolocation.getCurrentPosition(function (pos) {
        //success
        myLat = pos.coords.latitude;
        myLong = pos.coords.longitude;
        // to loop through coordinate values
        for (var i = 0; i < $scope.distance.length; i++) {
            var x = $scope.distance[i].x;
            var y = $scope.distance[i].y;
            var distancia = getDistanceFromLatLonInKm(myLat,myLong,x,y).toFixed(1);
            $scope.distance[i].distancia = distancia;
        } 
        $scope.distance.sort(function(a,b) { return parseFloat(a.distancia) - parseFloat(b.distancia) } ); //ordenem per proximitat
        //alert(myLat+" "+myLong);
    }, function (errMsg) {
        //error
        alert(JSON.stringify(errMsg))
        navigator.geolocation.getCurrentPosition(function (pos) {
            alert('error')
            alert(JSON.stringify(pos))
        }, function (errMsg) {
            //alert(JSON.stringify(errMsg))
        }, {
            enableHighAccuracy: true,
            timeout: 60 * 1000 * 2,
            maximumAge: 0
        });
    }, {
        enableHighAccuracy: true,
        timeout: 31000, 
        maximumAge: 0 
    });
    $scope.$broadcast('scroll.refreshComplete');
    $scope.$apply()       
};

function storeCoordinate(poiVal, poiNom, xVal, yVal, array) {
    array.push({poi: poiVal, nom: poiNom, x: xVal, y: yVal});
}

//$scope.distance.push({distancia: "22", poi: "1"});//afegim un punt per debug
//$scope.distance.sort(function(a,b) { return parseFloat(a.distancia) - parseFloat(b.distancia) } ); //ordenem per proximitat, debug

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

})

Thank you for your help!
Ruben

Please include a codepen so we can help you better :smile:

Hi, devqon1, I’m having some problems with Codepen, trying to make my app working on it… I never have used Codepen, but as soon as I make it work, I’ll tell you. Thank you for your help!

Hi, still having problems with Codepen. Can’t make geolocation work on it. In emulator and in device, it works. But as I told you my problem is with refresh.

I’ll try to make geolocation work in Codepen. Thanks!

Hi,
while trying to make it work in Codepen, I found a Pen wich uses a different way to find user location. I change my app to use this way, and now it seems to be updating position on refresh. I’ll check it on device (I have to move), and confirm it works. Thanks"