HTML5: Geolocation from the ground up

The word Geolocation is the combination of two words Geo (Geographic) and Location. Yes, that means, Geolocation is the way of getting geographic location of the object. It uses the positioning system logic, for getting the location. The HTML Geolocation is secured and that’s the reason, it won’t show the position till user approves for it.

Hmmm… the word Geolocation sounds interesting … right? 🙂 So, why to wait? Lets check deeper part of Geolocation API.

Geolocation has never been part of HTML5 specification, previously called Web Application Specification. It is created by W3C not the WHATWG. We can use geolocation in multiple ways, like –

  • Social networking services for ex-Facebook is using Geolocation extensively, for getting current places, that allow users to share their location to others.
  • It helps user to guide for the direction, they want.
  • Anyone can share their location with others.
  • Users can be aware of what is around them depending upon their interests.

But, let’s think practically, how it is possible to get current location of any person, without using anything ❓ …

Hmmm… :idea:, we just now came across one word “Sharing”, means user need to share his/her location using some API and it might sound like a privacy concern. But, the specification clearly specify that the user have to first allow the user agent so it can share the location with the server.

According to GeoLocation API Specification, “User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below. The user interface must include the URI of the document origin.”

When requesting for authorization, the browsers may show alert message to the user. Let’s check how it works with some browsers.

Firefox :-
Screen Shot 2014-11-03 at 6.08.19 pm

Chrome :-
Screen Shot 2014-11-03 at 6.06.38 pm

Safari :-
Screen Shot 2014-11-03 at 6.09.30 pm

Once a user allows the user agent to share the user location with the server, there are still some privacy concerns:

  • What would be the duration of saving location data
  • Will it be shared to other sites or other users
  • What would be the result, if the location data can be deleted/updated by end user

That’s why, according to Geolocation API Specification, “Recipients must clearly and conspicuously disclose the fact that they are collecting location data, the purpose for the collection, how long the data is retained, how the data is secured, how the data is shared if it is shared, how users may access, update and delete the data, and any other choices that users have with respect to the data.”.

According to Geolocation API Specification, “Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input”.

The geolocation API is located in the Geolocation object. There are some methods which are available with Geolocation API, among those, 2 methods (getCurrentPosition() and watchPosition()) are used to get the location of the user.

Let’s check one example with using the above two methods.

<!DOCTYPE html>
        <title>Geolocation API Test</title>
    <body onload="getLocation()">
            function getLocation() {
                if (navigator.geolocation) {
                } else { 
                    alert("Geolocation is not supported by this browser.");

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

getCurrentPosition() :-
It gets the user location only once. It takes 3 parameters i.e. showLocation, ErrorHandler, options.
showLocation => It is the callback method which retrieves the current location of the user. It always called asynchronously and method returns Position as an object. There are few properties present for that Position object.

  • coords.latitude => To get the latitude of the location
  • coords.longitude => To get the longitude of the location
  • coords.accuracy => To get the accuracy of the position returned
  • coords.altitude => To get the altitude of the position above sea level[optional]
  • coords.altitudeAccuracy => To get the accuracy of the altitude position[optional]
  • coords.heading => To get the device current location as per degree, clockwise from North[optional]
  • coords.speed => To get the speed in meter per second[optional]
  • timestamp => To get the timestamp for the response[optional]

ErrorHandler => This is an optional parameter. It invoked when any error occurs while calling PositionError object.
options => This is also an optional parameter. This can contain many options for getting location information like use of the locations which is already in cache, check for the accuracy of the location info, get the timeout info while getting location info.

watchPosition() :-
It regular checks the user location and check if the user location has changed. It also takes 3 parameters i.e. showLocation, ErrorHandler, options, which description we already went through.

This method returns an unique id, which can be used to cancel getting the regular location updates.

clearWatch() :-
There are one more method available clearWatch(), which cancels/stops watching position of the user. It takes one parameter i.e. watchId.
watchId => It is an unique ID of the watchPosition call to cancel the current call.

So, what do you think!! It is nice to use … right? 🙂 Hmmm… yes, using Geolocation API, we can get the geographic location of the user, using which, we can do a lot stuff :).

Note :- Please check here for Browser support details.

Thanks 🙂 and will be happy to listen from you 🙂 :).


2 thoughts on “HTML5: Geolocation from the ground up

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s