Ajax Loader
×

Watching and Tracking Positions with Geolocation API

This is a neat codecast that covers the Geolocation API using which you can locate a user's location if the browser on his device supports the API! It can be useful to provide some route navigation information to users.

In this lesson/tutorial we're going to cover how to get the current user position and then continue to track it.

We're also going to calculate the distance covered by the user.

If you would like to understand what each of the properties in the coords object of the Geolocation object is for, then here's what the specs say which is pretty much self-explanatory:

  • The latitude and longitude attributes are geographic coordinates specified in decimal degrees.

  • The altitude attribute denotes the height of the position, specified in meters above the [WGS84] ellipsoid. If the implementation cannot provide altitude information, the value of this attribute must be null.

  • The accuracy attribute denotes the accuracy level of the latitude and longitude coordinates. It is specified in meters and must be supported by all implementations.

  • The altitudeAccuracy attribute is specified in meters. If the implementation cannot provide altitude information, the value of this attribute must be null.

The accuracy and altitudeAccuracy values returned by an implementation should correspond to a 95% confidence level.

  • The heading attribute denotes the direction of travel of the hosting device and is specified in degrees counting clockwise relative to the true north. If the implementation cannot provide heading information, the value of this attribute must be null.

  • The speed attribute denotes the current ground speed of the hosting device and is specified in meters per second. If the implementation cannot provide speed information, the value of this attribute must be null.

Note: The attributes/properties are readonly.

I missed an important argument (third one) that you can pass to watchPosition(), in this lesson. The argument is optional object that can have three properties:

enableHighAccuracy – Boolean indication that you want to get as accurate data as possible. Although it depends upon the hardware of the device whether this property is going to make a difference or not. maximumAge – The device may cache reading to save power/bandwidth. So use this to set the maximum age (in milliseconds) of the reading. timeout – The maximum time (in milliseconds) for which you want to allow the device to try and fetch the geolocation data.

Related:


    Warning: Invalid argument supplied for foreach() in /var/www/cssdeck/app/modules/labs/views/_details.php on line 68
×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Watching and Tracking Positions with Geolocation API

    CSSDeck G+