Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
112
CHAPTER 4 ■ USING THE HTML5 GEOLOCATION API
Let’s break that example down a little. As before, we’ve got a function to update our status value on
the page, as shown in the following example.
function updateStatus(message) {
document.getElementById("status").innerHTML = message;
}
Our status here will be a simple text display, although this approach applies equally well for more
compelling graphical status displays (see Listing 4-16).
Listing 4-16. Showing the status
navigator.geolocation.getCurrentPosition(updateLocation,
handleLocationError,
{timeout:10000});
// 10 second timeout value
updateStatus(“Requesting location data…”);
Once again, we use the Geolocation API to get the user’s current position, but with a set timeout of
ten seconds. Once ten seconds have elapsed, we should either have a success or failure due to the
timeout option.
We immediately update the status text display to indicate that a position request is in progress.
Then, once the request completes or ten seconds elapses—whichever comes first—you use the callback
method to reset the status text, as shown in Listing 4-17.
Listing 4-17. Resetting the status text
function endRequest() {
updateStatus("Done.");
}
function updateLocation(position) {
endRequest();
// handle the position data
}
A simple extra, but easy to extend.
This technique works well for one-shot position lookups because it is easy for the developer to
determine when a position lookup request starts. The request starts as soon as the developer calls
getCurrentPosition(), of course. However, in the case of a repeated position lookup via
watchPosition(), the developer is not in control of when each individual position request begins.
Furthermore, the timeout does not begin until the user grants permission for the geolocation service
to access position data. For this reason, it is impractical to implement a precise status display because
the page is not informed during the instant when the user grants permission.