Key Aspects of the Streamflow Forecast App
1. Interactive Reach Selection and Data Retrieval
The application provides multiple ways for users to select river reaches:
- Clicking on a reach polygon on the map triggers a popup that enables the retrieval of forecast data for that specific reach using a button.
- Dropdown menus on the left sidebar allow users to select reaches from a list in a convenient way.
- The user has the options to select a forecasting window from multiple options short-range, medium-range, or long-range without even clicking the submit button.
- When a reach is selected, the application makes a request to the NOAA Water Prediction Service API to retrieve streamflow forecast data. The user is not required to know what parameters are required since required ones are pre-specified.
- The API request includes parameters to specify the reach ID and forecast type (short-range, medium-range, or long-range).
2. Data Processing and Visualization
- The retrieved forecast data is processed to extract timestamps and streamflow values. The data is then displayed in two formats:
- A tabular format, showing the timestamps and corresponding streamflow values.
- A line chart, generated using Chart.js, visualizing the streamflow data over time. The chart includes:
- Mean streamflow values,
- Ensemble member streamflow values (for long-range forecasts),
- Horizontal lines representing flood return periods (e.g., 2-year, 10-year floods) if falls within around half the streamflow range, and
- A horizontal line representing the drought threshold if falls around half the streamflow range. The drought threshold values were computed for each of the nine reaches through offline analysis using the 80th-percentile method suggested in: Sutanto, Samuel J., and Henny AJ Van Lanen. "Streamflow drought: implication of drought definitions and its application for drought forecasting." Hydrology and Earth System Sciences 25.7 (2021): 3991-4023.
- The chart and table are dynamically updated based on the selected reach and forecast type.
- The application fetches reach specific data from a json file stored on Hydroshare. This data includes the return period flood levels, and the drought threshold.
3. Flood and Drought Assessment
- The application compares the forecasted streamflow values with predefined flood return periods and drought thresholds.
- Based on this comparison, it determines whether flood or drought conditions are present.
- The application displays messages to inform users of the current conditions:
- "Flood Condition Prevails" if the forecasted streamflow exceeds a flood return period.
- "Drought Condition Prevails" if the forecasted streamflow falls below the drought threshold.
- "Safe and Sound Condition" if neither flood nor drought conditions are present.
4. Map Initialization and Layer Management
- The application starts by initializing a Leaflet map object, setting the center coordinates and zoom level to focus in such a manner that the view covers all nine reaches.
- It adds an OpenStreetMap tile layer for the base map, providing a familiar geographic context.
- A Web Map Service (WMS) layer from a HydroShare GeoServer is used to display state boundaries. This layer allows for dynamic rendering of geographic data.
- The user can toggle the state polygon layer on and off enabling the user to match geometry with the basemap
- The application dynamically changes the map view to focus on the selected reach.
- The user can change the state polygon layer to different states just by clicking on the state name from the sidebar.
5. User Interface and Interactivity
- The application features a user-friendly interface with dropdown menus, buttons, and informational displays.
- Dropdown menus allow users to select forecast types and river reaches.
- Buttons trigger data retrieval and display.
- Informational displays provide feedback on the current conditions and forecast data.
- The application dynamically changes the map view to focus on the selected reach.
- The application displays error messages if data retrieval fails.
- The application uses javascript to manipulate the DOM, and to control the visibility of various HTML elements.
- The application uses event listeners to respond to user interactions.
6. Data Sources and Technologies
- NOAA Water Prediction Service API: Provides real-time streamflow forecast data. (Learn more about NWM)
- HydroShare GeoServer: Hosts hydrogeographic data, including state boundary polygons as shapefiles, river reach geometries as GeoJSON, and reach specific information as JSON files.
- Leaflet.js library: Used for map display and interaction.
- Chart.js library: Used for generating line charts.
- JavaScript: Used for application logic, workflow, and data processing.
- HTML and CSS: Used for the user interface.
Created JavaScript Functions
manageDropdowns()
NWMResultsExtractor(reachID, forecastType)
extractForecastOnClick (element, reachID)
extractForecastOnChange (forecastType)
loadGeoJsonDefault(reach)
loadGeoJsonOnClick(filePath)
removeAnchorStyles(outerDivId)
bglayerMapper(stateName)
toggleBGLayer()