Don't overzoom large (city-sized) POIs

web/frontend/src/components/BaseMap.vue

@@ -251,12 +251,18 @@ export default defineComponent({
         this.$data.flyToLocation = { center: location, zoom: zoom };
       }
     },
-    fitBounds: async function (bounds: LngLatBoundsLike) {
+    fitBounds: async function (
+      bounds: LngLatBoundsLike,
+      options: FitBoundsOptions = {}
+    ) {
       const permissionState = await geolocationPermissionState();
+      const defaultOptions = {
+        padding: Math.min(window.innerWidth, window.innerHeight) / 8,
+      };
+      options = { ...defaultOptions, ...(options || {}) };
+
       if (this.$data.hasGeolocated === true || permissionState !== 'granted') {
-        map?.fitBounds(bounds, {
-          padding: Math.min(window.innerWidth, window.innerHeight) / 8,
-        });
+        map?.fitBounds(bounds, options);
       } else {
         this.$data.boundsToFit = bounds;
       }

web/frontend/src/components/SearchBox.vue

@@ -155,6 +155,7 @@ export default defineComponent({
           address: address,
           key: feature.properties.osm_id,
           position: position,
+          bbox: feature.bbox,
           gid: feature?.properties?.gid,
         });
       }

web/frontend/src/pages/PlacePage.vue

@@ -28,9 +28,19 @@ import SearchBox from 'src/components/SearchBox.vue';
 
 async function loadPlacePage(router: Router, canonicalName: string) {
   const poi = await decanonicalizePoi(canonicalName);
+  if (poi === undefined) {
+    return poi;
+  }
 
-  if (poi?.position) {
+  if (poi.bbox) {
+    // prefer bounds when available so we don't "overzoom" on a large
+    // entity like an entire city.
+    getBaseMap()?.fitBounds(poi.bbox, { maxZoom: 16 });
+  } else if (poi.position) {
     getBaseMap()?.flyTo([poi.position.long, poi.position.lat], 16);
+  }
+
+  if (poi.position) {
     getBaseMap()?.pushMarker(
       'active_marker',
       new Marker({ color: '#111111' }).setLngLat([
@@ -39,8 +49,9 @@ async function loadPlacePage(router: Router, canonicalName: string) {
       ])
     );
     getBaseMap()?.removeMarkersExcept(['active_marker']);
-    return poi;
   }
+
+  return poi;
 }
 
 export default defineComponent({

web/frontend/src/utils/models.ts

@@ -72,6 +72,7 @@ export interface POI {
   name?: string | null;
   address?: string | null;
   position?: LongLat;
+  bbox?: [number, number, number, number];
   gid?: string;
 }
 
@@ -137,6 +138,7 @@ export async function decanonicalizePoi(
         address: address,
         key: feature.properties.osm_id,
         position: position,
+        bbox: feature.bbox,
         gid: feature?.properties?.gid,
       };
     }