forked from Leaflet/Leaflet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html.withKalmanFilteringalgorithm
133 lines (113 loc) · 5.11 KB
/
index.html.withKalmanFilteringalgorithm
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Delivery Tracker</title>
<link rel="stylesheet" href="dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<style>
#map { height: 500px; width: 100%; }
#status { margin: 10px; font-weight: bold; }
</style>
</head>
<body>
<h2>Food Delivery to Nearby Restaurants</h2>
<p id="status">Waiting for GPS permission...</p>
<button onclick="checkPermission()">Start Tracking</button>
<label for="restaurant">Select Nearby Restaurant:</label>
<select id="restaurant">
<option value="11.5650, 104.9100">Oknha Tep Phan St. (182) - Restaurant A</option>
<option value="11.5718, 104.9008">Luna Prime - TK Roundabout - Restaurant B</option>
<option value="11.5635, 104.9145">Restaurant C</option>
</select>
<button onclick="deliverFood()">Deliver Food</button>
<div id="map"></div>
<script src="dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<script>
let map, userMarker, routingControl;
let userLocation = null;
document.addEventListener("DOMContentLoaded", function () {
map = L.map('map').setView([11.5650, 104.9100], 15);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
});
function checkPermission() {
if (!navigator.permissions) {
document.getElementById("status").textContent = "Geolocation is not supported.";
return;
}
navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
if (result.state === 'granted' || result.state === 'prompt') {
trackLocation(); // ✅ Start tracking immediately if permission was granted
} else {
alert("Please enable location permissions manually.");
}
}).catch(() => {
trackLocation(); // ✅ Fallback if permission query fails
});
}
// Kalman Filter for GPS Smoothing
class KalmanFilter {
constructor(q = 0.01, r = 0.5) {
this.q = q; // Process noise
this.r = r; // Measurement noise
this.x = 0; // Estimated location
this.p = 1; // Initial error covariance
}
update(measurement) {
let k = this.p / (this.p + this.r); // Kalman gain
this.x = this.x + k * (measurement - this.x);
this.p = (1 - k) * this.p + this.q; // Update covariance
return this.x;
}
}
let kalmanLat = new KalmanFilter();
let kalmanLon = new KalmanFilter();
function trackLocation() {
if (!navigator.geolocation) {
document.getElementById("status").textContent = "Geolocation is not supported.";
return;
}
navigator.geolocation.watchPosition(
function (position) {
let lat = kalmanLat.update(position.coords.latitude);
let lon = kalmanLon.update(position.coords.longitude);
userLocation = [lat, lon];
document.getElementById("status").textContent = `Current Location: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
if (userMarker) {
map.removeLayer(userMarker);
}
userMarker = L.marker([lat, lon]).addTo(map).bindPopup("Your Smoothed Location").openPopup();
map.panTo([lat, lon]);
},
function (error) {
console.error("Error getting location: ", error);
},
{ enableHighAccuracy: true, timeout: 2500, maximumAge: 5000 } // ✅ Updates every 2500ms, smoothing with Kalman Filter
);
}
function deliverFood() {
if (!userLocation) {
alert("Please enable location tracking first!");
return;
}
let selectedRestaurant = document.getElementById('restaurant').value.split(',');
let restaurantLocation = [parseFloat(selectedRestaurant[0]), parseFloat(selectedRestaurant[1])];
if (routingControl) {
map.removeControl(routingControl); // Remove old route if exists
}
routingControl = L.Routing.control({
waypoints: [
L.latLng(userLocation[0], userLocation[1]), // User's location
L.latLng(restaurantLocation[0], restaurantLocation[1]) // Restaurant location
],
routeWhileDragging: true
}).addTo(map);
alert("Food delivery in progress!");
}
</script>
</body>
</html>