<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;
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.