Geolocation

Geolocation

Earlier detecting location of a client device the client’s IP address was used and a guess as to the where that device was located. However, HTML5 has a set of APIs to allow the client devices like iPhone 3G+, Android 2.0+ phones, or desktop browsers, to retrieve geographic positioning information with JavaScript.

Browser geolocation – The web browsers support for geolocation is increasingly at a steady pace. Google Maps uses geolocation substantially. The geolocation support is available in following browsers

  • Firefox 3.5+
  • Chrome 5
  • iPhone Safari
  • Opera 10.5

The user of the device must agree to share his location information with geolocation application. The geolocation application’s actions are asynchronous, else everything inside the browser would freeze until the user responds.

Geolocation data – The geolocation API receives the coords and timestamp fields where, the timestamp field denotes the time of geolocation data creation and the coords attribute contains a set of geographic coordinates together with their associated accuracy, as well as a set of other optional attributes such as altitude and speed. The geolocation data description is

  • The latitude and longitude attributes are geographic coordinates specified in decimal degrees.
  • The accuracy attribute denotes the accuracy level of the latitude and longitude coordinates. It is specified in meters.
  • The altitude attribute denotes the height of the position, specified in meters above the WGS84 ellipsoid. If this attribute is not provided, then it must be null.
  • The altitudeAccuracy attribute is in meters. If it is not provided, then it must be null.
  • The heading attribute denotes the direction of travel of the device and is in degrees counting clockwise relative to the true north. If this attribute is not provided, then it must be null.
  • The speed attribute denotes the current ground speed of the device and is in meters per second. If this attribute is not provided, then it must be null.

Access to some of these fields is only possible if the device actually supports them. The accuracy attribute in particular may be useful to detect reliability.

IP address based Geolocation – Browsers not supporting geolocation use an external geolocation service which map the IP address of a device to geographic locations using large geolocation databases. Sometimes they may suffer from the following issues:

  • IP addresses may be associated with the wrong location like wrong postal code, city, etc.
  • Addresses may be associated with a very broad geographic area like a large city, state, etc.
  • Some addresses will not appear in the database and cannot be mapped

An external geolocation service is less accurate than the geolocation native to device also they do not provide any altitude, speed or heading of the device information. But, when GPS is not available, they are a good fallback.

getCurrentPosition API – When it is called, it must immediately return and then asynchronously acquire a new Position object. If successful, this method must invoke its associated successCallback argument with a Position object as an argument. If the attempt fails, and the method was invoked with a non-null errorCallback argument, this method must invoke the errorCallback with a PositionError object as an argument.The various methods used are

AttributeDetail
getCurrentPosition(callback,errorCallback, options)Gets the current position
watchPosition(callback, error, options)Starts monitoring the current position
clearWatch(id)Stops monitoring the current position

An example illustrating the implementation by invoking the current position listing by jQuery JavaScript framework and button click, is listed.

<head>

<script src=”js/jquery-1.4.2.min.js”></script>

<script>

jQuery(window).ready(function(){

jQuery(“#btnInit”).click(initiate_geolocation);

});

function initiate_geolocation() {

navigator.geolocation.getCurrentPosition(handle_geolocation_query);

}

function handle_geolocation_query(position){

alert(‘Lat: ‘ + position.coords.latitude + ‘ ‘ +

‘Lon: ‘ + position.coords.latitude);

}

</script>

</head>

<body>

<div>

<button id=”btnInit” >Find my location</button>

</div>

</body>

The above code will run in a browser that supports geolocation then the current latitude and longitude coordinates are shown. If the user does not allow such data gathering, the browser will identify one of these three errors as the cause:

  • User chose to not share location data
  • Device was unable to obtain position data
  • Device timedout while waiting to retrieve position data

Apply for HTML5 Certification Now!!

http://www.vskills.in/certification/Certified-HTML5-Developer

Back to Tutorial

Share this post
[social_warfare]
Table Structure
Features of Tally

Get industry recognized certification – Contact us

keyboard_arrow_up