Hello, world!

HTML 5 Geolocation HTML

In the HTML tutorial you will know the geolocation potentials of HTML5. You will be also taught about the geolocation methods, position options, location properties and error handling.



HTML5 - Geolocation

The HTML5 geolocation API allows you to share your location with trusted web sites.
Your latitude and longitude can be acquired by JavaScript on the webpage, and can be transmitted to the remote web server and create fancy location-aware things such as searching local businesses or displaying your location on a map.
Nowadays geolocation API is supported by most browsers on pc’s and mobile gadgets.
In addition, the geolocation APIs operate with a new property on the global navigator object such as Geolocation object. This can be built as: var geolocation = navigator.geolocation;
The geolocation object is a service object that permits widgets to fetch data regarding the geographic location of the device.

Geolocation Methods

These are the methods available in geolocation object:
getCurrentPosition() - This method recovers the existing geographic location of the user.
watchPosition() - This method recovers regular updates about the existing geographic location of the device.
clearWatch() - This method terminates a current watchPosition call.

This is an example of code to apply any of the previously mentioned method:
HTML code example geolocation methods:
function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}
 
To capture certain position and handle errors if any, we applied callback methods like showLocation and errorHandler in the example above.

Location Properties

You can identify the callback method that recovers the data about the location through Geolocation methods, the getCurrentPosition() and getPositionUsingMethodName().
These methods are invoked asynchronously with an object Position which saves the comprehensive data about the location.
Through Position object you can identify the existing geographic location of the device.
The location is represented as a set of geographic coordinates together with data concerning the heading and speed.
 
These are the properties of the Position object. Regarding optional properties, the value of the property is set to null once the system failed to present a value.
cords (type: objects ) - This property identifies the geographic location of the device. The location is represented as a set of geographic coordinates together with data regarding the heading and speed.
coords.latitude (type: number) - This property identifies the latitude estimate in decimal degrees. Possible values are [-90.00, +90.00].
coords.longitude (type: number) - This property identifies the longitude estimate in decimal degrees. Possible values are [-180.00, +180.00].
coords.altitude (type: number) - This is property is optional which identifies the altitude measure in meters above the WGS 84 ellipsoid.
coords.accuracy (type: number) - This is property is optional which identifies the accuracy of the latitude and longitude measures in meters.
coords.altitudeAccuracy (type: number) - This is property is optional which identifies the accuracy of the altitude measure in meters.
coords.heading (type: number) - This is property is optional which identifies the device's present direction of movement in degrees calculating clockwise relative to true north.
coords.speed (type: number) - This is property is optional which identifies the device's present ground speed in meters per second.
timestamp (type: date) - This property identifies the time after the data about the location was recovered and the Position object created.


This is an example of code which makes use of Position object. The callback method applied here is the showLocation method:

HTML code example location properties:

function showLocation( position ) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  ...
}

Position Options

getCurrentPosition() method syntax:
getCurrentPosition(callback, ErrorCallback, options)
The third argument is the PositionOptions object which indicates a set of options for fetching the geographic location of the device.

These are the options which can be identified as third argument:
enableHighAccuracy (type: Boolean) - Identifies whether the widget needs to receive the most precise location estimate possible. This is set to false by default.
timeout (type: number) - Identifies that the timeout property is the amount of milliseconds your web application is ready to wait for a position.
maximumAge (type: number) - Identifies the expiry time in milliseconds for cached data about the location.
 
This is an example of code which explains how to use the methods mentioned above:

HTML code example position options:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler,
                                 {maximumAge: 75000});
}

Error Handling

Geolocation is complex, and you need to take any error and handle it smoothly.
You can make use of an error handler callback method which provides PositionError object through geolocations methods getCurrentPosition() and watchPosition().

PositionError object has two properties:
code (type: number) - This property consists of a numeric code for the error.
message (type: string) - This property consists of a human-readable description of the error.

These are the possible error codes returned in the PositionError object.
0 (UNKNOWN_ERROR) - Denotes that the method failed to fetch the location of the device due to an unidentified error.
1 (PERMISSION_DENIED) - Denotes that the method failed to fetch the location of the device for the reason that the application does not have authorization to use the Location Service.
2 (POSITION_UNAVAILABLE) - Denotes that the location of the device could not be identified.
3 (TIMEOUT) - Denotes that the method was not able to fetch the data about the location inside the particular maximum timeout interval.

This is an example of code which makes use of PositionError object. The callback method applied here is errorHandler method:

HTML code example error handling:

function errorHandler( err ) {
  if (err.code == 1) {
    // access is denied
  }
  ...
}