zoom into map where most markers are

ui/src/views/listings/Map.jsx

@@ -8,7 +8,7 @@ import { renderToString } from 'react-dom/server';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useSelector, useActions } from '../../services/state/store.js';
-import { distanceMeters, generateCircleCoords, getBoundsFromCenter } from './mapUtils.js';
+import { distanceMeters, generateCircleCoords, getBoundsFromCenter, getBoundsFromCoords } from './mapUtils.js';
 import { Select, Space, Typography, Button, Popover, Divider, Switch, Banner, Toast } from '@douyinfe/semi-ui-19';
 import { IconFilter, IconLink } from '@douyinfe/semi-icons';
 import { IconDelete } from '@douyinfe/semi-icons';
@@ -248,8 +248,9 @@ export default function MapView() {
   }, [jobId]);
 
   useEffect(() => {
-    if (!map.current || !homeAddress?.coords) return;
+    if (!map.current) return;
 
+    if (homeAddress?.coords) {
       // We only want to zoom/fly when distanceFilter OR homeAddress actually change,
       // not on every render. useEffect dependency array handles this.
       if (distanceFilter > 0) {
@@ -267,7 +268,22 @@ export default function MapView() {
           duration: 1000,
         });
       }
-  }, [homeAddress?.address, distanceFilter]);
+    } else {
+      const filtered = filterListings();
+      const coords = filtered
+        .filter((l) => l.latitude != null && l.longitude != null && l.latitude !== -1 && l.longitude !== -1)
+        .map((l) => [l.longitude, l.latitude]);
+
+      if (coords.length > 0) {
+        const bounds = getBoundsFromCoords(coords);
+        map.current.fitBounds(bounds, {
+          padding: 50,
+          maxZoom: 15,
+          duration: 1000,
+        });
+      }
+    }
+  }, [homeAddress?.address, distanceFilter, listings]);
 
   useEffect(() => {
     if (!map.current) return;

ui/src/views/listings/mapUtils.js

@@ -97,3 +97,34 @@ export const getBoundsFromCenter = (center, radiusInKm, padding = 0.15) => {
     [lng + offsetLng, lat + offsetLat],
   ];
 };
+
+/**
+ * Calculates the bounding box for a set of coordinates.
+ *
+ * @param {number[][]} coords - Array of [longitude, latitude] coordinates
+ * @param {number} [padding=0.1] - Padding to add to the bounds
+ * @returns {number[][]} Bounding box coordinates [[minLon, minLat], [maxLon, maxLat]]
+ */
+export const getBoundsFromCoords = (coords, padding = 0.1) => {
+  if (!coords || coords.length === 0) return null;
+
+  let minLng = Infinity;
+  let minLat = Infinity;
+  let maxLng = -Infinity;
+  let maxLat = -Infinity;
+
+  coords.forEach(([lng, lat]) => {
+    if (lng < minLng) minLng = lng;
+    if (lng > maxLng) maxLng = lng;
+    if (lat < minLat) minLat = lat;
+    if (lat > maxLat) maxLat = lat;
+  });
+
+  const lngDiff = maxLng - minLng;
+  const latDiff = maxLat - minLat;
+
+  return [
+    [minLng - lngDiff * padding, minLat - latDiff * padding],
+    [maxLng + lngDiff * padding, maxLat + latDiff * padding],
+  ];
+};