Monday, July 16, 2018

A Thought on HTML5 Geolocation

by Adam Willss (writer), , November 18, 2013

Credit: InstantShift
A Thought on HTML5 Geolocation

If you want to recognize user’s location, the Geolocation API of HTML5 helps to provide location based information or route navigation details of the user.

Different techniques are available for identifying the user’s location. Generally, WIFI or IP based positioning techniques are used by a desktop browser while GPS, A-GPS, WIFI based positioning techniques are used by mobile browsers.

For identifying the user’s exact location, the Geolocation API will use only one of above mentioned techniques. The user’s privacy is protected by the Geolocation API by authorizing that the user permission should be wanted and got before sending the location information of the user to any other website. So, it is recommended to users to prompt by popping over or dialoging requirements for the user’s permission to share location details. It is totally up to user to deny or accept the request.

Firstly, let’s understand the API and plot of the exact location in the Google Maps. In the first step, you have to check compatibility with the browser using any of the APIs in HTML5.

Checking Browser Compatibility

With the help of geolocation property of the global navigator object, one can easily detect the browser sipper for Geolocation API.

1 if (navigator.geolocation) {
2 // Get the user's current position
3 } else {
4 alert('Geolocation is not supported in your browser');
5 }

Get the User’s Current Location

Get the user’s current location with the getCurrentPosition function of the navigator.geolocation object. Three parameters are accepted by this function, i.e. position options, Success callback function and Error callback function.

The success callback function will be raised with the obtained position object as its input parameter, if location data is brought successfully. Otherwise, it will be raised with the error object as its input parameter.

1 if (navigator.geolocation) {
3 // Get the user's current position
4 navigator.geolocation.getCurrentPosition(showPosition, showError, optn);
5 } else {
6 alert('Geolocation is not supported in your browser');
7 }

Success Callback Function

One can only see the raise of callback function when users allow sharing the location details and browser successfully fetches the location data. One can get location details as a position object and the function will be called the position object as its input parameter.

A timestamp property is included in a position object that indicates the time of the location data is retrieved and a coords object. One can find the following properties in cords object such as:

  • Altitude: it indicates the height of the position above the sea level in meters
  • Heading – it gives 360 degree heading information
  • Speed – it denotes relative speed in meters per second
  • Latitude, longitude – it gives details of geographic coordinates in decimal degrees
  • Accuracy- it provides information about Accuracy level of the latitude and longitude in meters. Smaller the number higher is the accuracy.
  • AltitudeAccuracy- it simply provides information of the distance of the altitude position from the actual attitude value obtained in meters. Smaller the number higher is the accuracy.
1 function showPosition(position) {
2 document.write('Latitude: '+position.coords.latitude+'Longitude: '+position.coords.longitude);
3 }

Error Callback Function

This article is originally published at and written by Adam Wills, a html5 developer with Perception System.

About the Writer

Adam Willss is a writer for BrooWaha. For more information, visit the writer's website.
Want to write articles too? Sign up & become a writer!

1 comments on A Thought on HTML5 Geolocation

Log In To Vote   Score: 1
By Credo on November 19, 2013 at 01:44 am

Location software is the state of the art programing technology today, the draw back is that privacy is greatly marginalized, and personal vulnerability is heightened. No one is safe from intruders or from the prying eyes of big brother.

intense and informative ....


 Report abuse

Add A Comment!

Click here to signup or login.

Rate This Article

Your vote matters to us