color fema raster layer

tsdataclinic · Mar 14, 2024 · c5e7a94 · c5e7a94
1 parent 70e10ce
commit c5e7a94
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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: [],
  },