A Comprehensive Web-based System for Flood Inundation Map Generation and Comparative Analysis Based on Height Above Nearest Drainage

It is critical to obtain accurate flood extent predictions in a timely manner in order to reduce flood-related casualties and economic losses. Running a real-time flood inundation mapping model is a critical step in supporting quick flood response decisions. Most inundation systems, on the other hand, are either overly demanding in terms of data and computing power or have limited interaction and customization with various input and model configurations. This paper describes a client-side web-based real-time inundation mapping system based on the Height Above the Nearest Drainage (HAND) model. The system includes tools for hydro-conditioning terrain data, modifying terrain data, custom inundation mapping, online model performance evaluation, and hydro-spatial analyses. Instead of only being able to work on a few preprocessed datasets, the system is ready to run in any region of the world with limited data needs (i.e., elevation). With the system's multi-depth inundation mapping approach, we can use water depth measurements (sensor-based or crowdsourced) or model predictions to generate more accurate and realistic flood inundation maps based on current or future conditions. All of the system's functions can be performed entirely through a client-side web browser, without the need for GIS software or server-side computing. For decision-makers and the general public with limited technical backgrounds, the system provides a one-stop, easy-to-use flood inundation modeling and analysis tool.


Introduction
Flooding has been one of human history's most devastating natural disasters. Floods, like many other natural disasters, are caused not only by natural processes but also by human activities. Floods can be exacerbated by paved roads and hardened surfaces (Nardi et al., 2018), poor artificial channel and drainage system designs (X. Yazdanfar & Sharma, 2015), and a variety of other anthropogenic factors. Changes in precipitation as a result of climate change may also increase flood risk in the future (Huong & Pathirana, 2011;Mahmoud & Gan, 2018).
In order to understand and mitigate floods, hydrologic modeling approaches have been developed and improved over the years (Teng et al., 2017). Traditional modeling approaches, on the other hand, can take weeks or even months to complete  and require extensive datasets (Ebert-Uphoff et al., 2017) and detailed parameter sets that are sometimes only available after a flood event (Musser et al., 2016). As a result, inundation maps generated using traditional methods, with the exception of those for floods with specific return periods, were more retrospective than predictive for a long time due to limitations in data collection techniques and computational capacity. For example, the official report and flood inundation maps for the 2015 floods in South Carolina were released 4 months after the event by the bringing as many components together as possible to create a comprehensive system that combines onthe-fly terrain data modification for mitigation or land-use changes, hydro-conditioning of terrain data, custom flood inundation mapping, real-time model evaluation, and hydro-spatial analyzing. Because it provides fast, flexible, and accurate flood inundation predictions, as well as various evaluation and analysis functions, the system will benefit both professionals and the general public. Furthermore, it is not as demanding as many other modeling frameworks in terms of the device on which the system is run or the relevant knowledge required to use it. Rennó et al. (2008) first proposed the HAND model as a topographic descriptor for terrain classification based on soil water conditions. The elevation difference between the grid cell under consideration and the nearest drainage point to which it drains is the value of each grid cell in the HAND matrix. The lower the value, the closer the grid cell is to the perpetually flooded areas. Because of its ability to reflect the drainage potential of each grid cell, low input requirements, and ease of implementation on GIS platforms, the HAND model was quickly adopted in flood inundation modeling, not only for indicating flood-prone areas, but also for replicating historical flooding events (McGrath et al., 2018;Nobre et al., 2016;Speckhann et al., 2018) and comparison with approved reference flood maps (Afshari et al., 2018;Zheng et al., 2018). Previous comparison studies have shown that HAND model flood extent predictions are comparable to those of other models such as HEC-RAS, AutoRoute (Afshari et al., 2018), Planar plane, and Inclined plane (McGrath et al., 2018).

Methodology 2.1. Overview of the HAND Model and the Applications
HAND has also been widely used for flood risk assessment (de Lollo et al., 2019), probabilistic floodplain maps generation (Jafarzadegan & Merwade, 2019), and DEM-based river geometer and rating curve estimation . All of the above-mentioned works, however, used GIS platforms or other professional software. Tarboton (2003) implemented one of the most well-designed HAND-based terrain analysis tools-TauDEM, a collection of toolsets for Digital Elevation Model (DEM) analysis that works as a plugin toolbox with ArcGIS software. Although TauDEM contains many functions that aid in HAND raster calculation, general users lack both professional skills and software access to process the files. Furthermore, the other way to run TauDEM, which is to use Command Line Functions, is even more difficult for inexperienced computer users. The existing web-based versions of the HAND model, however, rely on server-side computations, precomputed HAND models, or offer limited customization, as discussed in the previous section. Most of them are unable to take advantage of rapidly emerging data sources or meet needs other than generating an inundation map in compliance with the HAND's standard procedure.
The system introduced in this study contributes to the existing tools in the following aspects: a) Data level flexibility for professional and non-professional users: The system integrates with GISbased server-side elevation datasets to leverage existing elevation data services. The system supports custom dataset integration for professional users who want to run HAND in their own areas rather than the pre-defined regions. They can make the system work on their own study areas by simply feeding in the data and a few descriptive parameters. b) Online model performance evaluation and adjustment: Because HAND is a simplified geomorphic approach, it has far fewer parameters than most hydrologic and hydraulic models. Calibration is still necessary, however, if users want a map with high accuracy. The system contains a function for comparing the HAND map and the reference. The procedure is straightforward and self-explanatory.
Users can keep adjusting the parameters based on the evaluations until the results are satisfactory for their use case and data availability. c) Functions for hydro-spatial analysis and data export: A common issue with existing web-based HAND models is that they are only designed to generate an inundation extent using pre-processed data and ignore all other valuable coproducts such as flow directions. We fully exploit these byproducts by developing a number of tools for geospatial analysis. The system allows for the export of flood maps as well as a variety of supporting data and results in Esri ASCII raster format, which can be easily converted into raster or plain text files. d) Multi-depth flood inundation mapping and flood mitigation functions: The HAND normally requires a single water depth value to calculate the flood extent. However, it is reasonable to support inundation extent mapping using multiple depths because data (i.e., water depth values) in addition to official measurements are becoming more readily available to the public on social media during flood events. And, as discussed in the previous section, those data are growing fast in rapid response applications against floods. Therefore, multi-depth inundation mapping is not only an academic improvement for the HAND model, but it will also improve flood extent predictions based on actual inundation. e) Terrain modification for mitigation and land-use changes: The system provides flood mitigation functions for users to build experimental levees and reservoirs and investigate their effects on flood extent. This module provides users with a free intuitive understanding of how to control inundation and can be used as a supplement tool for decision-makers and local communities.

Web Application Development
From frontend to backend, the real-time inundation mapping system is made up of three major layers: the Communication Layer, the Analysis Layer, and the Data Layer. The system's structure is depicted in Figure 1. The Data Layer is where all data exchanges take place, including data retrieval from the server, script communication, and data export. The Analysis Layer is the system's core layer, where all modeling and mathematical calculations are performed using JavaScript. The Communication Layer is in charge of system-user interaction. A web server is used to run the system on a web environment based on PHP, HTML, and CSS. The system's functional components are built with JavaScript and Google Maps API, with key functions optimized with Web Workers API. After assembling all of the elements and layers, the system functions like any other web page and works in common browsers like Google Chrome.

Data Layer
The HAND model requires only elevation data, a drainage threshold, and water depth values to calculate the extent of inundation. The elevation is the only data to be fed to this layer. In the absence of custom elevation data, the system will use pre-stored data from a GeoServer. Along with the elevation data, the server stores reference maps for users to use when evaluating the model's performance. Notably, the reference map is required only if the user wishes to conduct performance evaluations; it is not required for the system to generate inundation maps. Both the elevation and reference are in raster format and can automatically adjust the display scope and grid size based on user inputs via resampling approaches. The elevation data on the server is a 1-meter product generated by the state of Iowa's LiDAR program using the Zone 15 UTM projection, the NAD83 horizontal datum, and the NAVD 88 vertical datum. We predefined five different data resolutions for users to choose from-1 m, 5 m, 10 m, 25 m, and 50 m. The system's default reference flood maps are floodplain mapping products derived from the Iowa Flood Center's statewide flood modeling and mapping project. These reference maps were created using HEC-GeoRAS and 1m-resolution LiDAR data to correspond to flood events that occurred over a period of 2, 5, 10, 25, 50, 100, 200, and 500 years (Gilles et al., 2012). We integrated 100-and 500-year floodplain maps into the system, pre-processing them to match the scope and projection of the elevation data.
When users choose to use their own dataset, they will enter a link to the grid elevation data (i.e., a link to the file stored on could storage) and data descriptors such as the data's row and column numbers, resolution, unit in the z (vertical) direction, and coordinates, etc. A reference map is also required if the model's performance is to be evaluated. By connecting to a corresponding data repository, the system can work with a variety of elevation data types, including bare earth and elevation with buildings, as well as a variety of reference flood extent maps.
The Data Layer's final component is the Data Export function, which exports intermediate and final products in response to user requests. Users can download accumulating area matrix, depth matrix, flow direction matrix, the HAND raster, and stream order matrix from this component. All data is stored in the Esri ASCII raster format, which includes header information describing the image's properties (geological location, resolution, pixel numbers in latitude and longitude directions, and so on). The Esri ASCII file format is compatible with any GIS software, such as ArcGIS and QGIS, as well as any text editor, such as Notepad. Additionally, it easily converts to other raster formats, including TIFF and plain text files.

Analysis Layer
The Analysis Layer is the functional core of the system, performing the majority of the system's calculations. The layer is composed of five functional modules: HAND Map generation, Hydro-Spatial Function generation, Multi-Depth Inundation generation, Mitigation generation, and Performance Evaluation generation. The HAND model's workflow is depicted in Figure 2.
The Hand Map Generation module takes inputs to setup the HAND model and generate inundation extent maps. The first calculation step in this module is hydro-conditioning elevation data to remove artificial pits and flats and to create a hydrologically coherent DEM (Nobre et al., 2011;Rennó et al., 2008). Detailed descriptions of the DEM-conditioning algorithms can be found in papers by Barnes et al. (2014), Jenson and Domingue (1988), Lindsay and Creed (2005), Martz andGarbrecht (1998), andRieger (1998). The system then determines the direction of flow for each grid cell in the cleaned elevation raster.
We chose the 8 algorithm in this case due to its accuracy and computational efficiency. A grid cell's flow direction is determined in the 8 by comparing its elevation to the elevations of its adjacent eight grid cells (two horizontal, two vertical, and four diagonal points) (Holmgren, 1994;Mark, 1984). The accumulating area value for each grid cell is then calculated based on the flow directions. Although the accumulating area value refers to the upstream area that the cell under examination drains, it is frequently converted to the number of grid cells in the upstream area when performing HAND calculations. Following that, grid cells with an accumulating area value greater than a predefined threshold are considered mainstream points (Mark, 1984;Tarboton, 1997). These points constitute the simulated river network, with their HAND values set to 0, indicating that they have no drainage potential due to their location at the "lowest" point along the drainage channel. The HAND value of each non-mainstream grid is calculated by subtracting the elevation of the mainstream point to which it drains from its original elevation. After calculating the HAND value for each grid, the extent of inundation is determined by comparing it to a specified water depth. If the HAND value of a grid cell is greater than the water depth, the cell is dry (not inundated). Otherwise, it will be flooded. Readers may refer to Nobre et al. (2011) and Rennó et al. (2008) for a detailed introduction about the HAND methodology. The Hydro-Spatial Function module takes advantage of the two major coproducts of the HAND calculation processes, namely the flow direction and accumulating area matrices benefitted from functions for Strahler stream order calculation and watershed/flow path delineation This module generates a stream order matrix and denotes watersheds and flow paths according to the direction of the flow. Stream order is a useful byproduct of the flow direction matrix. Previous research has established its utility in a variety of contexts, including hydrogeomorphic floodplain mapping (Annis et al., 2019), ecological status evaluation (Büttner et al., 2020), investigation of fish beta diversity (Zbinden & Matthews, 2017). Watershed and flow path delineation functions can be used to visually inspect the grid cells' connectivity. Additionally, the watershed delineation aids in determining the appropriate locations for custom water depths to be used in multi-depth inundation mapping. By visualizing the drainage area, we can ensure that the location chosen contains the area for which we want to change the water depth, avoiding trial and error.
The Multi-Depth Inundation module is based on the direction of flow and accumulating area matrixes. This function enables users to specify water depths at specific locations where water depth measurements or estimations are available. For example, where there are USGS stream gages, different water depth values will be set, and the depth values will be determined based on USGS measurements collected there. However, as discussed previously, it is equally valuable to use crowd-sourced data collected by the public during a real-world flooding event, where the data does not have to come from USGS gages. The system is not constrained in terms of where or how many locations users may choose to apply a different water depth value, as long as the grid cell is in the simulated drainage network. Otherwise, the change will have a limited impact than users might anticipate as there are not as many upstream cells drained by a non-drainage pixel. This function is accomplished in the following manner: The process begins by obtaining input depths at user-defined locations; the system then determines which upstream grid cells drain to the current point based on flow directions; finally, the custom drainage pixel's upstream grid cells' water depths are replaced with the new water depth. The system is designed to determine whether those custom drainage pixels are upstream or downstream of one another in order to apply the correct depth to the appropriate pixels. Upstream pixels will only share the same water depth with the drainage pixel immediately adjacent to them that has been assigned a different depth. For example, if a group of upstream pixels lies between drainage pixels A and B, and A is further upstream than B, then that group of upstream pixels will be controlled solely by the depth assigned to A. Section 3 illustrates by an example how priority is identified to user-defined locations.
The Mitigation Function module enables users to examine the effect of levees and reservoirs on the extent of local flooding. The effects of levees and reservoirs are simulated by varying the elevation of grid cells that are surrounded by the levee or reservoir region. Elevations are increased in the levee region to prevent water from passing through, whereas a reservoir works in the opposite manner.
The Performance Evaluation module compares the flood extent indicated by the HAND model to the extent indicated by reference maps on a pixel-by-pixel basis. Due to the fact that a pixel can be either inundated or dry on both maps, we used the two-by-two Error Matrix (Foody, 2010;Levine & Wilks, 2000) or Confusion Matrix (Provost, 1998) to represent the status of a prediction (Figure 3). Additionally, we used the Proportion Correct (PC), Kappa index (K), and Fitness-statistic (F) to quantify how accurate the flood extent prediction is mathematically in comparison to reference maps (Foody, 2010;Wilks, 2011). PC denotes the proportion of correct predictions made by the model to all predictions made by the model (Eq. 1). PC values range from 0 to 1, with 1 indicating that all predictions are correct.
K and F are two complementary indices that are used to assess the consistency of model predictions with reference maps (Afshari et al., 2018;Yu & Lane, 2006). K is biased toward non-inundated grids and is less informative when the number of correct non-inundation predictions is significantly greater than the number of correct inundation predictions (Afshari et al., 2018). Therefore, F is used in conjunction with K to reduce bias in the results, as F places a higher premium on accurate inundation predictions. Equations 2 and 3 are used to calculate K and F, respectively. Both indices have the optimal value of one. The worst possible value for F is 0, whereas the worst possible value for K can be negative. Users will be presented with both a visual representation of the comparison and the mathematical indices by the system.

Communication Layer
The Communication Layer is where information between users and the system is transformed. It accepts user input and returns the results and/or images to the users. Our system's rapid computation enables users to adjust inputs repeatedly until they are satisfied with the results without reloading the webpage. The real-time mapping system's interface is powered by Google Maps and web technologies (HTML, CSS, JS Libraries, and Canvas). Another noteworthy feature of the system is the ability to create inner zones, which enables users to draw smaller regions within the original study area. This feature is particularly beneficial for eliminating errors that occur around the calculation boundary as a result of the drainage area accumulation being cut off by the artificial boundaries. When only a small portion of the upstream area a stream pixel drains is contained within the study region, the cutoff will incorrectly exclude this pixel from the drainage network, resulting in occasional underestimation. By defining an inner-zone, one can perform the calculation over a slightly larger area while evaluating performance only for the inside area, where the effect of the artificial boundary is negligible. Figure 4. System workflow and usage procedure

System Workflow
The system's technical procedure and workflow are depicted in Figure 4. The process begins with the initialization of the model. In the simplest case, users can bypass all of the optional steps illustrated in orange boxes and proceed directly to Result visualization and data export. Alternatively, they can use these tools to aid in the execution of a more complex analysis. It's worth noting that there are no arrows connecting those orange modules, indicating that the optional functions are self-contained and require no application sequence. Additionally, each module's output is visualized and exported independently, which means that users are not required to complete all other processes in order to obtain the output from a particular step.

Results and Discussions
Through a series of case studies and examples, we will demonstrate how each function block of the system works in this section. The use of default server data was demonstrated in an area covering approximately 400 km 2 near Iowa City, while the use of a custom dataset was demonstrated in a HUC 12 sub-watershed (#101702040804). Figure 5 shows the interface of the system where Linn, Muscatine, Johnson, Jones, and Cedar counties in Iowa are selected for server data demonstration. In the top-right corner under the title "Realtime Map System", clicking on each of the small icons (from left to right) will unfold the panels for Area Definition, HAND Model Setup, Result Evaluation, Terrain Modification, Hydro-Spatial Analysis, and Data Export, respectively.

Server-based GIS Dataset Selection
When using the default dataset, users will first activate the drop-down lists and small buttons by clicking on the Server Data button on the Area Definition panel. They then select the data resolution, the size of the study area, and the type of elevation data. Users will determine the location interactively by dragging and repositioning the area layer around in the interface. Figure 6 depicts a 400 km 2 study area near Iowa City created using the server dataset. Figure 6. The 400 km 2 study area (a) near Iowa City, the (b) corresponding 10-m resolution DEM fetched from the server, and the (c) settings in the system As illustrated in Figure 6 (c), we obtained a bare-earth DEM for the area with a resolution of 10 meters and a size of 20 kilometers by 20 kilometers. The system quantifies the size of the study area by the number of grid cells it encompasses. Users can either select a square region with side lengths ranging from 1,000 to 5,000 pixels or a custom rectangle with a maximum number of pixels of 25 million for optimal computation time. After clicking the Area button, the screen will display a transparent square or rectangle box for users to drag and drop. After positioning the box correctly, users can load the study area's elevation data by clicking on the Data button. The button with two small arrows independently controls (shows/hides) each layer.

User-Defined Dataset Selection
For using the custom dataset, in addition to the data itself, a few metadata items are needed so that the system can put the data to the correct location. The metadata includes the number of pixels in the horizontal (longitude) and vertical (latitude) directions, the image resolution, the image's vertical unit, the coordinates of the image's southwest and northeast corners, and a link to the images' cloud storage. The custom study area for a HUC 12 sub-watershed (#101702040804) and its setting in the system are depicted in Figure 7. As with the default dataset, this procedure begins by clicking the User Data button. When users hover over the blue text, an information box appears informing them of the type of information and format required. The image factors establish a linear relationship between the elevation image's pixels of various gray scales and their real-world elevation values. The relationship is not consistent across elevation datasets. A simple way to obtain it is to apply the Minimum-Maximum stretch function to the original elevation in GIS software and manually calculate the linear equation.

Flood Map Generation and Analysis
On the HAND Model Setup panel, users need to enter the drainage threshold for the accumulating area and a water depth value. To initialize the HAND model calculations, a default drainage threshold of 4.0 km 2 and a global water depth are provided. Thresholds of approximately 4.0 km 2 have been tested in several regions and were found to be quite effective (Nobre et al., 2016;Hu and Demir, 2021), and are N N thus used as the default value when users are unsure which value to test first. Both parameters may be modified by users based on their expertise or through trial and error. The unit of water depth should be consistent with the vertical unit of elevation data. It is specified in feet for the default dataset but can be specified in feet or meters for a custom dataset. Both the Create and Redraw buttons create HAND inundation maps. Create works for the initial calculation or when the threshold is changed, requiring an update to the HAND raster. When only the water depth is altered, redrawing works. Due to the fact that the application scenarios using the server and custom dataset are identical except for the dataset selection step discussed previously, we will demonstrate all other functions and modules for the study area depicted in Figure 6 to avoid redundancy. Figure 8 depicts the study area's inundation map with a 4 km 2 threshold and 20 feet of water depth.
Users could create an animation of a series of inundation maps by using the buttons at the bottom of the panel. The water depth of those maps varies between 5 and 25 feet or meters, depending on the DEM's vertical unit. The maps are displayed automatically with a 0.4-second interval between them and can also be viewed individually by using the forward and backward buttons. The extent of HAND inundation is depicted in Figure 9, along with a 100-year reference floodplain map and performance evaluation. Similar to the area definition panel, when users hover over those mathematical indices (TP, FN, and PC, etc.), explanatory texts will appear. Figure 9. Inundation extent of the (a) 100-year reference map in deep purple and the HAND in dark green, (b) comparison between these two extents where TP/TN means being inundated/not inundated on both maps, FP means being inundated on HAND map but not on the reference, and FN means the opposite to FP.

Multi-Depth Inundation Mapping and Inner Zone Creation
Although satisfactory results have been reported using the standard inundation extent mapping based on HAND, in which a single water depth value is applied to the entire study area (McGrath et al., 2018;Nobre et al., 2016), we believe it is necessary to incorporate the multi-depth mapping function into our system because it will not only improve prediction accuracy but also facilitate data assimilation by utilizing crowdsourced observations and simulations from other models. In our case, as illustrated in Figure 9, while the model correctly predicted inundation states for the majority of pixels, significant overestimation (False-Positive) occurs along river channels, which indicates that the water depth value used in the simulation is too large. Figure 10 illustrates the multi-depth inundation extent evaluation using the identical model settings as in Figure 9 for the same region. The depth values of upstream grids were updated when the depth value at a drainage point was changed. The initial depth value, 20 ft in our case, entered on the HAND Model Setup panel will control all grid cells that are not drained by any of the custom points.
In comparison to the results in Figure 9, the multi-depth approach significantly improves performance by removing a large portion of the original map's overestimations. Additionally, Figure 10 illustrates instances in which the custom drainage points are located upstream or downstream of one another. Due to the yellow cross's upstream to the pink cross, the depths of pixels within the orange circle (circle I) will be updated by the yellow cross's depth. Similarly, pixels within the gray circle (circle II) will be controlled exclusively by the pink cross, not the more downstream blue cross. As shown in Figure 10, there are some underestimates near the upper boundary that were not significantly altered by the multidepth approach. These are the results of the artificial boundaries' forced cutoff, as discussed in Section 2.2.3. An inner zone was established to eliminate such errors. The inner zone's location and associated performance evaluation are depicted in Figure 11. Figure 10. Performance evaluation for the multi-depth approach with five custom water depths marked by crosses. Figure 11. (a) Inner-zone creation and (b) new comparison results where the orange cross was used to simulate the effect of the most bottom blue cross on Figure 10 that is outside of the inner zone As illustrated in Figure 11 (a), users can edit the inner zone by adding vertices and repositioning existing vertices. Although the multiple-depth approach and inner-zone creation can improve prediction performance, we recommend that they be used in accordance with established practices in the literature, such as taking geomorphic characteristics and stream orders into account in studies of actual flood events.
The objective of this study is to demonstrate the utility of the system we developed, and therefore we adopted a few locations and values of custom water depths for case study purposes and represented an arbitrary inner zone. Additionally, the inner zone should be considered solely for the purpose of eliminating errors caused by artificial boundaries. To address internal mismatches, either adjusting model parameters or employing a multi-depth approach should be considered.

Hydro-Spatial Analysis Functions
The Hydro-Spatial Analysis panel includes functions for stream order calculation, watershed delineation, and flow path delineation. These functions are applied after the HAND processes because they are based on the flow directions generated during the HAND calculation. The stream orders are calculated dynamically and visualized on a separate map layer, as illustrated in Figure 12 (a). The system can then filter out lower orders and display only the higher ones based on user demand, as illustrated in Figure  12 (b). Users activate the delineation functions by clicking on any points of interest within the study area. Figure 13 depicts the delineation of the water flow path and drainage area.

Data Export
The accumulating area, depth, flow direction, HAND matrix, and stream order data are all available for download in Esri ASCII raster format. This format is compatible with GIS applications such as ArcGIS and QGIS, as well as text editing applications such as the Notepad included with the Windows operating system. Figure 14 illustrates a depth file that has been downloaded from the system. As illustrated in Figure 14, the file contains both header and data information. ncols and nrows are the width and height of the grid cells, respectively. xllcorner and yllcorner denote the X-and Y-coordinates of the origin (as defined by the image's lower-left corner) in the WSG-84 projection. Because the Esri ASCII raster format does not support including projection information within the file, it makes no difference when loading the data into GIS software to use different values for xllcorner and yllcorner. However, the WGS-84 coordinates facilitate geo-spatial processes such as Georeferencing and Define Projection. The file name contains three major components: the data type (in this case, water depth); the value; and the depth unit (20.0 feet in this case). The letter p in between represents the dot), which is only applicable to depth files because other data does not change with depth; and the date and time the data was downloaded, which are used to differentiate between files with the same data type. Figure 14. Screenshot of a depth file generated and downloaded from the system

Conclusions
We presented a client-side, interactive web-based flood inundation mapping system based on the HAND model in this study. In comparison to other web-based inundation mapping systems in the literature, our system not only generates and visualizes inundation maps entirely on the client-side, but also offers significant flexibility to meet the needs of diverse users and perform well on complex datasets via functions such as online model performance evaluation, hydro-spatial analyses, and custom data analysis. The multi-depth inundation mapping approach proposed in this study not only improves prediction accuracy in comparison to the conventional single-depth approach but also allows for the incorporation of other model predictions and rapidly growing crowd-sourced data collected during floods.