From c5e7a94b383e8baa643e49e8e579283b3c7154e2 Mon Sep 17 00:00:00 2001
From: Indraneel Purohit <indraneel.purohit@twosigma.com>
Date: Thu, 14 Mar 2024 11:20:00 -0400
Subject: [PATCH] color fema raster layer

---
 app/src/components/Filter.tsx       |  4 ++--
 app/src/utils/sourceLayerConfigs.ts | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/src/components/Filter.tsx b/app/src/components/Filter.tsx
index bb59f0d..ce5ad2f 100644
--- a/app/src/components/Filter.tsx
+++ b/app/src/components/Filter.tsx
@@ -76,11 +76,11 @@ function Filter({
       <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>
+          <span className={`inline-block w-[15px] h-[15px] bg-[#52dfff] 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>
+        <span className={`inline-block w-[15px] h-[15px] bg-[#d4f7ff] border-[1px] border-black`}></span>
           0.2% chance of exceeding 500-year flood
         </div>
       </div>
diff --git a/app/src/utils/sourceLayerConfigs.ts b/app/src/utils/sourceLayerConfigs.ts
index 0abbcb1..abc057d 100644
--- a/app/src/utils/sourceLayerConfigs.ts
+++ b/app/src/utils/sourceLayerConfigs.ts
@@ -11,6 +11,9 @@ export enum COLORS {
   'darkgreen' = 'rgba(100,165,189,1)',
   'mediumgreen' = 'rgba(150,195,196,1)',
   'lightgreen' = 'rgba(210,237,242,1)',
+  'darkblue' = 'rgba(0,150,184,1)',
+  'mediumblue' = 'rgba(82, 223, 255,1)',
+  'lightblue' = 'rgba(212, 247, 255,1)',
 }
 
 export type SLConfigType = {
@@ -168,7 +171,14 @@ export function useSourceLayerConfigs(
           maxzoom: 20,
           layoutProperties: [],
           paintProperties: [
-            // { name: 'fill-color', value: 'rgba(104, 207, 255, .95)' },
+            { name: 'raster-color', value: [
+              'case',
+              ['==', ['raster-value'], 0],
+              `${COLORS.mediumblue}`,
+              ['==', ['raster-value'], 1],
+              `${COLORS.lightblue}`,
+              `${COLORS.mediumblue}`,
+            ]},
           ],
           markers: [],
         },