HTML5 - Geolocation
What is HTML5 Geolocation API
The HTML5 Geolocation API allows you to give out or share your current location with web sites that have it enabled. A javascript method can get your latitude and longitude and then send it to the backend server and also tailor your experience according to your location like finding local businesses or show your current location on a map.
Currently, most web browsers and mobile devices have support for the Geolocation API. The geolocation APIs collaborate with a new property of the global navigator object i.e. Geolocation object can be initiated like below:
var geolocation = navigator.geolocation;
A geolocation object is a service javascript object that lets widgets grab information about the geographic location of a device.
Geolocation Methods
The geolocation object provides the following methods:
The geolocation javascript object offers the following in-built methods:
| Sr.No. | Method & Description |
|---|---|
| 1 |
getCurrentPosition() This geolocation API method gets the current geographic location of the user. |
| 2 | watchPosition()
This geolocation API method gets updates about the current geographic location of the device according to a particular period of time |
| 3 | clearWatch() This method cancels an ongoing watchPosition call. This geolocation API method cancels a watchPosition method call that is currently ongoing. |
Example
The code below is an example of how to use any of the above methods:
function getLocation() { var geolocation = navigator.geolocation; geolocation.getCurrentPosition(showLocation, errorHandler); }
In the code above, the showLocation and errorHandler are callback methods that would be used to grab the actual position of the user and also to handle any errors if they occur.
Location Properties
The Geolocation API methods getCurrentPosition() and getPositionUsingMethodName() describe the callback method that would grab information about the location of the user. These particular methods are written asynchronously with a Javascript object Position that handles storing the complete information about the location of the user.
The Position Javascript object handles the specification of the current geographic location of the user device. The location is specified as a set of geographic coordinates alongside information about heading and speed.
The table below specifies the properties available for the Position object. For optional properties, if the system cannot return a value, the value of that particular property is set to null.
| Property | Type | Description of |
|---|---|---|
| coords | objects | This handles specifying the geographic location of the device. |
| coords.latitude | Number | This handles specifying the latitude estimate in decimal degrees. The value range is [-90.00, +90.00]. |
| coords.longitude | Number | This handles specifying the longitude estimate in decimal degrees. The value range is [-180.00, +180.00]. |
| coords.altitude | Number | [Optional] This handles specifying the altitude estimate in meters above the WGS 84 ellipsoid. |
| coords.accuracy | Number | [Optional] This handles specifying the accuracy of the latitude and longitude estimates in meters. |
| coords.altitudeAccuracy | Number | [Optional] This handles specifying the accuracy of the altitude estimate in meters. |
| coords.speed | Number | [Optional] This handles specifying the device's current ground speed in meters per second. |
| timestamp | date | This handles specifying the time when the location information was retrieved and the Position object created. |
Example
The code below shows how to make use of the Position object. Here, the showLocation method is actually a callback method:
function showLocation( position ) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; ... }
Handling Errors
Geolocation is actually really complicated and it is required to catch any error that occurs and also handle it gracefully.
The geolocation methods getCurrentPosition() and watchPosition() uses a error handler callback method which generates the PositionError object. This object has only two properties, namely:
| Property | Type | Description |
|---|---|---|
| code | Number | It contains a numeric code for the error. |
| message | String | It contains a human-readable description of the error. |
The table below describes the error codes that might be returned in the PositionError object.
| Code | Constant | Description |
|---|---|---|
| 0 | UNKNOWN_ERROR | The method failed to retrieve the location of the device due to an unknown error. |
| 1 | PERMISSION_DENIED | The method failed to retrieve the location of the device because the application does not have permission to use the Location Service. |
| 2 | POSITION_UNAVAILABLE | The location of the device could not be determined. |
| 3 | TIMEOUT | The method was unable to retrieve the location information within the specified maximum timeout interval. |
Example
The code below shows how to make use of the PositionErro object. Here, the errorHandler method is actually a callback method:
function errorHandler( err ) { if (err.code == 1) { // access is denied } ... }
Position Options
The code below is the actual syntax for using the getCurrentPosition() method:
getCurrentPosition(callback, ErrorCallback, options)
Here the third parameter is the PositionOptions javascript object that contains a set of options for grabbing the geographic location of the user's device.
The options below can be specified as the third parameter:
| Property | Type | Description |
|---|---|---|
| enableHighAccuracy | Boolean | This particular option specifies whether the widget wants to accept the most accurate location estimate possible. The value of this option is false by default. |
| timeout | Number | This property is the number of milliseconds your web application is willing to wait for a position. |
| maximumAge | Number | This particular option specifies the expiry time in milliseconds for cached location information. |
Example
The code below is a sample code which shows how to use the methods mentioned above:
function getLocation() { var geolocation = navigator.geolocation; geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
