I’m new to Ionic, to all development really. So I have a simple question I’d like to post before I go too deep: Can I use Ionic to build an app which logs gps on a map and shows this as a training session (Runkeeper style I guess)?
bump
Any info on this subject would be greatly appreciated.
Are you trying to make a path connecting preivous locations? For grabbing the location you should take a look at the location plugin for ngcordova. I’m using google maps to display just one point on a map but it works nice and I don’t see why you couldn’t put a path on it. I’m pretty sure they have line segment tools too. Also I’d suggest using just the regular google maps javascript api not the angular wrapper.
Yes I want to make a path on the map showing your movement since you started it. No idea how do to this.
Ok I’ll check out the plugin you mention, thanks!
Will I be able to get the total distance as well?
Why do you suggest the regular google maps js vs angular wrapper?
@epelc
Ok I’ve installed ngCordova and the $cordovaGeolocation plugin.
I’m getting the location correct, it seems.
But now how do I start saving these locations over time? A button should start this and end it.
Difficult to comment without understanding your exact requirement.
But you could have a start / end button, once the start button is pressed you have a timer which on each tick retrieves co-ordinates at a set interval (maybe every 10 seconds) and saving them into an array or object. Once the end button is pressed you obviously stop your timer.
Then you’d have an array of the co-ordinates over time and you can plot them accordingly, with array[0] being start, array[length-1] being end point and everything in between as way points I’d imagine?
As I said though, difficult to say without knowing your exact requirements.
Thanks @edwrede_ZA
That sounds pretty much exactly what I need to do, yes.
Now I just have to find a way to do that haha. I’ll keep on experimenting on this and report back.
Lemme know if you need help with that?
Implementing a timer in Angular is very easy so let me know if you’d like me to get you started there.
Since you’re already getting the current location co-ordinates you’re pretty much half way there 
Thanks @edwrede_ZA
Well I can ask one thing directly.
I’ve implemented the code according to the geolocation documentation. It seems it loads directly as the page loads (or the controller I guess).
I have no idea if it running continuosly from there on or if it’s just a one time thing.
Anyway, that’s not what I want. I want to trigger the process with a button click, then run it and save every location, until a stop button is clicked.
So I guess, how do I start it from a button?
Anytime man
I see the example actually shows how to achieve exactly what you want to achieve, so that’s good news.
So all you need is a start button and presumably a ng-click on the button and inside that, this code:
var watch = $cordovaGeolocation.watchPosition({ frequency: 1000 });
watch.promise.then(function() { /* Not used */ },
function(err) {
// An error occurred.
},
function(position) {
// Active updates of the position here
// position.coords.[ latitude / longitude]
// this is where you will add your code to track changes in co-ordinates
});
Then once the stop button has been pressed, execute this code:
// clear watch
$cordovaGeolocation.clearWatch(watch.watchID)
That should do it
Hi @edwrede_ZA I’m stuck already…
The code is in my controller and it seems to start automatically - that’s ok.
But when I read the code I interpret the watch section as if it would print the locations continuously but it’s not. It only prints once. Why is that?
.controller('RideCtrl', function($scope, $location, $cordovaGeolocation) {
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
var lat = position.coords.latitude
var long = position.coords.longitude
}, function(err) {
// error
alert('code: ' + err.code + '\n' +
'message: ' + err.message + '\n');
});
// begin watching
var watch = $cordovaGeolocation.watchPosition({ frequency: 1000 });
watch.promise.then(function() { /* Not used */ },
function(err) {
// An error occurred.
alert('code: ' + err.code + '\n' +
'message: ' + err.message + '\n');
},
function(position) {
// Active updates of the position here
// position.coords.[ latitude / longitude]
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Timestamp: ' + position.timestamp + '<br />' +
'<hr />' + element.innerHTML;
});
// clear watch
$cordovaGeolocation.clearWatch(watch.watchID)
})
Hi Tommy.
Apologies for the delay in response, been AFK for a few days.
Okay so without having played with it myself, I believe what’s happening here is that you’re starting the watch and then immediately killing it.
$cordovaGeolocation.clearWatch(watch.watchID)
So it runs once, then that line of code is executed and it stops watching. Comment out that line of code and see if the co-ordinates change on the fly as it were.
It also seems that the watch will only trigger if the co-ordinates change… Again though I’ve never used this plugin myself that’s just the impression I get from the documentation but I may be totally off base.
Let me know what happens when you comment out the clearWatch.
Good luck
how to get the location only from the gps,
now am getting the location from the gps, network provider, wifi etc.
is it possible to configer my watcher and my background geo location plugin in such a way that i ll get the locaiton only from the gps.
as my application is an KM tracking application, i want only the accurate, as the accurate location can only provided by the gps.
so can anyone help me out to solve this problem.
thanks in advance 
hey Geolocation using cordova is not working if i run in production but in my local system it is working fine .it is showing that it only work if have a secure connect (https). what should i do to run that ??
1 Like