From df336b87acf4aa6f3de1f63265ad5623ddfbf2b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 11 Mar 2026 17:51:26 +0400
Subject: [PATCH] Smart auto zoom for search/select

---
 app/components/map.gjs | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/components/map.gjs b/app/components/map.gjs
index d5fff05..996a3b0 100644
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -530,13 +530,22 @@ export default class MapComponent extends Component {
       padding: padding,
       duration: 1000,
       easing: (t) => t * (2 - t),
-      maxZoom: currentZoom,
+      maxZoom: Math.max(currentZoom, 18),
     });
   }
 
   handlePinVisibility(coords) {
     if (!this.mapInstance) return;
 
+    const view = this.mapInstance.getView();
+    const currentZoom = view.getZoom();
+
+    // If too far out (e.g. world view), zoom in to neighborhood level (16)
+    if (currentZoom < 16) {
+      this.animateToSmartCenter(coords, 16);
+      return;
+    }
+
     const pixel = this.mapInstance.getPixelFromCoordinate(coords);
     const size = this.mapInstance.getSize();
 
@@ -555,12 +564,17 @@ export default class MapComponent extends Component {
     }
   }
 
-  animateToSmartCenter(coords) {
+  animateToSmartCenter(coords, zoom = null) {
     if (!this.mapInstance) return;
 
     const size = this.mapInstance.getSize();
     const view = this.mapInstance.getView();
-    const resolution = view.getResolution();
+    let resolution = view.getResolution();
+
+    if (zoom !== null) {
+      resolution = view.getResolutionForZoom(zoom);
+    }
+
     let targetCenter = coords;
 
     // Check if mobile (width <= 768px matches CSS)
@@ -582,11 +596,17 @@ export default class MapComponent extends Component {
       targetCenter = [coords[0], coords[1] - offsetMapUnits];
     }
 
-    view.animate({
+    const animationOptions = {
       center: targetCenter,
       duration: 1000,
       easing: (t) => t * (2 - t), // Ease-out
-    });
+    };
+
+    if (zoom !== null) {
+      animationOptions.zoom = zoom;
+    }
+
+    view.animate(animationOptions);
   }
 
   panIfObscured(coords) {