add higher level zoom view

tsdataclinic · Mar 5, 2024 · 33b6619 · 33b6619
1 parent 9b3b10e
commit 33b6619
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 183 deletions.
diff --git a/app/backend/main.py b/app/backend/main.py
@@ -244,6 +244,35 @@ async def download_city_data(msa_id: str):
   response.headers["Content-Disposition"] = f"attachment; filename="+filename+""
   return response
 
+@app.get("/cities-extents.geojson")
+async def get_cities_extents():
+  connection = app.state.db_pool.getconn()
+  cursor = connection.cursor()
+
+  extent_query = f"""
+    SELECT
+      jsonb_build_object(
+      'type', 'FeatureCollection',
+      'features', jsonb_agg(feature)
+      ) AS geojson
+    FROM (
+      SELECT
+      jsonb_build_object(
+        'type', 'Feature',
+        'geometry', ST_AsGeoJSON(ST_Buffer(public.cities.geometry::geography, 24000)::geometry, 4326)::jsonb,
+        'properties', jsonb_build_object('msa_id', public.cities.msa_id, 'msa_name', public.cities.msa_name)
+      ) AS feature
+      FROM public.cities
+      GROUP BY public.cities.geometry, public.cities.msa_id, public.cities.msa_name
+    ) AS features;
+  """
+
+  cursor.execute(extent_query)
+  fc = cursor.fetchall()[0][0]
+  cursor.close()
+  app.state.db_pool.putconn(connection)
+  return fc
+
 @app.get("/cities")
 async def get_all_cities():
   connection = app.state.db_pool.getconn()
@@ -262,7 +291,7 @@ async def get_all_cities():
   cities = [{
     'msa_id': r[0],
     'msa_name': r[1],
-    'center': r[2],
+    'center': r[2]
   } for r in cursor.fetchall()]
   cursor.close()
   app.state.db_pool.putconn(connection)

diff --git a/app/src/components/MainPage.tsx b/app/src/components/MainPage.tsx
@@ -3,11 +3,7 @@ import ContextPane from './ContextPane';
 import RouteSummaryPane from './RouteSidebar';
 import Filter from './Filter';
 import MapComponent from './MapComponent';
-import {
-  useRemoteLayers,
-} from '../hooks/useRemoteLayer';
 import { useSourceLayerConfigs } from '../utils/sourceLayerConfigs';
-import { useRouteSummary } from '../hooks/useRouteSummary';
 import * as Fathom from "fathom-client";
 import { Cities } from '../libs/cities';
 import { CityRecord, useAvailableCities } from '../hooks/useAvailableCities';
@@ -80,6 +76,14 @@ const AVAILABLE_LAYERS: Record<string, Layer> = {
     sourceLayer: 'hospitals_new',
     isVisible: true,
     hideToggle: false,
+  },
+  '3': {
+    id: 3,
+    layerName: 'City Extents',
+    layerURL: `${BACKEND_URI}/cities-extents.geojson`,
+    sourceLayer: 'cities-extents',
+    isVisible: true,
+    hideToggle: true,
   }
 };
 
@@ -225,7 +229,7 @@ export default function MainPage(): JSX.Element {
       <MapComponent
         center={availableCities && availableCities.find((region) => region.msa_id === selectedCity?.msa_id)?.center}
         layers={layers}
-        // remoteLayers={remoteLayers}
+        setSelectedCity={setSelectedCity}
         sourceLayerConfigs={sourceLayerConfigs}
         setDetailedRoutes={setDetailedRoutes}
         selectedCity={selectedCity}

diff --git a/app/src/components/MapComponent.tsx b/app/src/components/MapComponent.tsx
@@ -15,6 +15,7 @@ type MapProps = {
   remoteLayers?: Array<RemoteLayer>;
   sourceLayerConfigs: Record<string, any>;
   selectedCity: CityRecord;
+  setSelectedCity: React.Dispatch<React.SetStateAction<CityRecord>>;
   previousSelectedCity?: CityRecord;
   center?: [number, number];
   bounds?: [[number, number], [number, number]]
@@ -25,6 +26,7 @@ function MapComponent({
   layers,
   sourceLayerConfigs,
   selectedCity,
+  setSelectedCity,
   previousSelectedCity,
   center,
   bounds,
@@ -74,9 +76,10 @@ function MapComponent({
             });
           }
           else if (layer.layerURL && layer.layerURL.includes('geojson')) {
-            // map.current.addSource(layer.layerName, {
-            //   type: 'geojson',
-            // });
+            map.current.addSource(layer.layerName, {
+              type: 'geojson',
+              data: layer.layerURL
+            });
           } else if (layer.layerURL && layer.layerURL.includes('mapbox://')) {
             map.current.addSource(layer.layerName, {
               type: 'vector',
@@ -105,6 +108,8 @@ function MapComponent({
                   type: slConfig.layerType,
                   source: layer.layerName,
                   'source-layer': layer.sourceLayer,
+                  minzoom: slConfig.minzoom ? slConfig.minzoom : undefined,
+                  maxzoom: slConfig.maxzoom ? slConfig.maxzoom : undefined,
                 }, 'z-index-1');
               }
               else if (layer.rasterURL) {
@@ -127,6 +132,8 @@ function MapComponent({
                     id: slConfig.layerId,
                     type: slConfig.layerType,
                     source: layer.layerName,
+                    minzoom: slConfig.minzoom ? slConfig.minzoom : undefined,
+                    maxzoom: slConfig.maxzoom ? slConfig.maxzoom : undefined,
                   }, 'z-index-1');
                 }
               } else {
@@ -237,14 +244,6 @@ function MapComponent({
             if (!map.current) {
               return;
             }
-            const HOSPITALS_TOOLTIP_ZOOM_THRESHOLD = 5;
-            const STOPS_TOOLTIP_ZOOM_THRESHOLD = 7;
-            if (layer.layerName === 'Transit Stops' && map.current.getZoom() < STOPS_TOOLTIP_ZOOM_THRESHOLD) {
-              return;
-            }
-            if (layer.layerName === 'Hospitals' && map.current.getZoom() < HOSPITALS_TOOLTIP_ZOOM_THRESHOLD) {
-              return;
-            }
             const layerNames = Object.values(layers).map(l => l.layerName);
             const features = map.current
               .queryRenderedFeatures(e.point)
@@ -269,22 +268,42 @@ function MapComponent({
                   .addTo(map.current);
               }
           });
+          map.current.on('click', e => {
+            if (!map.current) {
+              return;
+            }
+
+            const layerNames = ['City Extents'];
+            const features = map.current
+              .queryRenderedFeatures(e.point)
+              .filter(f => layerNames.includes(f.source));
+              if (features.length > 0) {
+                const feature = features[0];
+                if (feature.properties) {
+                  setSelectedCity({
+                    ...feature.properties.msa_id,
+                    center: [e.lngLat.lng, e.lngLat.lat]
+                  })
+                  map.current.flyTo({
+                    center: [e.lngLat.lng, e.lngLat.lat],
+                    zoom: 10.5
+                  });
+                }
+              }
+          });
         }
       })
 
 
     }
-  }, [layers, paintLayer, previousSelectedCity, selectedCity, setDetailedRoutes]);
+  }, [layers, paintLayer, previousSelectedCity, selectedCity, setDetailedRoutes, setSelectedCity]);
 
   useEffect(() => {
     if (map.current) {
       if (center) { 
         map.current.setZoom(10.5);
         map.current.setCenter(center);
       }
-      // if (bounds) {
-      //   map.current.fitBounds(bounds);
-      // }
     }
   }, [center]);
 

diff --git a/app/src/components/Tooltip.tsx b/app/src/components/Tooltip.tsx
@@ -81,16 +81,16 @@ function Tooltip({ feature, onDismiss, setDetailedRoutes }: Props): JSX.Element
     // render empty div if there are no properties
     return <div />;
   }
-  // debugger;
 
   return (
     <div id={`tooltip-${id}`} className="relative w-72 px-4 py-2">
       {/* show hospital or flooding details if there's a FEATURE_CLASS, Flooding_Category, Class property in the data */}
-      {properties['FEATURE_CLASS'] || properties['FEATURE_NAME'] || properties['Flooding_Category'] || properties['CLASS'] ? 
+      {properties['FEATURE_CLASS'] || properties['FEATURE_NAME'] || properties['Flooding_Category'] || properties['CLASS'] || properties['msa_name'] ? 
         <div>
           {properties['FEATURE_NAME'] && <h3 className="font-bold text-base pb-2">{properties['FEATURE_NAME']}</h3> }
           {properties['Flooding_Category'] && <h3 className="font-bold text-base pb-2">{properties['Flooding_Category']}</h3> }
           {properties['CLASS'] && <h3 className="font-bold text-base pb-2">{properties['CLASS']}</h3> }
+          {properties['msa_name'] && <h3 className="font-bold text-base pb-2">{properties['msa_name']}</h3> }
           <button
             onClick={onDismiss}
             className="absolute text-base font-xl -top-2.5 -right-2.5 hover:bg-slate-200 w-6 cursor-pointer transition-colors pb-0.5"