Conference PaperPDF Available

INTERACTIVE FLOOD RISK FORECASTING WEB-APPLICATION USING OPENLAYERS API AND JAVASCRIPT

Conference Paper

INTERACTIVE FLOOD RISK FORECASTING WEB-APPLICATION USING OPENLAYERS API AND JAVASCRIPT

Abstract and Figures

Rainfall has always been a factor in every flood occurrences in most, if not all, of the floodplain areas of Caraga Region, Mindanao, Philippines. Apart from its intensity, another parameter that has significant value in assessing flood incidents is the depth and velocity of the flood water. Flooding is the underlying phenomenon that the Phil-LiDAR 1 Project of Caraga State University initiated the development of an interactive web-mapping application that may be used as a tool for flood preparedness. The application was devised as one of many ways to assist the communities and Local Government Units of Caraga Region in making a sound and efficient decision in preventing and alleviating flood risks. The application requires the user to specify parameters, like municipality, barangay, amount of rainfall and to draw a polygon or point on the Web map interface, which will serve as the basis in forecasting flood risks. The application will basically provide flood information such as flood depth, flood duration and recession time and the time interval the flood water reaches the polygon or point drawn. It can also suggest safe route to the nearest evacuation shelter. Map displays and map features were built using the Openlayers API, while the extraction of data, and the flood extent calculations and analysis were JavaScript " s. Scripts retrieve the data from PostgreSQL spatial database and eventually display the tabulated information.
Content may be subject to copyright.
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
INTERACTIVE FLOOD RISK FORECASTING WEB-APPLICATION USING
OPENLAYERS API AND JAVASCRIPT
Edsel Matt O. Morales, Elbert S. Moyon, Jojene R. Santillan and Meriam Makinano-Santillan
CSU Phil-LiDAR 1 Project, Caraga Center for Geo-informatics,
College of Engineering and Information Technology, Caraga State University,
Ampayon, Butuan City, 8600, Philippines,
Email: idsilmat@gmail.com, esmoyon@gmail.com, jrsantillan@carsu.edu.ph, mmsantillan@carsu.edu.ph
KEY WORDS: Flood risk forecasting, Web GIS, OpenLayers API, Javascript
ABSTRACT: Rainfall has always been a factor in every flood occurrences in most, if not all, of the floodplain
areas of Caraga Region, Mindanao, Philippines. Apart from its intensity, another parameter that has significant
value in assessing flood incidents is the depth and velocity of the flood water. Flooding is the underlying
phenomenon that the Phil-LiDAR 1 Project of Caraga State University initiated the development of an interactive
web-mapping application that may be used as a tool for flood preparedness. The application was devised as one of
many ways to assist the communities and Local Government Units of Caraga Region in making a sound and
efficient decision in preventing and alleviating flood risks. The application requires the user to specify parameters,
like municipality, barangay, amount of rainfall and to draw a polygon or point on the Web map interface, which
will serve as the basis in forecasting flood risks. The application will basically provide flood information such as
flood depth, flood duration and recession time and the time interval the flood water reaches the polygon or point
drawn. It can also suggest safe route to the nearest evacuation shelter. Map displays and map features were built
using the Openlayers API, while the extraction of data, and the flood extent calculations and analysis were
JavaScript‟s. Scripts retrieve the data from PostgreSQL spatial database and eventually display the tabulated
information.
1. INTRODUCTION
Every year, the Philippines is frequently visited by several typhoons which brought heavy rains that causes flooding
to the communities on the low-lying areas of the country. In Mindanao, heavy rains brought by tropical storms
Agaton (International name: Lingling) and Seniang (International name: Jangmi) in 2014 caused rivers to overflow
in the cities of Cagayan de Oro, Iligan and Butuan. The Project Nationwide Operational Assessment of Hazards
(Project NOAH, 2016) reported that many houses have been submerged, properties destroyed, and human lives
taken by rampaging waters from the overflowing rivers.
In preventing and alleviating these pronounced damages and devastations caused by flooding, the Local
Government Units (LGUs) in the Philippines have been using flood susceptibility and hazard maps as part of their
flood disaster risk reduction and management activities. Most of the LGUs rely on Mines and Geosciences Bureau
(MGB) flood susceptibility maps (http://gdis.denr.gov.ph/mgbgoogle), and the flood hazard maps generated
through the Project NOAH and displayed in its website (http://noah.dost.gov.ph; Lagmay, 2012) and the flood maps
generated through the Disaster Risk and Exposure for Mitigation (UP DREAM)/Phil-LIDAR 1 program (UP
DREAM, 2016). However, these hazard maps are static and only represent specific flooding scenarios and their use
for localized flood disaster (e.g., in careful planning and preparation of evacuation strategies), may be limited.
In view of these, the Phil-LiDAR 1 project of Caraga State University (Makinano-Santillan and Santillan, 2015),
initiated the development of flood event early warning tool. It is a web application that aims to:
- Present flood hazard information of a particular locality. These includes the flood water velocity (how fast
the flood water can travel toward a certain location), arrival (time the flood water can finally reach a
specific location), depth (the deepness of the flood water), duration (how lengthy is the flooding event, in
time), recession (time the flood water totally retreat).
- Display location of nearest and safest possible evacuation shelters. Most common evacuation shelters are
schools, gymnasiums and covered courts.
Using the various rainfall scenario-based flood hazard maps derived through the use of flood model simulation
models, flood information (depth, velocity, duration, arrival and recession time) can be anticipated. Projecting the
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
flood water‟s behavior in a particular local area is the expected outcome of this application. This is beneficial to the
local community and disaster managers as it provides information crucial for making disaster risk reduction
methodologies in reducing the possible risks, if not avoided.
2. THE STUDY AREA
The study area of the application is the
Cabadbaran River Basin (CRB) and the
nearby Pandanon River and Caasinan
River Watersheds. It is located in Agusan
Del Norte, Mindanao, Philippines, with the
total area of 238 km2. These river basins are
some of the areas affected by flooding and
extensive damage in agriculture and
infrastructures due to heavy rains caused by
tropical storms (Agaton and Seniang last
2014), especially the city of Cabadbaran
(Figure 1). These flooding incidents make
the city an ideal site for the development of
the application, and to illustrate how the
application can be useful as an early flood
warning tool.
3. MATERIALS AND METHODS
3.1. Conceptual Basis
The development of the web application
was conceptualized where a user can be able
to get the 24 hour forecasts of the following
flood information from the time the rainfall
started:
- Flood depth in a particular area of
the map.
- Flood water recession time.
- Time interval the flood water
reaches the point or polygon
drawn.
- Suggested safe route to the nearest
evacuation shelter.
In order to access this information, the application requires the user to specify parameters, like municipality,
barangay, rainfall intensity (Light. Moderate, Heavy, Intense, Torrential) and draw a polygon or point on the web
map interface. The point or polygon drawn will then be intersected to the flood hazard map stored in a spatial
database.
Basically, the flood information displayed to the user through the web map interface was acquired through web
server processing. The web proxy will accept the request from the user and then query the flood information from
the spatial database. Such information will then be processed and displayed back to the web map interface in a
tabular form. Figure 2 shows the framework of the above concept.
Figure 1. The test area of application which is the Cabadbaran
River Basin (CRB) and the nearby Pandanon River and Caasinan
River Watersheds in Agusan del Norte, Caraga Region. Map
source: Santillan and Makinano-Santillan (2015).
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
Figure 2 System Framework
3.2. System Development
3.2.1. Flood Information Generation
The flood hazard information was generated by CSU PhilLiDAR 1 Project. The project utilizes various set of
geospatial data (e.g., LiDAR-derived datasets) in the development of flood simulation models. The flood simulation
software used are the Hydrologic Engineering Center Hydrologic Modelling System (HEC HMS) version 3.5 and
the HEC River Analysis System (HEC RAS) version 4.1. Using these modelling tools, scenario-based flood hazard
maps were generated. Each scenario were characterized by flooding caused by rainfall events of varying duration
and intensity (e.g. return periods of 2, 5,10,25,50 and 100 years). These flood hazard maps were stored in a spatial
database (in Information Storage Component).
Flood hazard information generation consisted of analyzing and reconstructing of flooding event. Flood
reconstruction process can be done through developing a hydrologic model of the river and a two-dimensional (2D)
hydraulic model of the main river and its floodplain (e.g., Santillan and Makinano-Santillan, 2015). The purpose of
the hydrologic model was to determine the volume of water coming from the various sub-basins (also called
watersheds) due to rainfall brought by the tropical storms. 2D model is responsible for routing the discharge
hydrograph from the upstream watersheds into the main rivers and floodplains.
3.2.2. Information Storage Component
After series of numerical modeling and processing of LiDAR-derived data, flood hazard maps (with the attributes:
depth, arrival, duration, recession, percent, velocity and geometry) will be generated. This 5x5 meter resolution of
flood map will be stored and loaded into a PostgreSQL (PostGIS) spatial database, capable of holding geospatial
objects (shapefiles). This data storage is configured in a data server with internet connection.
3.2.3. Web Platform
The web platform for the application was built using Bootstrap and JavaScripts frameworks. Bootstrap is
responsible for the system interfaces, modals, popups and displaying of textual information (e.g., anticipated flood
water information of a polygon drawn). The information to be displayed to the user were retrieved from the
PostgreSQL database. JavaScript is for map controls and map interactions and some sort of database interaction,
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
like data sending and retrieval. The web platform has two main functional parts, the web map control and the web
map area.
The web map control allows the user to display flood
forecast according to user specified parameters (e.g.,
rainfall intensity, time the rainfall start, municipality and
barangay). The map will zoom automatically to the
selected municipality or barangay. Rainfall intensity are
based on the PAG-ASA data, Low (< 0.5 m), Moderate
(> 0.5 m and < 5.0 m), and Heavy (> 5.0 m).
The web map uses Open Street Map (OSM) as a base
map layer. The map area displays the flood hazard of
the selected polygon and the forecasted flood hazard
information in a tabular form. Basically, the user will
draw polygon or point on the map and then an
openlayers script will be called to get the geometry of
the polygon. The geometry derived from polygon drawn
will then be converted to GeoJSON file format which
shall be the input for getting the map intersection. To
get the intersection between the polygon drawn and the
flood hazard layer from the PostgreSQL (PostGIS), the
PostGIS query (ST_Intersection) is to be executed. The
results of the query will be forwarded back to
openlayers, to handle the GeoJSON conversion and for
map display. Other attributes of the JSON encoded
polygon will be rendered using the Bootstrap modal and
Java Scripts.
Figure 3 shows the framework of the whole process.
3.2.4. Technologies Used
The following open source technologies were utilized in the development of the interactive flood risk forecasting
web application.
- Bootstrap (http://getbootstrap.com/) a popular HTML, CSS, and JS framework for developing
responsive, mobile first projects on the web.
- OpenStreet Map used as base map of the application.
- JavaScript - a high level, dynamic, unitized, client-side scripting and interpreted programming
language of HTML and the Web.
- Openlayers (http://openlayers.org/) - An open source JavaScript library to load, display and render maps
from multiple sources on web pages.
- PostgreSQL (https://www.postgresql.org/) - a powerful, open source object-relational database system
- PostGIS (http://postgis.net/) is an open source software program that adds support for geographic
objects to the PostgreSQL object-relational database
4. RESULTS
Figure 4 shows the user interface of the application as accessed through a web browser. The black side bar portion
of the page is the map control, while majority of the page is occupied by map area.
To use the application, the user can start by setting the parameters, like municipality, barangay, rainfall intensity
and the type of polygon he likes to draw. After drawing the polygon the extent of the flood enclosed to the polygon
drawn will be displayed (Figure 5).
To view other information of the flood, the user can click the More Details‟ button in the map overlay‟s popup. A
modal form will then appear showing more details of the flood (Figure 6).
Figure 3. Web Platform Framework
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
Figure 4. The web interface of the application, showing the map area and the map control segments.
Figure 5. The web map interface, showing the extent of the flood base from the polygon drawn.
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
Figure 6. The Flood Hazard Information, showing the forecasted time of arrival and recession.
5. CONCLUDING REMARKS
In this paper, we described the development of a localized, interactive flood risk forecasting web-based application.
The application was devised as one of many ways to assist the communities and Local Government Units of Caraga
Region in making a sound and efficient decision in preventing and alleviating flood risks. The application requires
the user to specify parameters, like municipality, barangay, amount of rainfall and to draw a polygon or point on the
Web map interface, which will serve as the basis in forecasting flood risks. The application will basically provide
flood information such as flood depth, flood duration and recession time and the time interval the flood water
reaches the polygon or point drawn. It can also suggest safe route to the nearest evacuation shelter.
At present, the web application is being improved and tested.
ACKNOWLEDGEMENTS
This work is an output of the Caraga State University (CSU) Phil-LiDAR 1.B.14 project under the “Phil-LiDAR 1.
Hazard Mapping of the Philippines using LiDAR” program funded by the Department of Science and Technology
(DOST), and monitored by the Philippine Council for Industry, Energy and Emerging Technology Research and
Development (PCIEERD). We acknowledge the DOST and PCIEERD for the financial and other supports.
REFERENCES
Lagmay, A. M. F., 2012. Disseminating near real-time hazards information and flood maps in the Philippines
through Web-GIS. DOST-Project NOAH Open-File Reports, 1, pp. 28-36.
Makinano-Santillan, M., Santillan, J.R., 2015. Flood hazard mapping of river basins in Caraga Region, Mindanao,
Philippines through the CSU Phil-LiDAR 1 Project. In: 36th Asian Conference on Remote Sensing 2015, Quezon
City, Philippines.
Project NOAH, 2016. Disaster Timeline, Project Nationwide Operational Assessment of Hazards. Retrieved 10
September 2016 from http://blog.noah.dost.gov.ph/category/disaster-timeline/
37th Asian Conference on Remote Sensing 2016, 17-21 October 2016, Colombo, Sri Lanka
Santillan, J., Makinano-Santillan, M., 2015. Analyzing the impacts of tropical storm-induced flooding through
numerical model simulations and geospatial data analysis. In: 36th Asian Conference on Remote Sensing 2015,
Quezon City, Philippines.
Santillan, J. R., Morales, E. M. O., Makinano-Santillan, M., 2015. Flood EViDEns: a web-based application for
near-real time flood event visualization and damage estimations. In: 36th Asian Conference on Remote Sensing
2015, Quezon City, Philippines.
UP DREAM, 2016. The UP DREAM Program, Retrieved 10 September 2016 from
https://dream.upd.edu.ph/about/.
ResearchGate has not been able to resolve any citations for this publication.
Conference Paper
Full-text available
In this paper, we share our activities and recent accomplishments in utilizing high spatial resolution Light Detection and Ranging (LiDAR) datasets and other geospatial datasets and techniques for flood hazard mapping of river basins in Caraga Region, Mindanao, Philippines through the CSU Phil-LiDAR 1 project. CSU Phil-LiDAR 1 is one of several projects under the " Phil-LiDAR1: Hazard Mapping of the Philippines using LiDAR " program initiated and supported by the Department of Science and Technology (DOST). Projects under this program are being implemented nationwide by fifteen (15) higher education institutions (HEIs) for 3 years starting 2014. An extension of the University of the Philippines' Disaster Risk Exposure Assessment for Mitigation (DREAM) program, Phil-LIDAR 1′s purpose is for HEIs to utilize LiDAR datasets to generate flood hazard maps of their assigned project areas which are distributed throughout the Philippines. CSU Phil-LiDAR 1 in particular aims to derive Digital Surface Models (DSMs) and Digital Terrain Models (DTMs) from preprocessed LiDAR data, and to utilize these elevation datasets, together with data gathered from field surveys (cross-sections, bathymetry and hydrology) as inputs in the development of flood models. The flood models are then used to generate flood hazard maps of the river basins and watersheds of Caraga Region. Two of the major outputs of the projects during the first two years of its implementation are 1-m resolution LiDAR DTMs and DSMs of the project areas. From these datasets, we were able to generate a risk exposure database consisting of buildings, roads, bridges and other structures. More importantly, we were able to develop flood models and generate detailed flood hazard maps. The said models were also used to reconstruct recent flooding events in the project areas. Other project outputs include near-real time flood extent mapping and water level forecasting which are useful for flood disaster preparedness, prevention and response.
Conference Paper
Full-text available
The Web-based Near-real Time Flood Event Visualization and Damage Estimations (Flood EViDEns) is an online geo-visualization application developed through the Phil-LiDAR 1 project of Caraga State University. The application is targeted to be utilized by the Local Government Units (LGUs) and communities in the Caraga Region, Mindanao, Philippines to assist them in geospatially informed decision making in times of flood disasters. The application is an amalgamation of web mapping technology, various geospatial datasets including LiDAR-derived elevation and information products, hydro-meteorological data, and flood simulation models to visualize in near-real time the current and possible future extent of flooding and its associated damages to infrastructures. The Flood EViDEns application facilitates the release and utilization of this near-real time flood-related information through a user-friendly front end interface consisting of web map and tables. The application's back-end consists of computers running flood simulation models and geospatial analysis to dynamically produce (in an automated manner) current and future flood extents, and tabulated information on the structures affected by flooding including hazard types. These outputs are forwarded into a PostgreSQL/PostGIS spatial database where it is accessed by the front end interface for web visualization. The information provided by Flood EViDEns is very important especially to the LGUs and the community as it can increase awareness and responsiveness of the public to the impending flood disaster. Providing this kind of information during a heavy rainfall event is useful as it could assist in preparation for evacuation, in easily identifying areas that need immediate action, in identifying areas that should be avoided, and in estimating the severity of damage to people and infrastructure as flooding progresses.
Article
The Philippines being a locus of tropical cyclones, tsunamis, earthquakes and volcanic eruptions, is a hotbed of disasters. These natural hazards inflict loss of lives and costly damage to property. Situated in a region where climate and geophysical tempest is common, the Philippines will inevitably suffer from calamities similar to those experienced recently. With continued development and population growth in hazard prone areas, it is expected that damage to infrastructure and human losses would persist and even rise unless appropriate measures are immediately implemented by government. In 2012, the Philippines launched a responsive program for disaster prevention and mitigation called the Nationwide Operational Assessment of Hazards (Project NOAH), specifically for government warning agencies to be able to provide a 6. hr lead-time warning to vulnerable communities against impending floods and to use advanced technology to enhance current geo-hazard vulnerability maps. To disseminate such critical information to as wide an audience as possible, a Web-GIS using mashups of freely available source codes and application program interface (APIs) was developed and can be found in the URLs http://noah.dost.gov.ph and http://noah.up.edu.ph/. This Web-GIS tool is now heavily used by local government units in the Philippines in their disaster prevention and mitigation efforts and can be replicated in countries that have a proactive approach to address the impacts of natural hazards but lack sufficient funds.
Disaster Timeline, Project Nationwide Operational Assessment of Hazards
  • Noah Project
Project NOAH, 2016. Disaster Timeline, Project Nationwide Operational Assessment of Hazards. Retrieved 10 September 2016 from http://blog.noah.dost.gov.ph/category/disaster-timeline/
The UP DREAM Program
UP DREAM, 2016. The UP DREAM Program, Retrieved 10 September 2016 from https://dream.upd.edu.ph/about/.
Analyzing the impacts of tropical storm-induced flooding through numerical model simulations and geospatial data analysis
  • J Santillan
  • M Makinano-Santillan
Santillan, J., Makinano-Santillan, M., 2015. Analyzing the impacts of tropical storm-induced flooding through numerical model simulations and geospatial data analysis. In: 36th Asian Conference on Remote Sensing 2015, Quezon City, Philippines.