Flood Web Map

A Simple Tool to Visualize Floods Online

I'm starting a three-step project to assess real-time flood risk in a specific area, aiming to make the results easy to access and share online. Each phase—estimating the flood hydrograph, running a flood simulation, and finally publishing the outcome on the web—plays a key role in this effort.

My education and experience as a hydraulic engineer have equipped me with skills in flood estimation and hydrodynamic modeling. However, I had never learned JavaScript programming before. Precisely for that reason, I decided to start with the last step: creating a web application that enables anyone to visualize and explore a flood event directly in their web browser; no installation required.

In this post, I present a simple example of the process using a simulation of a flood on the Navisence River in Zinal, Switzerland. The entire simulation is hosted on GitHub, completely free, and can be opened via a browser without any local software. I used Iber (a free hydrodynamic solver) to generate the flood simulation raster outputs, and Leaflet (an open-source mapping library) with some of its plugins (Leaflet.TimeDimension, Leaflet.draw, Leaflet.measure) to animate and display the results. There is no need to install any software since I used CDNs to load all the necessary libraries. (In short, a CDN, or Content Delivery Network, is a system of servers distributed across the internet that quickly delivers content—like JavaScript files—so you don’t have to install or host them locally.)

Not all web map tools are the same, and each of them offers different tools. My primary challenge was finding one that ensured that the raster results rendered smoothly and efficiently, highlighting only the water pixels while maintaining a simple and straightforward process. There are numerous methods to achieve this, but I discovered this particular approach to be relatively simple, allowing me to grasp it in just a few days. If anyone knows a better or more efficient method, I'm all ears!

Basic Flood Visualizer Web Map 

This interactive web map visualizes time-evolving flood simulations with high-resolution spatial data. Built with Leaflet, it offers a range of tools for analysis and exploration, including:

• Time Slider: View flood evolution over time.

• Measurement Tool: Calculate distances and areas.

• Drawing Tool: Create and save custom shapes in GeoJSON format.

• Multiple Basemaps: Switch between OpenStreetMap, SwissTopo, CartoDB, and more.

• Layer Control: Toggle animation layers and overlays for customized views.

Future developments for this visualizer may involve adding flood risk maps as GeoJSON layers and integrating inputs from other software, like HEC-RAS.

Future Steps

My goal is to develop an online tool that forecasts floods in real time based on rainfall data. This requires a real-time model that predicts river discharge using rainfall, temperature, and other site-specific parameters. Additionally, I want to run flood simulations online for the forecasted discharge and display the results in real time.

To achieve this, I need a way to host and automate the execution of hydraulic models like Iber, HEC-RAS, or similar software online. The system should automatically run simulations every 8 hours (or another set interval) whenever new forecast data are available. This will ensure that the flood simulation and its corresponding animation are continuously updated with the latest predictions.

So far, I found a  real-time JavaScript solver that could be useful. Iber can be automated as well. Both ideas are possible solutions for real-time online simulations.