Click here to Skip to main content
15,891,905 members
Articles / Web Development / HTML5

HTML5: Geolocation from the Ground

Rate me:
Please Sign up or sign in to vote.
4.88/5 (4 votes)
16 Nov 2014CPOL4 min read 8.3K   13  
HTML5: Geolocation from the ground

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 wait? Let's check the 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 example, Facebook is using Geolocation extensively, for getting current places, that allow users to share their location to others.
  • It helps user to guide for 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 needs to share his/her location using some API and it might sound like a privacy concern. But, the specification clearly specifies that the user has 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:

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

            function showPosition(position) {
                alert("Latitude: " + position.coords.latitude + 
				" - Longitude: " + position.coords.longitude);	
            }
        </script>
    </body>
</html>

getCurrentPosition()

It gets the user location only once. It takes three 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 is 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 a unique id, which can be used to cancel getting the regular location updates.

clearWatch()

There is 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 of stuff :).

Note: Please check here for Browser support details.

Thanks and I will be happy to hear from you :).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Software engineer with around 6 years of web application development experience in open source technologies like PHP, MySQL, HTML, HTML5, CSS, CSS3, Javascript, jQuery etc.

I love to learn and share my knowledge in which manner I can and like to solve the issues as in the coding perspective. I am an active contributor in community forums like StackOverflow, CodeProject etc. Besides that, I write blogs in free time and speak in various technical community events.

Comments and Discussions

 
-- There are no messages in this forum --