diff --git a/app/src/components/Filter.tsx b/app/src/components/Filter.tsx
index 842a217..bb59f0d 100644
--- a/app/src/components/Filter.tsx
+++ b/app/src/components/Filter.tsx
@@ -44,9 +44,9 @@ function Filter({
return (
-
+
+
+
FEMA Flood Hazard
+
+
+ 1% chance of exceeding 100-year flood
+
+
+
+ 0.2% chance of exceeding 500-year flood
+
+
);
}
diff --git a/app/src/components/MainPage.tsx b/app/src/components/MainPage.tsx
index a659ec1..8503a7b 100644
--- a/app/src/components/MainPage.tsx
+++ b/app/src/components/MainPage.tsx
@@ -84,6 +84,14 @@ const AVAILABLE_LAYERS: Record
= {
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
index 45baa6d..b325e84 100644
--- 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
index 674cca9..3654e44 100644
--- 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)' },