@@ -329,10 +204,8 @@ const FloodControlProjectsMap: FC = () => {
/>
- {/* Simplified layout with minimal filters */}
- {/* Page header */}
Flood Control Projects Map
@@ -350,10 +223,8 @@ const FloodControlProjectsMap: FC = () => {
- {/* View Tabs */}
- {/* Hidden InstantSearch for data fetching only */}
{
{/* Map View - separate from InstantSearch to prevent flickering */}
-
{
- if (mapRef.current) {
- mapRef.current.on('zoomend', () => {
- if (mapRef.current) {
- setZoomLevel(mapRef.current.getZoom());
- }
- });
- }
- }}
- >
-
-
-
-
- {project.ProjectDescription || 'Unnamed Project'}
-
-
- Region: {project.Region || 'N/A'}
-
-
- Province: {' '}
- {project.Province || 'N/A'}
-
-
- Municipality: {' '}
- {project.Municipality || 'N/A'}
-
-
- Contractor: {' '}
- {project.Contractor || 'N/A'}
-
-
- Cost: ₱
- {project.ContractCost
- ? Number(project.ContractCost).toLocaleString()
- : 'N/A'}
-
-
- Year: {' '}
- {project.InfraYear || 'N/A'}
-
-
-
- );
- })}
-
-
- {/* Zoom Controls */}
-
-
-
-
-
-
-
+
+
+
{/* Region Details Panel */}
{/* {selectedRegion && (
@@ -569,27 +344,8 @@ const FloodControlProjectsMap: FC = () => {
)} */}
-
{/* Data Source Information */}
-
-
-
- About This Data
-
-
-
- This map displays flood control infrastructure projects across the
- Philippines. Click on a region to filter projects by that area.
- Zoom in to see individual project locations. You can also use the
- filters to narrow down projects by year, type of work, and search
- terms.
-
-
- Source: Department of Public Works and Highways (DPWH) Flood
- Control Information System
-
-
+
diff --git a/src/pages/flood-control-projects/types.ts b/src/pages/flood-control-projects/types.ts
new file mode 100644
index 000000000..af9b4e15f
--- /dev/null
+++ b/src/pages/flood-control-projects/types.ts
@@ -0,0 +1,52 @@
+export interface IFloodControlProject {
+ GlobalID?: string;
+ objectID?: string;
+ ProjectDescription?: string;
+ InfraYear?: string;
+ Region?: string;
+ Province?: string;
+ Municipality?: string;
+ TypeofWork?: string;
+ Contractor?: string;
+ ContractCost?: string;
+ Latitude?: string;
+ Longitude?: string;
+}
+
+export interface IMapFloodSimulationState {
+ simulating: boolean;
+ floodDepth: number;
+}
+
+export interface IRegionData {
+ id: string;
+ name: string;
+ description?: string;
+ population?: string;
+ capital?: string;
+ area?: string;
+ provinces?: string[];
+ wikipedia?: string;
+ loading?: boolean;
+ projectCount?: number;
+ totalCost?: number;
+}
+
+export interface IRegionProperties {
+ name: string;
+ capital?: string;
+ population?: string;
+ provinces?: string[];
+}
+
+export interface IMapboxTileSet {
+ tileSetId: string;
+ sourceLayer: string;
+}
+
+export type TStyle = 'standard' | 'satellite';
+
+export interface IMapStyle {
+ style: TStyle;
+ showRain: boolean;
+}
diff --git a/src/pages/flood-control-projects/utils.ts b/src/pages/flood-control-projects/utils.ts
index 71021cc63..f9180c3b5 100644
--- a/src/pages/flood-control-projects/utils.ts
+++ b/src/pages/flood-control-projects/utils.ts
@@ -1,3 +1,6 @@
+import { FloodYearEnum } from '@/enum/map.enum';
+import { FLOOD_YEAR_CONFIG, HAZARD_BASE } from './constants';
+
// Define types (copied from shared-components.tsx)
export type FilterState = {
InfraYear: string;
@@ -49,3 +52,51 @@ export const buildFilterString = (filters: FilterState): string => {
return filterStrings.join(' AND ');
};
+
+export const mapIdGenerator = () => {
+ const generateFloodYearSourceId = (
+ year: FloodYearEnum,
+ sourceLayer: string
+ ) => `flood-${year}-source-${sourceLayer}`;
+ const generateFloodYearLayerId = (year: FloodYearEnum, sourceLayer: string) =>
+ `flood-${year}-layer-${sourceLayer}`;
+
+ const generateFloodSimulationSourceId = (
+ year: FloodYearEnum,
+ sourceLayer: string
+ ) => `flood-simulation-${year}-source-${sourceLayer}`;
+ const generateFloodSimulationLayerId = (
+ year: FloodYearEnum,
+ sourceLayer: string
+ ) => `flood-simulation-${year}-layer-${sourceLayer}`;
+
+ return {
+ generateFloodYearSourceId,
+ generateFloodYearLayerId,
+ generateFloodSimulationSourceId,
+ generateFloodSimulationLayerId,
+ };
+};
+
+export const getExtrusionHeight = ({
+ floodDepth,
+ floodYear,
+ hazardLevel,
+}: {
+ hazardLevel: number;
+ floodDepth: number;
+ floodYear: FloodYearEnum;
+}) => {
+ const base = HAZARD_BASE[hazardLevel]; // relative ground
+ const { minDepth, maxDepth } = FLOOD_YEAR_CONFIG[floodYear];
+
+ // Map the current floodDepth into the realistic range for this layer
+ // The layer starts appearing when floodDepth >= minDepth
+ if (floodDepth < minDepth) return 0;
+
+ // Cap at maxDepth
+ const effectiveDepth = Math.min(floodDepth, maxDepth);
+
+ // Relative extrusion height for this hazard layer
+ return Math.max(effectiveDepth - base, 0);
+};