-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (131 loc) · 5.02 KB
/
index.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<title>pothole</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsTbhYpI10_jiaT0ogaIMz9EHulYWrxs0&callback=myMap"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var a = [];
var b = [];
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 5000, enableHighAccuracy: true });
}else {
alert("Geolocation is not supported by this browser");
}
}
function showPosition(position) {
//a.push(10.903768);
a.push(position.coords.latitude);
a = [...new Set(a)];
//b.push(76.898623);
b.push(position.coords.longitude);
b = [...new Set(b)];
console.log("My loc:",a, b);
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
var map;
var x=[];
var y=[];
function loadmaps(){
$.getJSON("https://api.thingspeak.com/channels/2178325/fields/1.json?results=2", function(result){
var m = result;
for (let i = 0; i < m["feeds"].length; i++) {
x.push(Number(m["feeds"][i]["field1"]));
}
x = [...new Set(x)];
//x = [10.903786]
console.log("lat:",x);
//alert(x);
});
$.getJSON("https://api.thingspeak.com/channels/2178325/fields/2.json?results=2", function(result){
var m = result;
for (let i = 0; i < m["feeds"].length; i++) {
y.push(Number(m["feeds"][i]["field2"]));
}
y = [...new Set(y)];
//y = [76.898649]
console.log("lng:",y);
getLocation();
}).done(function() { initialize(); });
}
window.setInterval(function(){loadmaps();}, 10000);
function initialize() {
//alert(y);
var mapOptions = { zoom: 18, center: {lat: x[0], lng: y[0]} };
map = new google.maps.Map(document.getElementById('map'), mapOptions);
const marker=[];
const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
for (let i = 0; i < x.length; i++) {
marker[i] = new google.maps.Marker({ position: { lat: x[i], lng: y[i] }, map: map , icon: image });
}
marker[marker.length] = new google.maps.Marker({ position: { lat: a[0], lng: b[0] }, map: map });
function calculateDistance(lat1, lon1, lat2, lon2) {
const earthRadius = 6371e3; // Earth's radius in meters
const degToRad = (deg) => deg * (Math.PI / 180);
const deltaLat = degToRad(lat2 - lat1);
const deltaLon = degToRad(lon2 - lon1);
const a =
Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
Math.cos(degToRad(lat1)) *
Math.cos(degToRad(lat2)) *
Math.sin(deltaLon / 2) *
Math.sin(deltaLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = earthRadius * c;
return distance;
}
function areCoordinatesInRange(lat1, lon1, lat2, lon2, rangeInMeters) {
const distance = calculateDistance(lat1, lon1, lat2, lon2);
return distance <= rangeInMeters;
}
const audio = new Audio("https://cdn.freesound.org/previews/216/216090_3450800-lq.mp3");//alerting the user
const rangeInMeters = 100;
for (let i = 0; i < x.length; i++) {
const withinRange = areCoordinatesInRange(x[i], y[i], a[0], b[0], rangeInMeters);
console.log(withinRange); // Output: true (the coordinates are within the 10-meter range)
if (withinRange) {
audio.play();
}
}
//var infowindow = new google.maps.InfoWindow({ content: '<p>Marker Location:' + marker.getPosition() + '</p>' });
//google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); });
//google.maps.event.addListener(vehicle, 'click', function () { infowindow.open(map, marker); });
}
//google.maps.event.addEventListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>