CODEWITHSUNDEEP
javascriptangularjsjsonapigeolocation
Michael
Michael

Reputation: 11894

How to get lat and lon geolocation coordinates?

I have app shows your current location via the lat and lon coordinates and displays on the map. Also in this application has a function display markers denoting sights. These markers I get from api wiki using lat and lon coordinates. But the problem is that the coordinates at the moment are completely static and must be write into the code yourself. How I get lat and lon dynamically from a third-party service? For example, from JSON IP API

Code that is currently responsible for retrieving data

app.factory('places', ['$http', function($http) {

    return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + 43.1056 + '%7C' + 131.8735 + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

}])

I tried to make it so

app.factory('places', ['$http', '$scope', function($http, $scope) {

  $scope.coordinates = {};
  $http.get('http://ip-api.com/json')
    .success(function(data) {
      $scope.coordinates.lat = data.lat;
      $scope.coordinates.lon = data.lon;
    });

    return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

}])

and

app.factory('places', ['$http', function($http) {

  $http.get('http://ip-api.com/json')
    .success(function(coordinates) {
         return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
                .success(function(data) {
                    return data
                })
                .error(function(err) {
                    return err
                })
    });

}])

but its not working. Could you help me with this problem? If you need to see the entire code of the application is completely you can download it here https://www.dropbox.com/s/qiu91hhdrc0qy5o/GeoApp.rar?dl=0

Upvotes: 2

Views: 1326

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

You can use HTML5 feature of the browsers and simply write a function to get the current coordinates:

var deferred;

$scope.currentPosition = function() {
    deferred = $q.defer();

    if (window.navigator && window.navigator.geolocation) {
        window.navigator.geolocation.getCurrentPosition(currentPosition, handleErrorOnTrackCurrentPosition);
    } else {
        deferred.reject({msg: "Browser does not supports HTML5 geolocation"});
    }
    return deferred.promise;
};

function currentPosition(position) {
    deferred.resolve({latitude: position.coords.latitude, longitude: position.coords.longitude});
}

function handleError(error) {
    deferred.reject({msg: error.message});
}

Now, when you want to get current coordinates, simply write:

$scope.currentPosition().then(function(data) {
    console.log(data.latitude, data.longitude);
});

Upvotes: 3

Related Questions