forked from muyiwexy/Leafletmap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
real-time tracker.html
76 lines (65 loc) · 2.52 KB
/
real-time tracker.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
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script>
var map_init = L.map('map', {
center: [9.0820, 8.6753],
zoom: 8
});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map_init);
L.Control.geocoder().addTo(map_init);
if (!navigator.geolocation) {
console.log("Your browser doesn't support geolocation feature!")
} else {
setInterval(() => {
navigator.geolocation.getCurrentPosition(getPosition)
}, 5000);
};
var marker, circle, lat, long, accuracy;
function getPosition(position) {
// console.log(position)
lat = position.coords.latitude
long = position.coords.longitude
accuracy = position.coords.accuracy
if (marker) {
map_init.removeLayer(marker)
}
if (circle) {
map_init.removeLayer(circle)
}
marker = L.marker([lat, long])
circle = L.circle([lat, long], { radius: accuracy })
var featureGroup = L.featureGroup([marker, circle]).addTo(map_init)
map_init.fitBounds(featureGroup.getBounds())
console.log("Your coordinate is: Lat: " + lat + " Long: " + long + " Accuracy: " + accuracy)
}
</script>
</body>
</html>