All geek questions in one place

AngularJS, Flyer. How can I get lat and lon coordinates dynamically from a third-party service? [problem resolved]

I have a simple application that shows your current location through lat and lon coordinates and displays on the map. But at the moment this is static, and the coordinates must be specified manually. Full application code:

  • index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
    <body ng-app="NearMeApp">

        <div class="header">
            <div class="container-fluid">
                <h1 class="pull-left">NearMe</h1>
                <a class="pull-right" href="#/about">About</a>
            </div>
        </div>

        <div ng-view></div>

        <script src="js/app.js"></script>

        <script src="js/controllers/MainController.js"></script>
        <script src="js/controllers/AboutController.js"></script>

    </body>
</html>

  • main.css on pasteBin

  • main.html

    <div class="main">
    <div class="container-fluid" id="map-canvas">
        <leaflet center="mapCenter"></leaflet>
    </div>
</div>

  • about.html

    <div class="about">
    <div class="container-fluid">
        <h1>Meet NearMe</h1>
        <h2>The best place to discover new places around you.</h2>
        <a class="btn btn-primary" href="#/">Start exploring</a>
    </div>
</div>

  • app.js

    var app = angular.module('NearMeApp', ['ngRoute', 'leaflet-directive']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'MainController',
        templateUrl: 'views/main.html'
    })
    .when('/about', {
        controller: 'AboutController',
        templateUrl: 'views/about.html'
    })
    .otherwise({
        redirectTo: '/'
    });

});

  • AboutController.js

    app.controller('AboutController', ['$scope', function($scope) {

}]);

  • MainController.js

    app.controller('MainController', ['$scope', function($scope) {

    $scope.mapCenter = {
        lat: 40.741934,
        lng: -74.004897,
        zoom: 17
    };

}]);

How can I get lat and lon dynamically from a third-party service? For example, from the JSON IP API

I heard that I can get JSON data this way

app.factory('latlon', ['$http', function($http) {
    return $http.get('http://ip-api.com/json')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}]);

but I don’t know what to do and how to use it in my situation. Could you help me solve this problem?

problem resolved

MainController.js

app.controller('MainController', ['$scope', '$http', function($scope, $http) {
  $scope.mapCenter = {};
  $http.get('http://ip-api.com/json')
      .success(function(data) {

          $scope.mapCenter.lat = data.lat;
          $scope.mapCenter.lng = data.lon;
          $scope.mapCenter.zoom = 17;

      });
}]);
+4
1

, " , (Lat Lon) ", HTML5 : navigator.geolocation.getCurrentPosition(success[, error[, options]])

factory, dependecy window

angular.module('app', []).factory('GeolocationService', ['$q', '$window', function ($q, $window) {

    function getPosition() {
      var deferred = $q.defer();

      if (!$window.navigator.geolocation) { // check if geolocation is supported
        deferred.reject('Geolocation is not supported.');
        return;
    }

    $window.navigator.geolocation.getCurrentPosition( // get the current position 
        function (position) { // ok
            deferred.resolve(position);
        },
        function (err) { // error
            deferred.reject(err);
        });

    return deferred.promise; // returned as a promise
  }

  return {
    getCurrentPosition: getCurrentPosition
  };
}]);


geolocationSvc.getPosition().then(
   function success(position){
     $scope.mapCenter = {
      lat: pos.coords.latitude,
      lng: pos.coords.longitude,
      zoom: 17      
}, 
function error(err){
  console.log('ERROR(' + err.code + '): ' + err.message);
});

, , , .

+1

Source: https://habr.com/ru/post/1619801/

More articles:


All Articles