How to Detect User’s Location and Generate Coordinates Using HTML5 Geolocation

There are instances when you’d like web users to provide their locations to applications that they are using. This is because of privacy reasons. For instance, you may want to seek the user’s permission to report his/her location information to an application that you’re using.

The Geolocation feature in HTML5 is an API that can help you get user’s location data, but only if with their permissions. In this blog post, we explore this HTML5 API feature. Let’s dive in.

Checking browser compatibility for HTML5 Geolocation API

Of course, the first thing that you should do even before you think of implementing this feature on your website is checking whether your current browser is compatible with Geolocation feature. Here’s the code that can help you check for compatibility:

if (navigator.geolocation) {
}
else {
alert (“The Geolocation API is not compatible with your browser. Update your browser”);
}

How can you get the current location of the user?

You’ll use the “getCurrentPosition” function of the “navigator.geolocation” object. The getCurrentPosition function accepts three arguments as its parameters. These are the Success callback, Error callback and position options. If the location data of the user has been fetched successfully, then the success callback is invoked with the obtained position object as the input parameter.

Otherwise, the error callback function is invoked with the error object as the input parameter. Here’s the code that can get the current location of user:

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {
alert (“The Geolocation API is not compatible with your browser. Update your browser”);
}

Let’s dive deeper and learn more about the three functions

#1: Success Callback function

This function will only be invoked when the web user accepts to share his/her current location information. In this case, the location information will be available as the position object where the function will be called using the position object as the input parameter. The position object will indicate the timestamp which denotes the time at which the location data was retrieved and coordinates of the object.

The coords object has the following characteristics:

●  Latitude and longitude. These are the geographical coordinates expressed in decimal degrees.
●  Accuracy. It specifies the accuracy levels of the latitude and longitude coordinates in meters.
●  Altitude. It’s the height of the current user’s position above the sea level expressed in meters.
●  AltitudeAccuracy. It specifies the how far off the altitude position could be from the actual attitude value
●  Heading. It indicates the 360-degree heading information.
●  Speed. It provides the relative speed of the web user in meters per second.

#2: Error callback function

The Error callback function is an optional callback function which takes the Position Error object as its input argument. It is invoked under the following conditions:

●  When an unknown error has occurred
●  When the request has timed out
●  When the user has denied sharing his/her current location information.
●  The location information isn’t available.

#3: Position Options

It indicates the options that are available for use while retrieving the web user’s location. These options are:

●  EnableHighAccuracy. It’s a Boolean. If its value is true, then user agent will try to provide the most accurate     position. Otherwise, if its value is false, then a less accurate position is obtained.
●  Timeout. It indicates the maximum time which a user agent can take to respond to the location data request.
●  MaximumAge. It specifies how long the user can keep using the cached location data before getting the new location information.