Peter Lubbers - Pro HTML 5 Programming

226
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
function distance(latitude1, longitude1, latitude2, longitude2) {
// R is the radius of the earth in kilometers
var R = 6371;
var deltaLatitude = toRadians((latitude2-latitude1));
var deltaLongitude = toRadians((longitude2-longitude1));
latitude1 = toRadians(latitude1), latitude2 = toRadians(latitude2);
var a = Math.sin(deltaLatitude/2) *
Math.sin(deltaLatitude/2) +
Math.cos(latitude1) *
Math.cos(latitude2) *
Math.sin(deltaLongitude/2) *
Math.sin(deltaLongitude/2);
var c = 2 * Math.atan2(Math.sqrt(a),
Math.sqrt(1-a));
var d = R * c;
return d;
}
// latitude and longitude for the finish line in the Lake Tahoe race
var finishLat = 39.17222;
var finishLong = -120.13778;
In this familiar set of functions—used earlier in Chapter 6—we calculate the distance between two
points with a distance function. The details are not of particular importance, nor are they the most
accurate representation of distance along a racetrack, but they’ll do for our example.
In the final lines, we establish a latitude and longitude for the finish line location of the race. As
you’ll see, we will compare these coordinates with incoming racer positions to determine the racers’
distance from the finish line, and thus, their ranks in the race.
Now, let’s look at a tiny snippet of the HTML markup used to display the page.
Live T216 Leaderboard
Leaderboard: Connecting...
Although most of the page HTML is irrelevant to our demonstration, in these few lines, we declare
some named elements with the IDs leaderboardStatus and leaderboard. The leaderboardStatus is
where we will display the connection information for our WebSocket. And the leaderboard itself is where
we will insert div elements to indicate the position information we are receiving from our WebSocket
messages, using the utility function shown in Listing 9-6.
Listing 9-6. Position Information Utility Function
// display the name and distance in the page
function displayRacerLocation(name, distance) {
// locate the HTML element for this ID
// if one doesn't exist, create it
var incomingRow = document.getElementById(name);
if (!incomingRow) {