-
Notifications
You must be signed in to change notification settings - Fork 0
/
geo.html
65 lines (54 loc) · 2.27 KB
/
geo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Location Test</title>
<script>
function getDistanceFromLatLonInM(lat1,lon1,lat2,lon2) {
var R = 6371000; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1); // deg2rad below
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
return d;
}
function deg2rad(deg) {
return deg * (Math.PI/180)
}
function locate() {
const posStatus = document.querySelector('#posStatus');
const locInfo = document.querySelector('#locInfo');
posStatus.innerHTML='Locating...';
if (navigator.geolocation) {
navigator.geolocation.watchPosition((position)=>{
console.log(position);
const lat1=50.105240;
const long1 = 14.465270;
const lat = position.coords.latitude;
const long = position.coords.longitude;
const dist = getDistanceFromLatLonInM(lat, long, lat1, long1);
posStatus.innerHTML='Location'; // Display Latitude and Logitude
locInfo.innerHTML = `Latitude: ${lat}, Longitude: ${long}, Distance: ${dist}m`; // Create the link. Use map=15-19 for zooming out and in
// Pass lat and long to openstreetmap
locInfo.href = `https://www.openstreetmap.org/#map=19/${lat}/${long}`;
},(error) => {
console.log(error);
},{
timeout:10000,
enableHighAccuracy: true
});
}
}
</script>
</head><body>
<button onclick='locate();' >Get Location</button>
<h1 id = 'posStatus'></h1>
<a id = 'locInfo' target="#"></a>
</body>
</html>