refactor: convert flood control map to mapbox and added simple flood simulation with 5, 25 and 100 year flood data

[chryzxc]

Description
This PR refactors the existing flood control map from Leaflet to Mapbox GL JS and adds new data and features:

• Converted the map from Leaflet to Mapbox for better 3D visualization and NOAH tilesets compatibility.
• Added Project NOAH flood data: 5-Year, 25-Year, and 100-Year flood datasets.
• Added a flood depth simulation feature using DEM + Project NOAH tilesets with Mapbox extrusion height to visualize flood levels dynamically.

Environment Changes
Added new Mapbox access token in .env:

VITE_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here or you can use project noah access token that is exposed on their website.

Screenshots
Before

After

Data Reference

• NOAH Studio Flood Hazard Tilesets
  • 5-Year Flood: upri-noah.ph_fh_5yr_tls
  • 25-Year Flood: upri-noah.ph_fh_25yr_tls
  • 100-Year Flood: upri-noah.ph_fh_100yr_tls

Notes

• Flood depth increases periodically in the simulation to represent rising water levels.
• The 3D extrusion reflects hazard levels: low, medium, high.
• Only areas with available flood data will be visualized; the rest of the map remains unaffected.

[jasontorres]

Good work here! Any chance we can apply this to https://bisto.ph?

[chryzxc]

Good work here! Any chance we can apply this to https://bisto.ph?

yep, but there would be limits if we're going to overlay the datasets from mapbox to google maps and since we are just using vector tiles from project noah, adding colors or applying styles in the map to visualize hazard levels is not possible

[jasontorres]

Btw, I still want this integrated. Will find time soon to get this sorted.