Merge pull request Siyuanw#3 from shaibalmuhtadee/loc-history

added persistent location history using browser storage
superpenguin612 · Nov 30, 2023 · 8d7f686 · 8d7f686
2 parents 5102d37 + 6ce4b03
commit 8d7f686
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -54,6 +54,15 @@
             <label class="btn btn-outline-primary" for="loopChoice3">U-Turn</label>
         </div>
 
+        <div class="btn-group">
+            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                History
+            </button>
+            <div class="dropdown-menu dropdown-menu-end" id="historyDropdown">
+                <!-- History items will be dynamically added here -->
+            </div>
+        </div>
+
         <div id="position-info" class="position-info">
             <p id="latlon-info">Latitude: 0, Longitude: 0</p>
             <p id="address-info">Street: , City: , Country: </p>

diff --git a/index.js b/index.js
@@ -56,6 +56,7 @@ let speed = 1; // speed unit meter per second
 let loop = 'off'; // off; loop; uturn
 let pause = false;
 let teleportEnabled = false;
+const locationHistory = [];
 
 const tickInterval = 1000; // update location per 1000ms
 const randomFactor = 0.2; // +-20% of origin value
@@ -65,6 +66,44 @@ const tick = setInterval(function() {
     navigate();
 }, tickInterval);
 
+document.addEventListener('DOMContentLoaded', function () {
+    const storedHistory = localStorage.getItem('locationHistory');
+    if (storedHistory) {
+        locationHistory.push(...JSON.parse(storedHistory));
+        updateHistoryDropdown();
+    }
+});
+
+const updateHistoryDropdown = () => {
+    const historyDropdown = document.getElementById('historyDropdown');
+
+    // Clear the existing dropdown items
+    historyDropdown.innerHTML = '';
+
+    // Add the latest 5 clicked locations to the dropdown
+    for (let i = 0; i < Math.min(locationHistory.length, 5); i++) {
+        const location = locationHistory[i];
+        const listItem = document.createElement('button');
+        listItem.classList.add('dropdown-item');
+        listItem.textContent = `Lat: ${location.lat.toFixed(6)}, Lon: ${location.lng.toFixed(6)}`;
+
+        // Add an event listener to handle when a history item is clicked
+        listItem.addEventListener('click', () => {
+            // Update the map and position information with the selected history item
+            if (teleportEnabled) {
+                teleport(location);
+            } else {
+                if (!initMain({ latlng: location })) {
+                    addStep(location);
+                }
+                updatePositionInfo(location);
+            }
+        });
+
+        historyDropdown.appendChild(listItem);
+    }
+};
+
 
 const updateRadio = (name, value) => {
     document.getElementsByName(name).forEach((element) => {
@@ -156,6 +195,12 @@ map.on('click', function(e) {
         }
     }
     updatePositionInfo(e.latlng);
+    locationHistory.unshift(e.latlng);
+    if (locationHistory.length > 5) {
+        locationHistory.pop();
+    }
+    updateHistoryDropdown();
+    localStorage.setItem('locationHistory', JSON.stringify(locationHistory));
 });
 
 map.on('zoomend', function () {