<iframe id="map" frameborder="0"></iframe>

<div class="controls">  
  <button id="start">Get location</button>
  <pre id="output"></pre>
</div>
body {
  background-color: rgb(2, 62, 80);
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  pointer-events: none;
}

.controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#start {
  background-color: rgb(2, 62, 80);
  border: 0;
  box-shadow: 0 0 0 0.2em rgb(94, 129, 140);
  outline: none;
  border-radius: 0.2em;
  color: #fff;
  font-family: monospace;
  font-size: 2vw;
  padding: 0.75em 1.25em;
}

#output {
  background-color: rgb(2, 62, 80, 0.8);
  box-shadow: 0 0 0 0.2em rgb(2, 62, 80);
  color: #fff;
  font-size: 2vw;
  border-radius: 0.2em;
  text-align: center;
  padding: 1em;
}

#output:empty {
  display: none;
}
const start = document.getElementById('start');
const output = document.getElementById('output');
const map = document.getElementById('map');

let running = false;
let lastCoords = null;

const getLocation = () => {
  start.innerText = 'Stop';
  
	navigator.geolocation.getCurrentPosition(
  	// Successful location read
    (position) => {      
      // Update map
      map.src = `https://www.openstreetmap.org/export/embed.html?bbox=${position.coords.longitude},${position.coords.latitude},${position.coords.longitude + 0.001},${position.coords.latitude + 0.001}&layer=mapnik`;
      
      // Show distance wandered
      if (lastCoords) {
        const R = 6378137; // Radius of earth in meters
        const dLat = position.coords.latitude * Math.PI / 180 - lastCoords.lat * Math.PI / 180;
        const dLon = position.coords.longitude * Math.PI / 180 - lastCoords.lng * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lastCoords.lat * Math.PI / 180) * Math.cos(position.coords.latitude * Math.PI / 180) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        const d = R * c;
        
        output.innerText = `Distance moved since last location reading:\n${Math.round(d * 1000) / 1000} meters`;
      }
      
      lastCoords = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
      
      // Refetch
      if (running) getLocation();
    },
    
    // Error
    (error) => {      
      // Refetch
      // output.innerText = error.message;
      if (running) getLocation();
    },
    
    // Options
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 0,
    },
  );
};


start.addEventListener('click', () => {
  if (!running) {
    start.innerText = 'Stop';
    running = true;
    getLocation(); 
  } else {
    start.innerText = 'Get location';
    running = false;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.