Add slider to control zoom delay seconds in exploration mode

- User controls zoom delay duration (0-5 sec, with step of 1)
- If delay>0, use `flyToBounds`, else use `fitBounds`

frontend/src/components/Map.js

@@ -90,9 +90,10 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
     const [explorationMarkers, setExplorationMarkers] = useState([]);
     const [explorationSidebarOpen, setExplorationSidebarOpen] = useState(false);
     const [shouldZoom, setShouldZoom] = useState(false);
+    const [zoomDelaySeconds, setZoomDelaySeconds] = useState(3); // Default zoom delay in seconds
 
     // Using CenterMap component to handle centering (for summary/full apis) and for zooming (for wiki/nearby api)
-    const CenterMap = ({ position, coordinates, shouldZoom, setShouldZoom }) => {
+    const CenterMap = ({ position, coordinates, shouldZoom, setShouldZoom, zoomDelaySeconds }) => {
         const map = useMap();
         useEffect(() => {
             if (position && Array.isArray(position) && position.length === 2) {
@@ -104,14 +105,22 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
         useEffect(() => {
             if (coordinates && Array.isArray(coordinates) && coordinates.length > 1  && shouldZoom) {
                 const bounds = L.latLngBounds(coordinates);
-                map.flyToBounds(bounds, {
-                    padding: [50, 50],
-                    maxZoom: 16,
-                    duration: 3
-                });
+                console.log("Delay:", zoomDelaySeconds);
+                if (zoomDelaySeconds > 0) {
+                    map.flyToBounds(bounds, {
+                        padding: [50, 50],
+                        maxZoom: 16,
+                        duration: zoomDelaySeconds
+                    });
+                } else {
+                    map.fitBounds(bounds, {
+                        padding: [50, 50],
+                        maxZoom: 16
+                    });
+                }
                 setShouldZoom(false);
             }
-        }, [coordinates, map, shouldZoom, setShouldZoom]);
+        }, [coordinates, map, shouldZoom, setShouldZoom, zoomDelaySeconds]);
 
         return null;
     };
@@ -616,6 +625,7 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                         coordinates={explorationMarkers.map((marker) => marker.position)}
                         shouldZoom={shouldZoom}
                         setShouldZoom={setShouldZoom}
+                        zoomDelaySeconds={zoomDelaySeconds}
                     />
                     {baseLayer === "satellite" && (
                     <>
@@ -1042,6 +1052,25 @@ const Map = ( { onMapClick, searchQuery, contentType, setSearchQuery, setSubmitt
                             </div>
                         </div>
 
+
+                        <div>
+                            <label style={{ fontWeight: 500, marginBottom: 8, display: 'block' }}>
+                                Zoom Delay (seconds):
+                            </label>
+                            <input
+                                type="range"
+                                min="0"
+                                max="5"
+                                step="1"
+                                value={zoomDelaySeconds}
+                                onChange={(e) => setZoomDelaySeconds(parseInt(e.target.value))}
+                                style={{ width: '100%' }}
+                            />
+                            <div style={{ textAlign: 'center', marginTop: 4 }}>
+                                {zoomDelaySeconds} sec. zoom duration
+                            </div>
+                        </div>
+
                         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                             <input
                                 type="checkbox"