Peter Lubbers - Pro HTML 5 Programming

106
CHAPTER 4 ■ USING THE HTML5 GEOLOCATION API
Note also that we are setting a maximumAge option on our position watch: {maximumAge:20000}. This
will tell the location service that we don’t want any cached location values that are greater than 20
seconds (or 20000 milliseconds) old. Setting this option will keep our page updating at regular intervals,
but feel free to adjust this number and experiment with larger and smaller cache sizes.
The bulk of our work will be done in our updateLocation() function. Here we will update the page
with our most recent values and calculate the distance traveled, as shown in Listing 4-11.
Listing 4-11. Adding the updateLocation() function
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
document.getElementById("accuracy").innerHTML = accuracy;
document.getElementById("timestamp").innerHTML = timestamp;
As you might expect, the first thing we will do when we receive an updated set of position
coordinates is to record all the information. We gather the latitude, longitude, accuracy, and timestamp,
and then update the table values with the new data.
You might not choose to display a timestamp in your own application. The timestamp number used
here is in a form primarily useful to computers, which won’t be meaningful to an end user. Feel free to
replace it with a more user-friendly time indicator or remove it altogether.
The accuracy value is given to us in meters and might at first seem unnecessary. However, any data
depends on its accuracy. Even if you don’t present the user with the accuracy values, you should take
them into account in your own code. Presenting inaccurate values could give the user a skewed idea of
his or her location. Therefore, we will throw out any position updates with an unreasonably low
accuracy, as shown in Listing 4-12.
Listing 4-12. Ignoring inaccurate accuracy updates
}
// sanity test... don't calculate distance if accuracy
// value too large
if (accuracy >= 500) {
updateStatus("Need more accurate values to calculate distance.");
return;