CODEWITHSUNDEEP
javascriptangularjscordova
Amey
Amey

Reputation: 3

Show Loading GIF, until coordinates are fetched

Angular code and cordova plugin to get geolocation :

$cordovaGeolocation
        .getCurrentPosition()
        .then(function (position) {
          $scope.map.center.lat  = position.coords.latitude;
          $scope.map.center.lng = position.coords.longitude;
          $scope.map.center.zoom = 18;
          $scope.map.markers.now = {
            lat:position.coords.latitude,
            lng:position.coords.longitude,
            focus: true,            
            draggable: false,
            //message: ''
          };

        }

Until co-ordinates are fetched and plotted on map, map shows global map Like these:

these map is displayed until co-ordinates are fetched

IONIC HTML CODE:

<ion-view cache-view="false" title="Dashboard">
  <ion-content data-tap-disabled="true">
    <leaflet defaults="map.defaults" center="map.center" markers="map.markers" ng-if="map"></leaflet>

Upvotes: 0

Views: 153

Answers (1)

Carlos Arauz
Carlos Arauz

Reputation: 805

Controller

$scope.loading = true;
$cordovaGeolocation
        .getCurrentPosition()
        .then(function (position) {
          $scope.loading = false;
          $scope.map.center.lat  = position.coords.latitude;
          $scope.map.center.lng = position.coords.longitude;
          $scope.map.center.zoom = 18;
          $scope.map.markers.now = {
            lat:position.coords.latitude,
            lng:position.coords.longitude,
            focus: true,            
            draggable: false,
            //message: ''
          };

        }

Html

<ion-view cache-view="false" title="Dashboard">
    <ion-content data-tap-disabled="true">
       <div class="spinner" ng-if="loading">Loading...</div>
       <leaflet defaults="map.defaults" center="map.center" markers="map.markers" ng-if="map && !loading"></leaflet>

Upvotes: 0

Related Questions