Location 1

by habla

HTML

<div id="tripmeter">
      <p>
        Starting Location (lat, lon):<br/>
        <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
      </p>
      <p>
        Current Location (lat, lon):<br/>
        <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
      </p>
      <p>
        Distance from starting location:<br/>
        <span id="distancefrom">0</span> km
      </p>
      <p>
        Distance travelled:<br/>
        <span id="distancetravelled">0</span> km
      </p>
      <p>
        Speed:<br/>
          <span id="speed">0</span> km/h
      </p>
    </div>

CSS

#tripmeter {
  border: 3px double black;
  padding: 10px;
  margin: 10px 0;
}

p {
  color: #222;
  font: 28px Arial;
}

span {
  color: #00C;
}​

JavaScript

var startPos;

if (navigator.geolocation)
{
	navigator.geolocation.getCurrentPosition(function (position)
	{
        distance = 0;
		startPos = position;
        
            lastPos = startPos;
            lastTime = new Date().getTime();
        
		document.getElementById("startLat").innerHTML = startPos.coords.latitude;
		document.getElementById("startLon").innerHTML = startPos.coords.longitude;
	}, function (error)
	{
		alert("Error occurred. Error code: " + error.code);
		// error.code can be:
		//   0: unknown error
		//   1: permission denied
		//   2: position unavailable (error response from locaton provider)
		//   3: timed out
	});

	navigator.geolocation.watchPosition(function (position)
	{
		document.getElementById("currentLat").innerHTML = position.coords.latitude;
		document.getElementById("currentLon").innerHTML = position.coords.longitude;
		document.getElementById("distancefrom").innerHTML =
		  calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
							position.coords.latitude, position.coords.longitude);
        
        delta = 
		  calculateDistance(lastPos.coords.latitude, lastPos.coords.longitude,
							position.coords.latitude, position.coords.longitude);
                
        if (delta > 0.005)
        {
            newTime = new Date().getTime();  
            speedKmH = (delta / ((newTime - lastTime)/3600000));     
            document.getElementById("speed").innerHTML = speedKmH;
            
            distance += delta;
            document.getElementById("distancetravelled").innerHTML = distance;
            
            lastTime = newTime;
            lastPos = position;
        }
        
	});
}

// Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
// http://www.movable-type.co.uk/scripts/latlong.html
// Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
function calculateDistance(lat1, lon1, lat2, lon2)
{
	var R = 6371; // km
	var dLat = (lat2 -...