Welcome to Part IV of this series. We covered the basics of HTML5 Geolocation support in Part I of this series. In that article, we looked at how an HTML5 based web application can make use of Geolocation support built in the browser.
To recap, I will recreate the Javascript code for you below:
<script type="text/javascript">
function findCurrentLocation(){
var geoService = navigator.geolocation;
if (geoService){
geoService.getCurrentPosition(showCurrentLocation,errorHandler);
} else {
alert("Your Browser does not support Geolocation.");
}
}
function showCurrentLocation(position){
document.getElementById("mylocation").innerHTML = "Current Latitude : " + position.coords.latitude + " , Longitude : " + position.coords.longitude;
}
function errorHandler(error){
alert("Error while retrieving current position. Error code: " + error.code + ",Message: " + error.message);
}
</script>
In the above code, we used the getCurrentPosition method on the navigator.geolocation object to get the current location co-ordinates. The main point to note about this method is that it is just a onetime call to get the location co-ordinates. The application is then in control to provide location relevant data. So while this might suffice for certain kinds of applications, it may not be enough for an application that needs the location regularly at a certain interval. For e.g. if you wish to write an application that would provide different location based data, if the user co-ordinates are changing i.e. if the user is moving.
To do that, you need to substitute the getCurrentPosition call with watchPosition. This method functions in a similar manner to getCurrentPosition, just that your application will get notified when the users position changes. In addition to getting notified i.e. the success function getting called when the location has changed, the watchPosition method also returns a unique ID. This ID is used together with a paired method called clearWatch. So whenever you wish to stop tracking the users location (which you should by the way, since these operations are draining), you can use the ID and pass it as a parameter to the navigator.geolocation.clearWatch method. This will stop the tracking of the user’s location.
Let us take a look at our modified code then continuously gets notified when the location of the user changes. We are simply changing the code that we covered here in Part I of the series.
Do note that I have decided to use the Modernizr Javascript library for detecting HTML5 support that we covered in Part II of the series.
The geotest.html file is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML GeoLocation Test</title>
<script src="js/modernizr-1.5.min.js"></script>
<script type="text/javascript">
var watchPositionID=0;
function startLocationTracking(){
alert("startLocationTracking");
if (Modernizr.geolocation) {
alert("Your Browser supports GeoLocation");
watchPositionID = navigator.geolocation.watchPosition(showCurrentLocation,errorHandler,{enableHighAccuracy: true});
} else {
alert("Your Browser does not support GeoLocation.");
}
}
function showCurrentLocation(position){
document.getElementById("mylocation").innerHTML = "Current Latitude : " + position.coords.latitude + " , Longitude : " + position.coords.longitude;
}
function errorHandler(error){
alert("Error while retrieving current position. Error code: " + error.code + ",Message: " + error.message);
}
function stopLocationTracking(){
if (watchPositionID > 0) {
navigator.geolocation.clearWatch(watchPositionID);
alert("Stopped Tracking Location");
}
}
</script>
</head>
<body>
<div id="main">
<div id="mylocation"></div>
<input type="button" value="Start" onclick="startLocationTracking()"/>
<input type="button" value="Stop" onclick="stopLocationTracking()"/>
</div>
</body>
</html>
Let us go through the code in brief:
- Our HTML page is simple. It has two buttons, one to start location tracking and the other to stop location tracking.
- The Start button, invokes the startLocationTracking method. This method determines first if Geolocation support is present. If yes, it will invoke the watchPosition() method on the navigator.geolocation object. The first parameter to the watchPosition() method is the success function that gets invoked if the location is determined. That success function i.e. showCurrentLocation simply displays the location in terms of latitude and longitude.
- The watchPosition method returns an ID that we are saving in the global variable named watchPositionID.
- The Stop button, invokes the stopLocationTracking method. This method simply uses the watchPositionID and passes that as a parameter to the navigator.geolocation.clearWatch(…) method. This will stop the invocation of the success function i.e. showCurrentLocation if the users location changes.
Conclusion
We have seen in this article how we can use the navigator.geolocation object to keep tracking a user’s location as it changes. In an earlier part of the series on HTML5 Geolocation, we had covered getting the location on demand or only once. As per the requirements of your application, you can use any of these two mechanisms. Do keep in mind, that determining the location of the device is quite a drain on the battery, especially on mobile devices. So if you are using the watchPosition method to keep a track as the location changes, be sensitive to the battery consumption too.
Please participate
We look forward to your feedback on this article and the others in the series. Let us know which feature you would like to see covered. Additionally, do share your experiences with HTML5.
