Peter Lubbers - Pro HTML 5 Programming

104
CHAPTER 4 ■ USING THE HTML5 GEOLOCATION API
Writing the HTML Display
Let’s start with the HTML display. We kept it quite simple for this exercise because the real interest is in
the script driving the data. We display a simple table with rows for latitude, longitude, accuracy, and a
timestamp in milliseconds since our last update. In addition, we’ll put a few status text indicators in
place so that the user can see the summary of distance traveled (see Listing 4-8).
Listing 4-8. Code for the Distance Tracker HTML page
HTML5 Geolocation Distance Tracker
HTML5 Geolocation is not supported in your browser.
Current Position:
Latitude
?
Longitude
?
Accuracy
?
Last Timestamp
?
Current distance traveled: 0.0 km
Total distance traveled: 0.0 km
These table values are all defaulted for now and are populated once data starts flowing into the
application.
Processing the Geolocation Data
Our first JavaScript code section should look familiar. We’ve set a handler—loadDemo()—that will
execute as soon as the page completes loading. This script will detect if HTML5 Geolocation is supported
in the browser and use a handy utility to change the status message on the page to indicate what it finds.
It will then request a watch of the user’s position, as shown in Listing 4-9.