Kabende Kabende
Documentation will really help
Ionic Geolocation
Ionic Geolocation - Read Your Phone GPS Location, Altitude and Speed
Free!
Neven
Member since 2015
Details
If you need to check location while the app is suspended check: Ionic Geolocation with Background Location
A barebone ionic geolocation application for iOS and Android that reads your phone gps location and displays it. It's all you need to get started on your location based application. I know you can figure it out on your own, but this will save you time, especially when you get stuck :)
I am updating the location and speed every second, you can change this to what you need. I haven't had any luck with using cordova watchPosition so I am doing my own polling here. Speed is displayed in Meters per second. You can now check if Location Service is disabled for your app.
After you install ionic you have to install cordova geolocation plugin.
Check out my other useful starters are here: Great Ionic Starters.
Documentation
- All of the geolocation logic is contained in 'Geolocation' service in
services.js Two things you can modify in services are the handling of errors and geolocation options
var options = { enableHighAccuracy: true, // USE HIGH ACCURACY timeout: 15000, // HOW LONG TO WAIT FOR A RESPONSE maximumAge: 0 // SET TO ZERO SO NEW VALUES ARE ALWAYS RETURNED }; function showError(error) { console.log('Unable to get the location.'); // LOG ERRORS }DashCtrlcontroller incontrollers.jsis used to display the values from geolocation service- Data is displayed in
tab-dash.html - Changes to the values are wrapped in
$scope.$apply(function () { }to enable data binding - Geolocation data is obtained by calling
Geolocation.checkLocation(callback), this function takes a function as parameter to return the value - You can change the 1000 (1 second) interval polling on this line:
setInterval( function(){ Geolocation.checkLocation( $scope.callback ); }, 1000);- Call
Geolocation.isGPSEnabled()to see if Location Service is enabled Geolocation.getPosition()returns a result arrayreturn new Array(latitude, longitude, altitude, speed, GPSEnabled);where you can check the last element to see if GPS is enabled.
Installation
Install Ionic
- Read Ionic Installation Guide
- Download genymotion if you plan to emulate on android - Genymotion download
Open zipped folder in terminal
go to the project folder- Install Ionic
sudo npm install -g ionic ionic platform add iosionic platform add androidcordova plugin add cordova-plugin-geolocationionic emulate iosionic run android(use run if you use genymotion)- the app will ask you to share your location
- If you are using an emulator you will have to trigger the location manually
Background Location
- If you need to check location while the app is suspended check: Ionic Geolocation with Background Location
Payment Information
- The payment on this site is processed by Stripe.com and sometimes your bank will decline the charges if they don't recognize it. You can contact your bank or try a different card.
Support
- Leave a comment if you get stuck on anything
- If you email me directly it might get caught in the spam filter
- And Kudos if you leave a Rating! =)
Stay in Touch
- Visit my blog rubberchickin.com.
Hey there! You'll need to log in before you can leave a comment here.
ayman qaidi
i just bought this awesome starter . one thing is missing if you can add . or help me to do it how to create status checking when gps location enabled or not
Neven
Hey, thanks for the support. I added a function you can call to see if GPS is enabled in services.js. Try calling Geolocation.isGPSEnabled() from your controller. It will return a simple true or false. Thnx.
Neven
The way the geolocation api works is you have to request location first and an error of PERMISSION_DENIED will show up if the user has not allowed your app to have access to location. So every time you request location you will know if the gps is enabled.
Neven
I also just added GPSEnabled flag to the result array so you can have it when you request the position. Check this value first to know if GPS is enabled.
ayman qaidi
its not working to make control dynamic whe its on say tell view to show enable text when its off change text and class in view here is my code in controller $scope.$apply(function () { $scope.location_isGPSEnabled = Geolocation.isGPSEnabled(); if($scope.location_isGPSEnabled){ $scope.location_status = 'Location enabled'; $scope.location_class = true; }else{ $scope.location_status = 'Location disabled'; $scope.location_class = false; } });
Neven
Hey, I just uploaded the new example which shows GPS enabled. Look at the new screenshot and download the new code, thnx.
ayman qaidi
thanks but its not work correctly . first check says its disabled then says its enabled when i turn off gps its fine but when i turn on its still says its off please help me about that
Neven
I'm guessing you're using android. The problem is that on Android you can turn off the GPS which is different from allowing the app to use GPS. When you turn off GPS it will result in a location timeout. I've updated the code to now show GPS disabled whenever it cannot read the GPS location and reduced the timeout to 3 seconds. You will now see the flag flip to false after 3 seconds of GPS being turned off. You can modify this timeout to what you prefer, and also you can see different errors being caught in showErrors function.
ayman qaidi
all i want is when GPS is on show green icon when its off show red . also detect in time and app when app is open and user turn GPS off or on show me div green or red for it . when its green and on user will start tracking and send to api to save it thats all i want thanks for your code updates and ur support
Neven
Yes if you check the new code you should see the flag is switching properly, you will just have to add your own indicator. Thnx
ayman qaidi
yeah its working perfect :) thank you . just want to ask last thing . do you think there is another way to get GPS location better and more accurate ? also if i change timeout to 1000 what will happen if his internet is bad ?
Neven
The accuracy will vary from device to device depending on the GPS module, there's not much you can do about that unfortunately. if you keep the enableHighAccuracy=true then you should get the best available results. I wouldn't reduce the timeout too much because there are many reasons why a GPS query might take longer than expected.
Nils Fuchs
hi, i cant comment under the yik yak templat... can u help me to upload the backend to heruko?
ayman qaidi
hello there is another issue with this method . when app in background getting location is fail and not getting any new position do you have any fix for this
Neven
@ayman Ionic apps don't support background mode by default. You will have to add a plug-in to enable apps running in background mode. I suggest looking at this one: https://github.com/katzer/cordova-plugin-background-mode
ayman qaidi
already added this plugin . but after amount of time location cant be found i dont know what exactly caused this . some says that if device not moving location service automatically stops
Neven
@ayman I've read somewhere that on iOS you have to walk a few blocks for the location to work in the background. I will have to investigate this more to find out.
Neven
@ayman background location seems to be working for me. I added `$ionicPlatform.ready(function() { cordova.plugins.backgroundMode.enable(); $scope.interval = setInterval( function(){ Geolocation.checkLocation( $scope.callback ); }, 1000); // need to use a callback because reading location takes time });`
Neven
I've tested the background mode and confirmed that the app does execute in the background, however the location service stops working after some time. On iOS you have to enable the "Background Location Updates" in Xcode when you're building your app for the phone. iOS also has power saving mode where it stops getting location if you aren't moving. I am not familiar with Android but I do believe they have a similar setup and power saving mode that will prevent you from constantly asking for location updates in the background. I would email Ionic/cordova teams to see if background location is possible on android, Sorry I don't have a better answer for you.
ayman qaidi
hello naven i use android only i dont care about ios i know there is no problem with some devices but with some in background after some time location timeout issue stated over and over can you help me to integrate this plugin please https://github.com/transistorsoft/cordova-background-geolocation-lt
Neven
@ayman I created a new starter it is free for a few days. Make sure to follow the new install instructions, there is a new plugin. Check it here -> http://market.ionic.io/starters/ionic-geolocation-background-location-service
ayman qaidi
@Naven thanks for this new starter but i already used another plugin bcoz i had issue with cordova-plugin-mauron85-background-geolocation issue was not getting coords so fast but thanks anyway i hope this starter will be useful for other developer like me :)
Norman Avila
Hi, how easy is to config the following? 1. run in the background 2. be able to set/config an ID of the device 3. set/config to http get position to a server (to log coords) 4. set/config update rate / based on distance change or time ? 5. offline storage where no network available ? thanks
Neven
1. There are other starters that support background location by default. You can read about one here: http://ngcordova.com/docs/plugins/backgroundGeolocation/ -- 2. You can get device ID with this plugin https://github.com/Paldom/UniqueDeviceID -- 3. You can use a simple http request to save coordinates to your server, that part is easy. -- 4. You will have to program your own logic for how frequent you want to track changes, it shouldn't be very difficult. --5. You can save thing into local storage. I would suggest using localForage (https://github.com/mozilla/localForage). It all involves work, but difficulty depends on your skill level. Good luck.
Rene Bartkowiak
Hm, I tried it out on my Honor 6 running Android 6.0. I don't get any information about Latitude, Longitude, Altitude, Speed or GPS Enabled. All blank. Do you have an idea what's wrong here?
Neven
Hey can you tell me what Ionic and Cordova versions you are running. And try to reinstall the plugin by running `cordova plugin remove cordova-plugin-geolocation` and `cordova plugin add cordova-plugin-geolocation`. The other thing you can try is running `npm install`
Rene Bartkowiak
I think it hasn't to do anything with Cordova / Ionic. I have the same problem when using the Ionic Creator. Most ngCordova plugins don't work on my real device. I tried it with a Galaxy S3 and this worked well. I think it has something to do with the ngCordova plugin and Android 6. Maybe someone can confirm?
Neven
Do you see any specific errors when you open the console in a debugger? Maybe it's just a permissions thing on the device.
Rene Bartkowiak
When I'm trying to run it in debug mode via "ionic run android -l -c -s" I'm getting "Application error: Network error. (http://192.168.178.20:8199/)". But when I install the .apk file I don't get this error and just no values.
Rene Bartkowiak
Okay fixed this error by adding the cordova whitelist plugin. Now I can see the live log that looks like this: 0 943039 log check location called 1 944037 log check location called 2 944089 log Unable to get the location. 3 944157 error ReferenceError: speed is not defined at Object.getPosition (http://192.168.178.20:8100/js/services.js:12:54) at http://192.168.178.20:8100/js/controllers.js:7:41 at Scope.$eval (http://192.168.178.20:8100/lib/ionic/js/ionic.bundle.js:29158:28) at Scope.$apply (http://192.168.178.20:8100/lib/ionic/js/ionic.bundle.js:29257:23) at $scope.callback (http://192.168.178.20:8100/js/controllers.js:6:17) at showError (http://192.168.178.20:8100/js/services.js:45:7)
Neven
Ok I see. Looks like the speed variable isn't available on that model smartphone. In the code it needs ignore the speed variable and only try to show the longitude and latitude.
Rene Bartkowiak
Nope, that's not the problem. I updated the code a bit and it's running into error code 2. It is unable to get the location due to timeout. I already increased the timeout value to something like 60000 but it didn't change. I really don't know what's wrong here. It has something to do with the Cordova geolocation plugin imho.
Neven
Did the app ask you for location permission when you first launched? And can you try setting enableHighAccuracy to false in the options object.
Rene Bartkowiak
Yes, it asks me for location permission and I also tried it without high accuracy. Other apps from the app store that are using geolocation service are working so it has something to do with the cordova plugin imho.
Johnny
hi, whats this error? -[CDVCommandQueue executePending] [Line 142] FAILED pluginJSON = ["Device316683967","Device","getDeviceInfo",[]]
Neven
How are you starting the project? That looks like there might be something wrong with your Cordova setup. I would try re installing all the plugins for the project as well as installing `cordova plugin add cordova-plugin-console`.
Johnny
hi, whats this error? -[CDVCommandQueue executePending] [Line 142] FAILED pluginJSON = ["Device316683967","Device","getDeviceInfo",[]]
Neven
How are you starting the project? That looks like there might be something wrong with your Cordova setup. I would try re installing all the plugins for the project as well as installing `cordova plugin add cordova-plugin-console`.
Rene Bartkowiak
Hm, I tried it out on my Honor 6 running Android 6.0. I don't get any information about Latitude, Longitude, Altitude, Speed or GPS Enabled. All blank. Do you have an idea what's wrong here?
Neven
Hey can you tell me what Ionic and Cordova versions you are running. And try to reinstall the plugin by running `cordova plugin remove cordova-plugin-geolocation` and `cordova plugin add cordova-plugin-geolocation`. The other thing you can try is running `npm install`
Rene Bartkowiak
I think it hasn't to do anything with Cordova / Ionic. I have the same problem when using the Ionic Creator. Most ngCordova plugins don't work on my real device. I tried it with a Galaxy S3 and this worked well. I think it has something to do with the ngCordova plugin and Android 6. Maybe someone can confirm?
Neven
Do you see any specific errors when you open the console in a debugger? Maybe it's just a permissions thing on the device.
Rene Bartkowiak
When I'm trying to run it in debug mode via "ionic run android -l -c -s" I'm getting "Application error: Network error. (http://192.168.178.20:8199/)". But when I install the .apk file I don't get this error and just no values.
Rene Bartkowiak
Okay fixed this error by adding the cordova whitelist plugin. Now I can see the live log that looks like this: 0 943039 log check location called 1 944037 log check location called 2 944089 log Unable to get the location. 3 944157 error ReferenceError: speed is not defined at Object.getPosition (http://192.168.178.20:8100/js/services.js:12:54) at http://192.168.178.20:8100/js/controllers.js:7:41 at Scope.$eval (http://192.168.178.20:8100/lib/ionic/js/ionic.bundle.js:29158:28) at Scope.$apply (http://192.168.178.20:8100/lib/ionic/js/ionic.bundle.js:29257:23) at $scope.callback (http://192.168.178.20:8100/js/controllers.js:6:17) at showError (http://192.168.178.20:8100/js/services.js:45:7)
Neven
Ok I see. Looks like the speed variable isn't available on that model smartphone. In the code it needs ignore the speed variable and only try to show the longitude and latitude.
Rene Bartkowiak
Nope, that's not the problem. I updated the code a bit and it's running into error code 2. It is unable to get the location due to timeout. I already increased the timeout value to something like 60000 but it didn't change. I really don't know what's wrong here. It has something to do with the Cordova geolocation plugin imho.
Neven
Did the app ask you for location permission when you first launched? And can you try setting enableHighAccuracy to false in the options object.
Rene Bartkowiak
Yes, it asks me for location permission and I also tried it without high accuracy. Other apps from the app store that are using geolocation service are working so it has something to do with the cordova plugin imho.
Neven
1. There are other starters that support background location by default. You can read about one here: http://ngcordova.com/docs/plugins/backgroundGeolocation/ -- 2. You can get device ID with this plugin https://github.com/Paldom/UniqueDeviceID -- 3. You can use a simple http request to save coordinates to your server, that part is easy. -- 4. You will have to program your own logic for how frequent you want to track changes, it shouldn't be very difficult. --5. You can save thing into local storage. I would suggest using localForage (https://github.com/mozilla/localForage). It all involves work, but difficulty depends on your skill level. Good luck.
Norman Avila
Hi, how easy is to config the following? 1. run in the background 2. be able to set/config an ID of the device 3. set/config to http get position to a server (to log coords) 4. set/config update rate / based on distance change or time ? 5. offline storage where no network available ? thanks
ayman qaidi
@Naven thanks for this new starter but i already used another plugin bcoz i had issue with cordova-plugin-mauron85-background-geolocation issue was not getting coords so fast but thanks anyway i hope this starter will be useful for other developer like me :)
Neven
@ayman I created a new starter it is free for a few days. Make sure to follow the new install instructions, there is a new plugin. Check it here -> http://market.ionic.io/starters/ionic-geolocation-background-location-service
ayman qaidi
hello naven i use android only i dont care about ios i know there is no problem with some devices but with some in background after some time location timeout issue stated over and over can you help me to integrate this plugin please https://github.com/transistorsoft/cordova-background-geolocation-lt
Neven
I've tested the background mode and confirmed that the app does execute in the background, however the location service stops working after some time. On iOS you have to enable the "Background Location Updates" in Xcode when you're building your app for the phone. iOS also has power saving mode where it stops getting location if you aren't moving. I am not familiar with Android but I do believe they have a similar setup and power saving mode that will prevent you from constantly asking for location updates in the background. I would email Ionic/cordova teams to see if background location is possible on android, Sorry I don't have a better answer for you.
Neven
@ayman background location seems to be working for me. I added `$ionicPlatform.ready(function() { cordova.plugins.backgroundMode.enable(); $scope.interval = setInterval( function(){ Geolocation.checkLocation( $scope.callback ); }, 1000); // need to use a callback because reading location takes time });`
Neven
@ayman I've read somewhere that on iOS you have to walk a few blocks for the location to work in the background. I will have to investigate this more to find out.
ayman qaidi
already added this plugin . but after amount of time location cant be found i dont know what exactly caused this . some says that if device not moving location service automatically stops
Neven
@ayman Ionic apps don't support background mode by default. You will have to add a plug-in to enable apps running in background mode. I suggest looking at this one: https://github.com/katzer/cordova-plugin-background-mode
ayman qaidi
hello there is another issue with this method . when app in background getting location is fail and not getting any new position do you have any fix for this
Nils Fuchs
hi, i cant comment under the yik yak templat... can u help me to upload the backend to heruko?
Neven
The accuracy will vary from device to device depending on the GPS module, there's not much you can do about that unfortunately. if you keep the enableHighAccuracy=true then you should get the best available results. I wouldn't reduce the timeout too much because there are many reasons why a GPS query might take longer than expected.
ayman qaidi
yeah its working perfect :) thank you . just want to ask last thing . do you think there is another way to get GPS location better and more accurate ? also if i change timeout to 1000 what will happen if his internet is bad ?
Neven
Yes if you check the new code you should see the flag is switching properly, you will just have to add your own indicator. Thnx
ayman qaidi
all i want is when GPS is on show green icon when its off show red . also detect in time and app when app is open and user turn GPS off or on show me div green or red for it . when its green and on user will start tracking and send to api to save it thats all i want thanks for your code updates and ur support
Neven
I'm guessing you're using android. The problem is that on Android you can turn off the GPS which is different from allowing the app to use GPS. When you turn off GPS it will result in a location timeout. I've updated the code to now show GPS disabled whenever it cannot read the GPS location and reduced the timeout to 3 seconds. You will now see the flag flip to false after 3 seconds of GPS being turned off. You can modify this timeout to what you prefer, and also you can see different errors being caught in showErrors function.
ayman qaidi
thanks but its not work correctly . first check says its disabled then says its enabled when i turn off gps its fine but when i turn on its still says its off please help me about that
Neven
Hey, I just uploaded the new example which shows GPS enabled. Look at the new screenshot and download the new code, thnx.
ayman qaidi
its not working to make control dynamic whe its on say tell view to show enable text when its off change text and class in view here is my code in controller $scope.$apply(function () { $scope.location_isGPSEnabled = Geolocation.isGPSEnabled(); if($scope.location_isGPSEnabled){ $scope.location_status = 'Location enabled'; $scope.location_class = true; }else{ $scope.location_status = 'Location disabled'; $scope.location_class = false; } });
Neven
I also just added GPSEnabled flag to the result array so you can have it when you request the position. Check this value first to know if GPS is enabled.
Neven
The way the geolocation api works is you have to request location first and an error of PERMISSION_DENIED will show up if the user has not allowed your app to have access to location. So every time you request location you will know if the gps is enabled.
Neven
Hey, thanks for the support. I added a function you can call to see if GPS is enabled in services.js. Try calling Geolocation.isGPSEnabled() from your controller. It will return a simple true or false. Thnx.
ayman qaidi
i just bought this awesome starter . one thing is missing if you can add . or help me to do it how to create status checking when gps location enabled or not
Hey there! You'll need to log in before you can leave a rating here.
ayman qaidi
clean and good starter . also good support from author
Kabende Kabende
Good support from Author.
{{ rating.comment }}
{{ rating.comment }}
Kabende Kabende
Good support from Author.
ayman qaidi
clean and good starter . also good support from author