Merge pull request #161 from michaelkirk/mkirk/poi-zooms-to-bounds

Don't overzoom large (city-sized) POIs
headwaymaps · Sep 19, 2022 · b02eace · b02eace
2 parents 8af6758 + 5bb8bd5
commit b02eace
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/web/frontend/src/components/BaseMap.vue b/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;
       }

diff --git a/web/frontend/src/components/SearchBox.vue b/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,
         });
       }

diff --git a/web/frontend/src/pages/PlacePage.vue b/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({

diff --git a/web/frontend/src/utils/models.ts b/web/frontend/src/utils/models.ts
@@ -1,5 +1,5 @@
 import addressFormatter from '@fragaria/address-formatter';
-import {} from 'maplibre-gl';
+import { LngLatBoundsLike } from 'maplibre-gl';
 import { i18n } from 'src/i18n/lang';
 import { LongLat } from './geomath';
 
@@ -72,6 +72,7 @@ export interface POI {
   name?: string | null;
   address?: string | null;
   position?: LongLat;
+  bbox?: LngLatBoundsLike;
   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,
       };
     }