HTML5 Geolocation HTML 5

What is the use of Geolocation in HTML5?

Geolocation in HTML5 allows in sharing the location with web sites. JavaScript can capture the latitude and longitude and send to backend web server such as finding local businesses or showing location on a map.

Geolocation API is supported by most of the browsers and mobile devices and it also works with a new property of the global navigator object ie. Geolocation object which can be created as shown below:

var geolocation = navigator.geolocation;

Geolocation object is a service object and allows widgets in retrieving information about the geographic location of the device.

Geolocation Methods

Method

Description

getCurrentPosition()

getCurrentPosition() method retrieves current geographic location of the user.

watchPosition()

watchPosition() method retrieves periodic updates about the current geographic location of the device.

clearWatch()

clearWatch() method cancels an ongoing watchPosition call.

Example

Below is a sample code to use any of the above method

Here showLocation and errorHandler are callback methods which are used to get actual position.

Location Properties

Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method which retrieves the location information. Object Position calls these two methods asynchronously to store complete information of the location.

Position object is used to specify current geographic location of the device where location is expressed as a set of geographic coordinates along with information about heading and speed.

Below table describes the properties of Position object. For the optional properties value of the property is set to null, if the system cannot provide a value.

Property

Type

Description

Cords

objects

Specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.

coords.latitude

Number

Specifies the latitude estimate in decimal degrees. The value range is [-90.00, +90.00].

coords.longitude

Number

Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].

coords.altitude

Number

[Optional] Specifies the altitude estimate in meters above the WGS 84 ellipsoid.

coords.accuracy

Number

[Optional] Specifies the accuracy of the latitude and longitude estimates in meters.

coords.altitudeAccuracy

Number

[Optional] Specifies the accuracy of the altitude estimate in meters.

coords.heading

Number

[Optional] Specifies the device's current direction of movement in degrees counting clockwise relative to true north.

coords.speed

Number

[Optional] Specifies the device's current ground speed in meters per second.

timestamp

date

Specifies time when the location information was retrieved and the Position object created.

Example

Below is a sample code which makes use of the Position object. Here showLocation method acts a callback method

Handling Errors

Geolocation is complicated but is very much needed to catch any error and handle them.

Geolocations methods getCurrentPosition() and watchPosition() make use of an error handler callback method which gives PositionError object and this object has two properties

Property

Type

Description

Code

Number

Contains a numeric code for the error.

Message

String

Contains a human-readable description of the error.

Below table describes the possible error codes returned in the PositionError object.

Code Constant Description

0 UNKNOWN_ERROR UNKNOWN_ERROR method failed to retrieve the location of the device due to an unknown error.

1 PERMISSION_DENIED PERMISSION_DENIED failed to retrieve the location of the device because the application does not have permission to use the Location Service.

2 POSITION_UNAVAILABLE POSITION_UNAVAILABLE location of the device could not be determined.

3 TIMEOUT TIMEOUT method was unable to retrieve the location information within the specified maximum timeout interval.

Example

Below is a sample code which makes use of PositionError object. Here errorHandler method acts a callback method

Position Options

Below is the actual syntax of getCurrentPosition() method

getCurrentPosition(callback, ErrorCallback, options)

Here third argument is the PositionOptions object is used to specify a set of options to retrieve the geographic location of the device.

Below are the options which can be specified as third argument

Property

Type

Description

enableHighAccuracy

Boolean

Specifies whether the widget wants to receive most accurate location estimate possible and by default this is false.

Timeout

Number

The timeout property is the number of milliseconds the web application can wait for a position.

maximumAge

Number

Specifies the expiry time in milliseconds for cached location information.

Example

Below is a sample code that shows how to use above mentioned methods

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics