Geolocation in HTML5

What is Geolocation?

Geolocation is a technology to retrieve current geographical location of a user.

Why Geolocation Used?

So consider an example that you are visiting a city for the first time and looking for sight-seeing locations close to your hotel. However, you do not know where to go and which places to look for. Therefore, it will be helpful if you have some application that can help you locate such places and provide feedback for the same. In that case you as a user will have to allow the application to detect your location and provide you that feedback. An application like map can also use Geolocation to give you direction to a target location.

How to use Geolocation?

The HTML5 Geolocation API uses certain features, such as Global Positioning System (GPS), Internet Protocol (IP) address of a device, nearest mobile phone towers, and input from the user, in the users’ device to retrieve the users’ location. The users’ location retrieved by using the Geolocation API is almost accurate depending upon the type of source used to retrieve the location. The Geolocation API provides the following methods:

1. getCurrentPosition(successCallback, errorCallback, options)

Used to retrieve the current geographical location of a user. successCallback – as the name suggests is a callback function when the geolocation is successful at locating the current position of a user. It takes position object as an argument. This position object specifies the current geographic location of a user as a set of geographic coordinates. Here is the list of properties available

• coords.latitude
• coords.longitude
• coords.accuracy
• coords.altitude
• coords.altitudeAccuracy
• coords.heading
• coords.speed
• timestamp

errorHandler – is a callback function to handle errors that may occur while retrieving the location of a user. The third parameter, options specifies a set of options, such as timeout for retrieving the location information. Both of these are optional parameters.

2. watchPosition(successCallback, errorCallback, options)

The function returns a watchId and calls successCallback with the updated coordinates. It continues to return updated position as the user moves (like the GPS in a car).

3. clearWatch(watchId)

Stops the watchPosition() method based on the watchId provided.

Before retrieving the users’ location by invoking getCurrentPosition() we can also check whether the browser supports the geolocation feature.

Listing 1: Consider the following code snippet to check whether the browser supports the geolocation feature:

if (navigator.geolocation) {
alert("Your browser supports geolocation.");
} else {
alert("Your browser does not support geolocation.");
}

Listing 2: Consider the following code snippet for retrieving the users’ location by using the getCurrentPosition() method:

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(userPositionSuccess, userPositionError);
} else {
alert("Your browser does not support geolocation.");
}

function userPositionSuccess(position) {
alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
}

function userPositionError() {
alert("There was an error retrieving your location!");
}

Handling Errors

At times, the user may not provide the permission to access his location. Or the error may also occur when a user checks the current location on a mobile device and the device goes out of coverage area or the network connection is timed out. We can handle different types of errors by using some pre-defined error codes.

• PERMISSION_DENIED
• POSITION_UNAVAILABLE
• TIMEOUT
• UNKNOWN_ERROR

Listing 3: So we can now can improvise on our errorHandler callback function to give more appropriate message:

function userPositionError(errorObject) {
switch(errorObject.code) {
case errorObject.PERMISSION_DENIED: alert("User denied the request for tracking the location"); break;
case errorObject.POSITION_UNAVAILABLE: alert("User's location is not available"); break;
case errorObject.TIMEOUT: alert("The request to retrieve user's location is timed out"); break;
case errorObject.UNKNOWN_ERROR: alert("An unknown error occurred"); break;
}
}

Ok! That should be good enough to make use of Geolocation in an application now.

P.S. Just don’t use javascript alert in your real app, that was just to demo the function.

This article is originally published at BLOG BY MANISH CHHABRA, re-posted here with authors permission and as part of the JBC program.