featured checkins updates on move

Author: davidsklar99

pages/dev/test-site/explore/+Page.client.ts

@@ -22,6 +22,7 @@ import { useCallback, useEffect, useState } from "react";
 import { tileserverDomain } from "@macrostrat-web/settings";
 import "./main.styl";
 import { BlankImage, Image } from "../index";
+import { set } from "react-datepicker/dist/date_utils";
 
 export function Page() {
   return h(
@@ -119,47 +120,29 @@ function FeatureDetails() {
   let checkins = [];
   let result;
 
+
 
 
   if(mapRef == null) {
     result = getCheckins(0, 100, 0, 100);
   } else {
     let map = mapRef.current;
-    let bounds = map?.getBounds();
+
+    const [bounds, setBounds] = useState(map.getBounds());
 
     // change use map coords
     result = getCheckins(bounds.getSouth(), bounds.getNorth(), bounds.getEast(), bounds.getWest());
 
-    // Define thresholds for movement
-    const MOVE_THRESHOLD = 0.5; // 0.1 degrees change in center
-    const ZOOM_THRESHOLD = 1; // 0.5 zoom level change
-
-    let lastCenter = map.getCenter();
-    let lastZoom = map.getZoom();
-
-    // Attach the 'move' event listener with thresholding
-    map.on('move', () => {
-        const currentCenter = map.getCenter();
-        const currentZoom = map.getZoom();
-
-        // Calculate the distance between last and current center coordinates
-        const distance = Math.sqrt(
-            Math.pow(currentCenter.lng - lastCenter.lng, 2) + Math.pow(currentCenter.lat - lastCenter.lat, 2)
-        );
-
-        // Check if movement exceeds the threshold for position or zoom
-        if (distance > MOVE_THRESHOLD || Math.abs(currentZoom - lastZoom) > ZOOM_THRESHOLD) {
-            console.log('Map has moved significantly!');
-            let bounds = mapRef.current?.getBounds();
-
-            // change use map coords
-            // result = getCheckins(bounds.getSouth(), bounds.getNorth(), bounds.getEast(), bounds.getWest());
-
-            // Update the last known values
-            lastCenter = currentCenter;
-            lastZoom = currentZoom;
-        }
-    });
+    // Update bounds on move
+    useEffect(() => {
+      const listener = () => {
+        setBounds(map.getBounds());
+      };
+      map.on("moveend", listener);
+      return () => {
+        map.off("moveend", listener);
+      };
+    }, [bounds]);
   }
 
   if (result == null) return h(Spinner);