HTML5 – Geolocation
| Introduction To Geolocation |
Geolocation API is used to locate a user’s position in HTML5.
Script can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.
All Latest Browsers and mobile devices almost support Geolocation API.
The geolocation APIs work with a new property of the global navigator object ie. Geolocation object which can be created as below
var varGeolocation = navigator.geolocation;
The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.
Geolocation Methods in HTML5
The geolocation object provides the following method
getCurrentPosition() : This method retrieves the current geographic location of the user.
watchPosition() : This method retrieves periodic updates about the current geographic location of the device.
clearWatch() : This method cancels an ongoing watchPosition call.
Location Properties in HTML5
Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method that retrieves the location information. These methods are called asynchronously with an object Position which stores the complete location information.
| The Position Object |
The Position object specifies the current geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.
Here is the description of the properties of the Position object. For the optional properties if the system cannot provide a value, the value of the property is set to null.
coords (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.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 the time when the location information was retrieved and the Position object created.
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.
Example
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getMyLocation()">Fetch Location</button>
<p id="pid"></p>
<script>
var x = document.getElementById("pid");
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMyPosition);
} else {
x.innerHTML = "HTML 5 Geolocation is not supported by this browser.";
}
}
function showMyPosition(position) {
x.innerHTML = "Your Latitude: " + position.coords.latitude +
"<br>Your Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
| The Position Options Object |
Position Options
Syntax of getCurrentPosition() method :
getCurrentPosition(callback, ErrorCallback, options)
Here third argument is the PositionOptions object which specifies a set of options for retrieving the geographic location of the device.
Here is the list of options which can be specified as third argument:
- enableHighAccuracy (Boolean) : Specifies whether the widget wants to receive the most accurate location estimate possible. By default this is false.
- timeout (Number) : The timeout property is the number of milliseconds your web application is willing to wait for a position.
- maximumAge (Number) : Specifies the expiry time in milliseconds for cached location information.
Here is a sample code which shows how to use above methods :
function getLocation() {
var geolocation = navigator.geolocation;
geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 60000});
}
| Handling Errors |
Handling Errors in Geolocation HTML5
It is complicated, and it is very much required to catch any error and handle it gracefully.
The geolocations methods getCurrentPosition() and watchPosition() make use of an error handler callback method which gives PositionError object. This object has following two properties −
code (Number) : Contains a numeric code for the error.
message (String) : Contains a description of the error.
Here is the possible error codes returned in the PositionError object.
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.
Here is a sample code which makes use of PositionError object. Actually errorHandler method is a callback method:
function errorHandler( err ) {
if (err.code == 1) {
// TODO
}
...
}
Recent Comments