Network and location APIs - HTML5 and CSS3 - page 198

2

For convenience, create a LatLon object for Tim Berners-Lee's
birthplace, East Sheen in London:

var eastSheen = new LatLon(Geo.parseDMS('51?27\'49"N'),
Geo.parseDMS('0?15\'49"W'));

3

As usual, add a template in your HTML to fit the data into:

<h1>
You are <span id="accuracy"></span>
<span id="distance"></span>
kilometres from the birthplace of Tim Berners-Lee
</h1>

4

Add a function to update the template:

function writeLoc(message, accuracy) {
document.getElementById('distance').innerHTML = message;
if (accuracy > 100) {
document.getElementById('accuracy').innerHTML =
'approximately';
}
}

5

Take the usual geolocation boilerplate code, and adapt it so
that it creates a LatLon object for the user's current location.
You can then use the distanceTo method of LatLon to get the
distance between the two points:

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function
(position)
{
var you = new LatLon(position.coords.latitude,
position.coords.longitude);
writeLoc(you.distanceTo(eastSheen),
position.coords.accuracy);
});
}