Sunday, January 15, 2012

How to listen for location updates using Geolocation API in HTML5?

In my previous article we discussed how to get the current location of the user by using Geolocation API . This article provides a sample on how our application request to continuously listen for location updates. For example this is extremely useful when we scroll a map, our application should request continuously for location updates as each time the location changes.

This  sample uses the geolocation object's watchPosition method to receive location updates each time the position of the computer or device hosting the web application changes. To stop listening for updates, call clearWatch, passing it the return value of watchPosition.

The below code snippet shows how to listen for location updates using geolocation object’s watchPosition method.

using watchPosition() of Geolocation  API:

function listenForPositionUpdates() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          watchID = geoloc.watchPosition(successCallback);
      }
      else {
          alert("Geolocation API is not supported in your browser");
      }
  }
  else {
      alert("Navigator is not found");
  }
}

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

using successCallback():

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

When we don’t want to listen for any location updates, use geolocation object’s clearWatch method. The below code snippet shows how to use the clearWatch.

Using clearWatch():

function clearWatch(watchID) {
    window.navigator.geolocation.clearWatch(watchID);
}

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;
var watchID;
function listenForPositionUpdates() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          watchID = geoloc.watchPosition(successCallback);
      }
      else {
          alert("Geolocation API is not supported in your browser");
      }
  }
  else {
      alert("Navigator is not found");
  }
}
function clearWatch(watchID) {
    window.navigator.geolocation.clearWatch(watchID);
}
function successCallback(position)
{
   setText(position.coords.latitude, "latitude");
   setText(position.coords.longitude, "longitude");
}
</script>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" /> <br />
<label for="longitude">Longitude: </label><input id="longitude" /> <br />
<input type="button" value="Watch Latitude and Longitude" onclick="listenForPositionUpdates()" />
<input type="button" value="Clear watch" onclick="clearWatch()" />
</body>
</html>

Sample Output:


How to listen for location updates using Geolocation API in HTML5


Demo:



0 comments:

Post a Comment

Subscribe via Email