Sunday, September 2, 2012

HTML5 Geolocation for Mobile

HTML 5 is develop not only to target desktop but also to target every device which can access internet like Mobile, Smart TV, Gaming console etc.

HTML 5 Geolocation  can be use with Mobile to develop various application, before this native application is the only way to develop Geolocation application of course developer can access the native features of Mobile device using Phonegap

With HTML5 it is possible to get as accurate geolocation information as device native application give. actually it is using different algorithms to get geolocation coordinate information. Developer can get accurate coordinate information of end user by using "enableHighAccuracy "  option.   

The navigator.geolocation object offers is quite small but offers the following (at the time of writing):

  1. void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
  2. long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
  3. void navigator.geolocation.clearWatch(watch_position_id)
position_options is specified as a JSON-style string with up to three parameters:

  • enableHighAccuracy – A boolean (true/false) which indicates to the device that you wish to obtain it’s most accurate readings (this parameter may or may not make a difference, depending on your hardware)
  • maximumAge – The maximum age (in milliseconds) of the reading (this is appropriate as the device may cache readings to save power and/or bandwidth)
  • timeout – The maximum time (in milliseconds) for which you are prepared to allow the device to try to obtain a Geo location

wpid=navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

The success_callback_function is passed a single parameter, a position object which has the following properties:

  • coords.latitude – The current latitude reading
  • coords.longitude – The current longitude reading
  • coords.accuracy – The accuracy of the current latitude and longitude readings (in metres)
  • coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour)
  • coords.altitude – The current altitude reading (in metres)
  • coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)

here we take a look of simple example

Example of a "one-shot" position request.

    function showMap(position) {
      // Show a map centered at (position.coords.latitude, position.coords.longitude).

    // One-shot position request.

you can use above example when developer want to use geolocation information once in a code

Example of requesting repeated position updates and handling errors.

    function scrollMap(position) {
      // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).

    function handleError(error) {
      // Update a div element with error.message.

    // Request repeated updates.
    var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

    function buttonClickHandler() {
      // Cancel the updates when the user clicks a button.

Example of requesting a potentially cached position.

    // Request a position. We accept positions whose age is not
    // greater than 10 minutes. If the user agent does not have a
    // fresh enough cached position object, it will automatically
    // acquire a new one.

    function successCallback(position) {
      // By using the 'maximumAge' option above, the position
      // object is guaranteed to be at most 10 minutes old.

    function errorCallback(error) {
      // Update a div element with error.message.

Difference between  getCurrentPosition() and watchPosition()

The getCurrentPosition() method takes one, two or three arguments. When called, it must immediately return and then asynchronously attempt to obtain the current location of the device

The watchPosition() is doing  same but, The watch operation then must continue to monitor the position of the device and invoke the appropriate callback every time this position changes

Reference :

No comments:

Post a Comment