🌧️ FloodGuard: Flood Simulation Tool (Proof of Concept)

FloodGuard is a web-based Proof of Concept (PoC) tool designed to visualize potential flood risks using open-source geospatial data and weather forecasting APIs. It demonstrates how location, rainfall, and simplified flood simulation can be integrated to provide a conceptual flood risk visualization for a specific area.

⚠️ Disclaimer: This tool uses free and open-source data.
The results are NOT intended for real-world flood warning, property assessment, or safety decisions.
Accuracy is limited due to data resolution and simplified modeling. Always rely on official government warnings and local emergency services.

---

Features

1. Location Input

   • Search by city name (e.g., Badulla, Colombo)
   • Use live GPS location
   • Click on the map to select an area

2. 2D Flood Visualization

   • Interactive Leaflet.js map with OpenTopoMap terrain
   • Dynamic 1km-radius flood polygon around the selected location
   • Flood level visualized based on simulated risk

3. Flood Risk Visualizer

   • Real-time flood percentage indicator (0–100%)
   • Flood level represented in meters
   • Color-coded risk levels: Low, Moderate, High, Critical

4. 5-Day Flood Prediction Table

   • Forecast of rainfall and flood levels
   • Risk warnings for each day
   • Easy-to-read table format

5. Interactive Timeline

   • Slider to view flood risk and rainfall for different days
   • Dynamic updates for map and flood visualizer

---

How It Works

The simulation integrates three main components:

1. Location Input & Map

   • Uses Leaflet.js and OpenStreetMap/OpenTopoMap for interactive mapping.
   • Users can define their area of interest via search, GPS, or map click.

2. Rainfall Data

   • Fetched from the Open-Meteo API, providing past 5 days and 5-day forecast precipitation data.

3. Flood Simulation

   • Simplified flood risk percentage based on total daily rainfall.
   • Simulated low-lying flood-prone area using a dynamic GeoJSON polygon.
   • Flood risk visualization updates in real-time using a color-coded gradient and table.

The visualization is conceptual and not based on real elevation data. It is intended for demonstration purposes only.

---

Tech Stack

• Frontend: HTML, CSS, JavaScript
• Map & Visualization: Leaflet.js, OpenTopoMap
• API: Open-Meteo for rainfall data
• Deployment: Static web page (no backend required)

---

Usage

1. Open index.html in a browser.
2. Choose a location:
   • Enter a city in the search box and click Search
   • Click Use My Location (GPS)
   • Click directly on the map
3. Observe:
   • 2D flood visualization on the map
   • Flood Risk Visualizer (percentage & meters)
   • 5-day rainfall forecast and risk warnings
4. Use the timeline slider to explore flood risks for upcoming days.

---

Future Enhancements

• Integrate real-time elevation and terrain data for more accurate flood modeling
• Add flood shelter guidance and evacuation routes
• Enable mobile notifications for areas at high risk
• Improve visualization with 3D terrain models or Cesium.js integration
• Add logistics planning for flood response scenarios

---

Developer

• Janitha Heshan
  LinkedIn

---

License

This project is open-source and provided as a PoC. Use responsibly for educational or demonstration purposes only.