added

main.py

@@ -21,20 +21,14 @@ html_template = """
     <div id="map">Loading map...</div>
     
     <script>
-        function initMap() {
-            if (navigator.geolocation) {
-                navigator.geolocation.getCurrentPosition(showPosition, showError);
-            } else {
-                alert("Geolocation is not supported by this browser.");
-            }
-        }
-
-        function showPosition(position) {
-            const lat = position.coords.latitude;
-            const lng = position.coords.longitude;
+        let map;
+        let marker;
+        let path = [];  // Array to store the trajectory points
+        let polyline;   // Polyline to show the trajectory
 
-            // Initialize map centered on user's location
-            const map = L.map('map').setView([lat, lng], 15);
+        function initMap() {
+            // Initialize map with default coordinates
+            map = L.map('map').setView([23.2136165, 72.6873751], 15);
 
             // Basemap layers
             const googleHybridLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
@@ -60,10 +54,39 @@ html_template = """
             };
             L.control.layers(baseLayers).addTo(map);
 
-            // Add marker for user's location
-            L.marker([lat, lng]).addTo(map)
-                .bindPopup("<b>Your Location</b>")
-                .openPopup();
+            // Start watching the user's location
+            if (navigator.geolocation) {
+                navigator.geolocation.watchPosition(showPosition, showError);
+            } else {
+                alert("Geolocation is not supported by this browser.");
+            }
+        }
+
+        function showPosition(position) {
+            const lat = position.coords.latitude;
+            const lng = position.coords.longitude;
+
+            // Update marker position or create a new marker
+            if (marker) {
+                marker.setLatLng([lat, lng]).update();  // Update existing marker position
+            } else {
+                marker = L.marker([lat, lng]).addTo(map)
+                    .bindPopup("<b>Your Location</b>")
+                    .openPopup();  // Create new marker
+            }
+
+            // Center the map on the user's location
+            map.setView([lat, lng], 15);
+
+            // Store the current position in the path array
+            path.push([lat, lng]);
+
+            // If the polyline doesn't exist, create it
+            if (!polyline) {
+                polyline = L.polyline(path, { color: 'blue' }).addTo(map);
+            } else {
+                polyline.setLatLngs(path);  // Update polyline with new path
+            }
         }
 
         function showError(error) {