JSFiddle - React, Tailwind, and code Playground
HTML
<div id="results"></div>
CSS
#results{
border: 1px solid #ccc;
padding: 2%;
margin: 3%;
}
JavaScript
var currentUpdate, lastUpdate;
function onPositionUpdate(position){
if(currentUpdate) lastUpdate = currentUpdate;
currentUpdate = {
position: new LatLon(position.coords.latitude, position.coords.longitude),
time: new Date()
};
if(!lastUpdate) return;
currentUpdate.deltaDistMetres = lastUpdate.position.distanceTo(currentUpdate.position)*1000;
currentUpdate.deltaTimeSecs = (currentUpdate.time - lastUpdate.time)*1000;
currentUpdate.speed = (currentUpdate.deltaDistMetres/currentUpdate.deltaTimeSecs);
currentUpdate.accelerationGPS = (currentUpdate.speed - lastUpdate.speed) / currentUpdate.deltaTimeSecs;
var msg = "Distance moved: "+currentUpdate.deltaDistMetres+" m; Avg speed: "+currentUpdate.speed+" m/s; Acceleration (GPS): "+currentUpdate.accelerationGPS;
$('#results').append("<p>"+msg+"</p>");
}
function getPos(){
navigator.geolocation.getCurrentPosition(onPositionUpdate,
function(error){
$('#results').append("<p>Error: "+error.message+"</p>");
});
}
setInterval(getPos, 2000);
getPos();
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Latitude/longitude spherical geodesy formulae & scripts (c) Chris Veness 2002-2012 */
/* - www.movable-type.co.uk/scripts/latlong.html */
/* */
/* Sample usage: */
/* var p1 = new LatLon(51.5136, -0.0983); */
/* var p2 = new LatLon(51.4778, -0.0015); */
/* var dist = p1.distanceTo(p2); // in km */
/* var brng = p1.bearingTo(p2); // in degrees clockwise from north ...