terra-karina trying out web things

Geolocation 29 February 2016

To test this feature you have to allow your browser to use your location data.

This is a little test of what is possible using the Geolocation API[1] - it is rather very basic.
To visualize the results, Google's Maps API[2] is used.
For a quick introduction to the Geolocation API and further links see the article “Using geolocation”[3] on Mozilla Developer Network.

Introductory Notes

The API is accessible via the navigator.geolocation object.
You can check if a user's browser supports the API like so:

if (navigator.geolocation) {
        // Do your magic here...
        }

When you use the object's getCurrentPosition() method, the values it returns may not be very accurate. The accuracy depends on various factors. One is the information your browser uses to get the location data. This information is sent to a location service, which then returns the data it has calculated.

For instance when I check my location in Mozilla Firefox and Google Chrome on the same notebook, I get different results. At my current position (and the time of writing), in Firefox the accuracy level is 199 001 meters, in Chrome it's 36 meters - that's a rather big difference.
For detailed information about accuracy, see the spec or the article “HTML5 Geolocation API - how accurate is it, really?”[4]

getCurrentPosition() - And your current position in numbers

First let's look at the plain data that can be retrieved from the API.
Note that not all data is available on all devices (e.g. “altitude” on desktop devices).

With getCurrentPosition() you can - surprise! surprise! - retrieve a user's current position. The method can have 3 parameters: callback method in case of success, callback method in case of failure and an object where you can define some options.

navigator.geolocation.getCurrentPosition(
        successCallback,
        errorCallback,
        options
        );

The success callback function is provided with a position parameter. It's attributes are the Coordinates object and a timestamp.

Example usage:

function logPosition(position) {
        // The Coordinates object:
        console.log(position.coords);
        // Attributes of the Coordinates object:
        console.log(position.coords.latitiude);
        console.log(position.coords.longitude);
        console.log(position.coords.altitude);
        }

Coordinates's attribute values for your current position are:

Quotes from the spec:

The accuracy attribute denotes the accuracy level of the latitude and longitude coordinates. It is specified in meters [...]

The altitude attribute denotes the height of the position, specified in meters above the [WGS84] ellipsoid.

The heading attribute denotes the direction of travel of the hosting device and is specified in degrees, where 0° ≤ heading < 360°, counting clockwise relative to the true north.

The speed attribute [...] is specified in meters per second.

The only parameter in the error callback function is the PositionError object. It contains the attributes code and message. Unlike what I expected, the message attribute is not intended to be presented to the user, but for debugging purposes.

In the PositionOptions object you can define the following:

Your current position in a map

The data retrieved by the getCurrentPosition() method can be used to mark your location in, for instance, a Google Map.
Tutorials for that are widespread around the internet, so I won't describe details here.

Show me in the map

Your distance to Fiji Islands

And of course you can use it to calculate your distance to other places, if you know their coordinates.
(I used Gourav Singh's code for the calculation[5].)

For instance the coordinates of Fiji Islands is -18.137499745333116 latitude and 177.989501953125 longitude.
So you are away from Fiji.

Show Fiji & me

Tracking your movement

Your position data can change: either because your device is moving or because the accuracy of the geo information increases. The watchPosition() is used to define a callback for that.

It returns an ID, which is used in the clearWatch() method.

So, to start watching a position, call:

// Parameters in the callback functions and the options object are the same as for getCurrentPosition().
        var watcherId = navigator.geolocation.watchPosition(
        successCallback,
        errorCallback,
        options
        );

To stop it, use:

navigator.geolocation.clearWatch(watcherId);

You can test this feature if you click the "Start watching me" button.
And because watching one's position drains one's battery, you can stop it by clicking the "Stop it" button.

Start watching me Stop it

First, just watch the raw data changing:

And now follow yourself in a map:

(Updating the map as described in Mike Dalisay's article[6].)