add flood raster layer

tsdataclinic · Mar 13, 2024 · 8245cc9 · 8245cc9
1 parent efdce23
commit 8245cc9
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/app/src/components/Filter.tsx b/app/src/components/Filter.tsx
@@ -44,9 +44,9 @@ function Filter({
   return (
     <div
       id="Filter"
-      className="bg-white w-60 h-60 flex flex-col mt-5 mx-auto sm:bottom-16 sm:fixed sm:z-10 sm:right-4 drop-shadow"
+      className="w-60 h-80 flex flex-col justify-between mt-5 mx-auto sm:bottom-16 sm:fixed sm:z-10 sm:right-4 drop-shadow"
     >
-      <div className="grid grid-cols-4 grid-rows-4 h-full p-5">
+      <div className="bg-white grid grid-cols-4 grid-rows-4 h-5/6 p-5">
         <div className="row-span-3">
           <Slider
             value={filters[selectedProperties[0]]}
@@ -73,6 +73,17 @@ function Filter({
           />
         </div>
       </div>
+      <div className="bg-white mt-5 h-1/6 drop-shadow text-xs">
+        <div>FEMA Flood Hazard</div>
+        <div className="flex flex-row justify-start">
+          <span className="inline-block w-[15px] h-[15px] bg-[#808080] border-[1px] border-black"></span>
+          1% chance of exceeding 100-year flood
+        </div>
+        <div className="flex flex-row justify-start">
+        <span className="inline-block w-[15px] h-[15px] bg-white border-[1px] border-black"></span>
+          0.2% chance of exceeding 500-year flood
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/app/src/components/MainPage.tsx b/app/src/components/MainPage.tsx
@@ -84,6 +84,14 @@ const AVAILABLE_LAYERS: Record<string, Layer> = {
     sourceLayer: 'cities-extents',
     isVisible: true,
     hideToggle: true,
+  },
+  '4': {
+    id: 4,
+    layerName: 'FEMA National Flood Hazard Layer',
+    rasterURL: `mapbox://kaushik121.71rs28el`,
+    sourceLayer: 'national_fema_raster_combined-2jbrzb',
+    isVisible: false,
+    hideToggle: false,
   }
 };
 

diff --git a/app/src/components/MapComponent.tsx b/app/src/components/MapComponent.tsx
@@ -118,7 +118,9 @@ function MapComponent({
                   type: slConfig.layerType,
                   source: layer.layerName,
                   'source-layer': layer.sourceLayer,
-                }, 'z-index-1');
+                  minzoom: slConfig.minzoom ? slConfig.minzoom : undefined,
+                  maxzoom: slConfig.maxzoom ? slConfig.maxzoom : undefined,
+                }, 'z-index-2');
               }
               else if (layer.layerURL && layer.layerURL.includes('geojson')) {
                 if (layer.layerName === 'Hospitals') {
@@ -240,7 +242,7 @@ function MapComponent({
 
       Object.values(layers).forEach((layer) => {
         if (map.current && layer.sourceLayer) {
-          map.current.on('mouseenter', layer.sourceLayer, e => {
+          map.current.on('click', layer.sourceLayer, e => {
             if (!map.current) {
               return;
             }

diff --git a/app/src/utils/sourceLayerConfigs.ts b/app/src/utils/sourceLayerConfigs.ts
@@ -158,11 +158,14 @@ export function useSourceLayerConfigs(
           markers: [],
         },
       ],
-      'FEMA Flood Layer': [
+      'FEMA National Flood Hazard Layer': [
         {
-          sourceId: 'national_fema_raster_combined_clipped',
-          layerId: 'national_fema_raster_combined_clipped',
+          sourceId: 'national_fema_raster_combined-2jbrzb',
+          layerId: 'national_fema_raster_combined-2jbrzb',
+          sourceLayer: 'national_fema_raster_combined-2jbrzb',
           layerType: 'raster',
+          minzoom: 7,
+          maxzoom: 20,
           layoutProperties: [],
           paintProperties: [
             // { name: 'fill-color', value: 'rgba(104, 207, 255, .95)' },