Geo Location with Ionic and Firebase


#1

Good day to all you goods folks out there.

With the code below I am able to get my present location and display it {{coords}}. Where I run into issues is inserting this expression into the form which firebase can use anything I have attempted has placed in the form as an [Object] [object]. has anyone on this forum attempted something like this before or can point me in the right direction.

//Form Content

// Test to insure geoloaction is working…delete in production

{{coords}}

//…delete in production
//…delete in production
      <div ng-controller="timeEventController">

        <div class="item item-divider">
          <input type="time" ng-model="localtime">
        </div>

        <div class="item item-divider">
          <input type="text" ng-model="mylocation">
        </div>

        <div class="item item-divider">
          <input type="text" ng-model="position" placeholder="Name or Position">
        </div>

        <div class="item item-divider">
          <input type="text" ng-model="events" ng-keydown="addMessage($event)" placeholder="Event...">
        </div>
      </div>
    </ion-content>

//Controllers
.controller(‘timeEventController’, function($scope, $firebase) {
var ref = new Firebase(“https://shining-fire-157.firebaseio.com/Time_Event/”);
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
if (e.keyCode != 13) return;
$scope.messages.$add({ MyLocation: $scope.mylocation, Position: $scope.position, Message: $scope.events, Device_Timestamp: $scope.localtime, UTC_Timestamp: new Date().getTime()});
$scope.events = “”;
$scope.position = “”;
$scope.mylocation = “”;
};
})

.controller(‘geoLocCtrl’, function ($scope,geolocation) {
geolocation.getLocation().then(function(data){
$scope.coords = {lat:data.coords.latitude, long:data.coords.longitude};
});
})

//js file

‘use strict’;

angular.module(‘geolocation’,[]).constant(‘geolocation_msgs’, {
‘errors.location.unsupportedBrowser’:‘Browser does not support location services’,
‘errors.location.permissionDenied’:‘You have rejected access to your location’,
‘errors.location.positionUnavailable’:‘Unable to determine your location’,
‘errors.location.timeout’:‘Service timeout has been reached’
});

angular.module(‘geolocation’)
.factory(‘geolocation’, [’$q’,’$rootScope’,’$window’,‘geolocation_msgs’,function ($q,$rootScope,$window,geolocation_msgs) {
return {
getLocation: function (opts) {
var deferred = $q.defer();
if ($window.navigator && $window.navigator.geolocation) {
$window.navigator.geolocation.getCurrentPosition(function(position){
$rootScope.$apply(function(){deferred.resolve(position);});
}, function(error) {
switch (error.code) {
case 1:
$rootScope.$broadcast(‘error’,geolocation_msgs[‘errors.location.permissionDenied’]);
$rootScope.$apply(function() {
deferred.reject(geolocation_msgs[‘errors.location.permissionDenied’]);
});
break;
case 2:
$rootScope.$broadcast(‘error’,geolocation_msgs[‘errors.location.positionUnavailable’]);
$rootScope.$apply(function() {
deferred.reject(geolocation_msgs[‘errors.location.positionUnavailable’]);
});
break;
case 3:
$rootScope.$broadcast(‘error’,geolocation_msgs[‘errors.location.timeout’]);
$rootScope.$apply(function() {
deferred.reject(geolocation_msgs[‘errors.location.timeout’]);
});
break;
}
}, opts);
}
else
{
$rootScope.$broadcast(‘error’,geolocation_msgs[‘errors.location.unsupportedBrowser’]);
$rootScope.$apply(function(){deferred.reject(geolocation_msgs[‘errors.location.unsupportedBrowser’]);});
}
return deferred.promise;
}
};
}]);


#2

It displays coords bcos yr geolocation controller calculates it but it does not get saved. Im not too sure how exactly but you need to save the data.

Btw, better to tidy up data for others to help…makes life easier :slight_smile: