How to get reliable geolocation data on Phonegap or Cordova CLI (Best practice / Tutorial / GPS)



Today I will tell you how to get reliable geolocation data on Cordova or Phonegap. It took me a lot of time to figure all this out, so I hope that I can save you some precious time with my article.

Note: I tested on Cordova 3.4.x and Android/WindowsPhone.

Before we start, make sure that you have not installed the Cordova or Phonegap geolocation plugin! In case you already have, remove it with the following command "cordova plugin remove org.apache.cordova.geolocation". We do not need this plugin since the native HTML5 support is much better! Further information can be found here. I don't know why this plugin is still available in the official documentation... But don't worry if you come from Cordova or Phonegap, you don't have to change a lot in your existing code (maybe you have to eliminate the frequency attribute).

Please pay attention that, also when you are not using the geolocation plugin, you have to set the following privileges in your:

AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
WPAppManifest.xml

<Capabilities>
               <Capability Name="ID_CAP_LOCATION" />
</Capabilities>
The code for the implementation itself is relative trivial. I would suggest you to implement it after the following action plan:

  • Before you do anything, check if geolocation is available (navigator.geolocation)
  • Try to get the current position with high accuracy, if the request timed out or an error occur > fallback to lower accuracy.
Important parameter:
  • enableHighAccuracy: true/false for high or low accuracy
  • maximumAge: Accept a cached position whose age is no greater than the specified time in milliseconds. (Number)
  • timeout: Maximum time of lenght in ms to get the position.
  • frequency: Stop using this attribute. It is not W3C compliant. Use maximumAge instead!
Suggested values:
  • enableHighAccuracy: true, maximumAge:3000, timeout: 5000
  • enableHighAccuracy: false, maximumAge:3000, timeout: 30000

Tips:
  • If you want to update your geolocation data continuously, use watchPosition(...) instead of getCurrentPosition(...). Also use the pause/resume functions of Cordova/Phonegap to start/stop the watch while the application is or return from background. The users battery will thank you.
  • Keep in mind that the logic behind getCurrentPosition(...) and watchPosition(...) is differently on different devices. So test your implementation as much as you can!


Please let me know if this article helped you to improve your geolocation results. If you tested successfully with iOS drop a comment (ideal with required privileges) as well. Thanks!

8 comments:

  1. I have done all this thing to get my current geolocation, using ionic but still getting timeout error.

    ReplyDelete
  2. Worked like a charm! I am using phonegap build, and it's working marvelously, thank you so much for posting this online!

    ReplyDelete
  3. Hi. This is a helpful post, thanks.

    I am using PhoneGap build and wondering how I go about ensuring the following lines are added to my AndroidManifest.xml when using PhoneGap build?





    I think I need to add it as a "feature" within my config.xml but I am not sure what values to use. All I can find on the PhoneGap documentation re features is this:


    param name="" value=""
    param name="" value=""


    But I am not sure what values to use in the above, or if it is right at all.

    Thanks!

    ReplyDelete
  4. I think the html5 geolocation api is unreliable and buggy. I have a previously working configuration similar as described here, but it hits the timeout without a usable location. It doesn't matter if I specify low accuracy, Infinite maximumAge, etc. I understand why cordova switched to the native geolocation html5 api, but hasn't worked out for me.

    ReplyDelete
  5. I just switched back to an old cordova geolocation plugin, one that still uses the native android gps drivers. This works SO MUCH better. Some tips for pre cordova 4, but it should not be too hard to adapt for 4.0.
    http://stackoverflow.com/questions/23383750/phonegap-geolocation-sometimes-not-working-on-android

    ReplyDelete
  6. I don't understand how to use the timeout to switch to low accuracy. Could you elaborate?

    ReplyDelete
  7. I manage to get current location using SENCHA TOUCH it works fine only when the GPS Location is enabled on device. So how do i do auto detect for GPS Location for prompt/ask user for permission to access the location

    ReplyDelete
  8. Thank you, thank you, and thank you.

    ReplyDelete