Sunday, January 15, 2012

How to handle errors that we get while using Geolocation API in HTML5?

In my previous article we discussed how to listen for location updates of the user by using Geolocation API. This article provides a sample that demonstrates how to implement error handling mechanism in case we get an error while using Geolocation API. In this sample we use a callback function to handle errors that result from calls to the Geolocation API. This error callback function is specified using the optional second parameter to getCurrentPosition or watchPosition.

The possible errors we may get while using Geolocation API are:
  1.  PERMISSION_DENIED: This site does not have permission to use the Geolocation API.
  2.  POSITION_UNAVAILABLE: The current position could not be determined.
  3.  TIMEOUT: The current position could not be determined within the timeout specified.

The below code snippet shows how to call getCurrentPosition with both a success callback and an error callback as parameters.

getCurrentPosition using Geolocation API:

function requestPosition() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
      geoloc.getCurrentPosition(successCallback, errorCallback);
      }
      else {
      alert("Geolocation not supported");
      }
  }
  else {
      alert("Navigator not found");
  }
}

When getCurrentPosition gets the current position, it call's the function successCallback() and updates the textboxes in the page by using latitude and longitude coordinates.

using successCallback():

function successCallback(position)
{
   setText(position.coords.latitude, "latitude");
   setText(position.coords.longitude, "longitude");
}

The error callback function takes one PositionError parameter. The PositionError object provides a code attribute that indicates the type of error and a message attribute that may contain an error message. The below code snippet shows how to implement error handling method.

using PositionError:

function errorCallback(error) {
    var message = ""; 
      switch (error.code) {
      case error.PERMISSION_DENIED:
        message = "This website does not have permission to use " + "the Geolocation API";
        break;
      case error.POSITION_UNAVAILABLE:
        message = "The current position could not be determined.";
        break;
      case error.PERMISSION_DENIED_TIMEOUT:
        message = "The current position could not be determined " + "within the specified timeout period.";           
        break;
    }

    if (message == "")
    {
        var strErrorCode = error.code.toString();
        message = "The position could not be determined due to " + "an unknown error (Code: " + strErrorCode + ").";
    }
    alert(message);
}

Example:

<!DOCTYPE html> 
<html>
<head>
<title>Geolocation API Example</title>
<script type="text/javascript">

function setText(val, e) {
    document.getElementById(e).value = val;
}
var nav = null;
function requestPosition() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          geoloc.getCurrentPosition(successCallback, errorCallback);
      }
      else {
          alert("Geolocation not supported");
      }
  }
  else {
      alert("Navigator not found");
  }
}
function successCallback(position)
{
   setText(position.coords.latitude, "latitude");
   setText(position.coords.longitude, "longitude");
}
function errorCallback(error) {
    var message = ""; 
      switch (error.code) {
      case error.PERMISSION_DENIED:
          message = "This website does not have permission to use " + "the Geolocation API";
          break;
       case error.POSITION_UNAVAILABLE:
          message = "The current position could not be determined.";
          break;
       case error.PERMISSION_DENIED_TIMEOUT:
          message = "The current position could not be determined " + "within the specified timeout period.";           
          break;
    }

    if (message == "")
    {
        var strErrorCode = error.code.toString();
        message = "The position could not be determined due to " + "an unknown error (Code: " + strErrorCode + ").";
    }
    alert(message);

}

</script>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" /><br />
<label for="longitude">Longitude: </label><input id="longitude" /> <br />
<input type="button" onclick="requestPosition()" value="Get Latitude and Longitude"  />
</body>
</html>

Sample Output:


How to handle errors that we get while using Geolocation API in HTML5


Demo:



0 comments:

Post a Comment

Subscribe via Email