129 lines
4.6 KiB
HTML
129 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>gps saver</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button id="startbutton" style="padding:0.5em; font-size: 1em;">Start</button>
|
|
<button id="stopButton" style="padding:0.5em; font-size: 1em;">STOP</button>
|
|
<div id="maps" style="width: 100vw; height: 100vh">
|
|
</div>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
<script>
|
|
let startbutton = document.querySelector("#startbutton");
|
|
let stopButton = document.querySelector("#stopButton")
|
|
let mapElem = document.querySelector("#maps");
|
|
let map = null;
|
|
let allCoordinate = JSON.parse(`[]`);
|
|
let previewCircle = null;
|
|
let previewMarker = null;
|
|
function onPositionReceive(coord)
|
|
{
|
|
console.log(coord)
|
|
allCoordinate.push({
|
|
timestamp: coord.timestamp,
|
|
accuracy: coord.coords.accuracy,
|
|
latitude: coord.coords.latitude,
|
|
longitude: coord.coords.longitude,
|
|
altitude: coord.coords.altitude,
|
|
altitudeAccuracy: coord.coords.altitudeAccuracy
|
|
});
|
|
let timeStamp = coord.timestamp;
|
|
coord = coord.coords;
|
|
let diffLongitude = coord.accuracy / 111320 / 2;
|
|
let diffLatitude = coord.accuracy / (400750000 * (Math.cos(coord.latitude) / 360)) / 2;
|
|
let yMin = coord.longitude - diffLatitude;
|
|
let yMax = coord.longitude + diffLatitude;
|
|
let xMin = coord.latitude - diffLongitude;
|
|
let xMax = coord.latitude + diffLongitude;
|
|
// let url = "https://www.openstreetmap.org/export/embed.html?bbox=" + (xMin) + "%2C" + (yMin) + "%2C" + (xMax) + "%2C" + (yMax);
|
|
|
|
// mapElem.innerHTML = "";
|
|
if(map == null) {
|
|
map = L.map(mapElem).fitBounds([[xMin, yMin], [xMax, yMax]]);
|
|
}
|
|
if(previewCircle) {
|
|
previewCircle.remove()
|
|
}
|
|
previewCircle = L.circle([coord.latitude, coord.longitude], {
|
|
color: 'red',
|
|
fillColor: '#f03',
|
|
fillOpacity: 0.1,
|
|
radius: coord.accuracy / 2
|
|
}).addTo(map);
|
|
|
|
if(previewMarker) {
|
|
previewMarker.remove()
|
|
}
|
|
previewMarker = L.marker([coord.latitude, coord.longitude]).addTo(map);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
}
|
|
|
|
let idgeoloc = null
|
|
startbutton.addEventListener("click", ()=>{
|
|
document.body.requestFullscreen();
|
|
maps.innerHTML = "";
|
|
navigator.geolocation.getCurrentPosition(onPositionReceive);
|
|
idgeoloc = navigator.geolocation.watchPosition(onPositionReceive);
|
|
});
|
|
stopButton.addEventListener("click", ()=>{
|
|
if(idgeoloc) {
|
|
navigator.geolocation.clearWatch(idgeoloc);
|
|
idgeoloc = null;
|
|
}
|
|
document.exitFullscreen()
|
|
let coordinatesString = JSON.stringify(allCoordinate);
|
|
// maps.innerHTML = coordinatesString;
|
|
|
|
var blob = new Blob([coordinatesString], {'type':'application/json'});
|
|
let a = document.createElement("a");
|
|
a.href = window.URL.createObjectURL(blob);
|
|
a.download = "save.json";
|
|
a.click();
|
|
|
|
let coord = allCoordinate[0];
|
|
let diffLongitude = coord.accuracy / 111320 / 2;
|
|
let diffLatitude = coord.accuracy / (400750000 * (Math.cos(coord.latitude) / 360)) / 8;
|
|
let yMin = coord.longitude - diffLatitude;
|
|
let yMax = coord.longitude + diffLatitude;
|
|
let xMin = coord.latitude - diffLongitude;
|
|
let xMax = coord.latitude + diffLongitude;
|
|
mapElem.innerHTML = "";
|
|
mapElem.class = ""
|
|
if (map) {
|
|
map.remove();
|
|
}
|
|
map = L.map(mapElem).fitBounds([[xMin, yMin], [xMax, yMax]]);
|
|
let latLngs = [];
|
|
for (let coordinate of allCoordinate) {
|
|
latLngs.push([coordinate.latitude, coordinate.longitude])
|
|
previewCircle = L.circle([coordinate.latitude, coordinate.longitude], {
|
|
color: 'red',
|
|
fillColor: '#f03',
|
|
fillOpacity: 0.1,
|
|
radius: coordinate.accuracy / 2
|
|
}).addTo(map);
|
|
previewMarker = L.marker([coordinate.latitude, coordinate.longitude]).addTo(map);
|
|
}
|
|
L.polyline(latLngs).addTo(map);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|