fixed issue with device's coords not being used in time for map starting position, even if available.

Author: cwn-dev

src/wwwroot/index.html

@@ -24,37 +24,46 @@
   <script src="./lib/leaflet/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
   <script>
     fetch('/checkins')
-      .then(response => { return response.json() })
+      .then(response => response.json())
       .then(coordinates => {
-        const startingEntry = Math.floor(Math.random() * ((coordinates.length - 1) - 0 + 1) + 0);
+        const startingEntry = Math.floor(Math.random() * coordinates.length);
         let startLat = coordinates[startingEntry].lat;
         let startLong = coordinates[startingEntry].long;
 
-        // If possible, centre the map in on the device location instead of random.
-        if (navigator.geolocation) 
-        {
-          navigator.geolocation.getCurrentPosition(pos => {
-            startLat = pos.coords.latitude;
-            startLong = pos.coords.longitude;
-          }, err => { });
-        }
+        function init(lat, long) {
+          const map = L
+            .map('map', {
+              preferCanvas: true
+            })
+            .setView([lat, long], 3);
 
-        const map = L
-          .map('map', {
-            preferCanvas: true
-          })
-          .setView([ startLat, startLong ], 3);
+          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
+            .addTo(map);
 
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
-          .addTo(map);
+          coordinates.forEach(point => {
+            const marker = L
+              .marker([point.lat, point.long])
+              .addTo(map);
 
-        coordinates.forEach(point => {
-          const marker = L
-            .marker([point.lat, point.long])
-            .addTo(map);
-            
-          marker.bindPopup(`<strong>${point.dateTimeUtc}</strong><br>${point.note}`);
-        });
+            marker.bindPopup(`<strong>${point.dateTimeUtc}</strong><br>${point.note}`);
+          });
+        }
+
+        if (navigator.geolocation) {
+          navigator.geolocation.getCurrentPosition(
+            pos => {
+              startLat = pos.coords.latitude;
+              startLong = pos.coords.longitude;
+              init(startLat, startLong);
+            },
+            err => {
+              console.warn('Geolocation failed or denied, using fallback coordinates.');
+              init(startLat, startLong);
+            }
+          );
+        } else {
+          init(startLat, startLong);
+        }
       })
       .catch(error => {
         console.error('Error fetching data:', error);