Conference PaperPDF Available

NEAR-REAL TIME RAINFALL MONITORING IN THE CARAGA REGION, MINDANAO, PHILIPPINES USING OPENLAYERS API AND JAVASCRIPT

Conference Paper

NEAR-REAL TIME RAINFALL MONITORING IN THE CARAGA REGION, MINDANAO, PHILIPPINES USING OPENLAYERS API AND JAVASCRIPT

Abstract and Figures

We developed an online tool for near-real time monitoring of rainfall intensity and accumulated rainfall in various localities in the Caraga Region, Mindanao, Philippines. The web map interface was built using Openlayers API where the locations of all rain gauge stations installed by ASTI DOST are plotted. For each station, a JavaScript is used to extract and analyze 24-hour rainfall data from the ASTI DOST. Based on extracted data, the current rainfall intensity at each rain gauge location is plotted on the web map according to a color scheme that signifies no rainfall, light, moderate, heavy, intense, and torrential rainfall intensities. Clicking on the points of a rain gauge will also show a graph of the rainfall intensities and accumulated rainfall in the last 24 hours. The application is available at http://rainmonitoring.csulidar1.ccgeo.info which can be utilized by Local Government Units (LGUs) and residents of Caraga Region, for rapid rainfall monitoring and as a tool for flood disaster preparedness.
Content may be subject to copyright.
NEAR-REAL TIME RAINFALL MONITORING IN THE CARAGA REGION,
MINDANAO, PHILIPPINES USING OPENLAYERS API AND JAVASCRIPT
Edsel Matt O. Morales, Jojene R. Santillan and Meriam Makinano-Santillan
CSU Phil-LiDAR 1, College of Engineering and Information Technology, Caraga State University, Ampayon,
Butuan City, 8600, Philippines,
Email: idsilmat@gmail.com
KEY WORDS: rainfall monitoring, Caraga Region, flood early warning, OpenLayers API, Javascript
ABSTRACT: We developed an online tool for near-real time monitoring of rainfall intensity and accumulated
rainfall in various localities in the Caraga Region, Mindanao, Philippines. The web map interface was built
using Openlayers API where the locations of all rain gauge stations installed by ASTI DOST are plotted. For
each station, a JavaScript is used to extract and analyze 24-hour rainfall data from the ASTI DOST. Based on
extracted data, the current rainfall intensity at each rain gauge location is plotted on the web map according to a
color scheme that signifies no rainfall, light, moderate, heavy, intense, and torrential rainfall intensities. Clicking
on the points of a rain gauge will also show a graph of the rainfall intensities and accumulated rainfall in the last
24 hours. The application is available at http://rainmonitoring.csulidar1.ccgeo.info which can be utilized by
Local Government Units (LGUs) and residents of Caraga Region, for rapid rainfall monitoring and as a tool for
flood disaster preparedness.
1. INTRODUCTION
Near-real time rainfall monitoring is an important activity that must be undertaken especially in flood-prone
areas. Determining how much rain has fallen in the last few hours, including its current intensity can aid disaster
managers, Local Government Units (LGUs) and the communities in determining whether flooding is expected
in the next hours, and how severe it will be if it will occur. In large river basins, information on the volume and
intensity of rain falling in the mountains that are upstream of a river can be utilized as inputs into numerical
simulations models to predict if this volume and intensity can increase water levels in the downstream portion
(i.e., floodplains), cause overflowing of the river, and inundate the nearby communities. In this respect, access to
updated rainfall information can be considered as a flood disaster early warning system. If we are able to
determine the rainfall intensity and accumulated rainfall volume in near-real time, it will be great tool to
anticipate the severity of the upcoming flood event and possibly avoid casualties.
In the Philippines, the Project Nationwide Operational Assessment of Hazards (NOAH) website at
http://noah.dost.gov.ph has been providing near-real time rainfall information (among several sets of
information including water level) in various localities (Lagmay, 2012). Through a web map interface, users can
access latest rainfall information by selecting a rain gauge location. Once clicked, a graph will pop-up showing a
time series plot of the rainfall depth (in mm) for the last 24 hours. The use is also informed on how intense the
rainfall is because the timer series plot is overlaid on a color-code background indicating rainfall intensity
classification (e.g., light, moderate, heavy, intense, and torrential). Rainfall information displayed in Project
NOAH is extracted in near-real time from data recorded by rain gauges installed by the Advanced Science and
Technology Institute of the Department of Science and Technology (ASTI DOST) in various locations
throughout the country. Aside from Project NOAH, rainfall (and other hydrometeorological information) are
also available through the Philippine Real-time Environment Data Acquisition and Interpretation for Climate-
Related Tragedy Prevention and Mitigation (PREDICT; http://fmon.asti.dost.gov.ph/weather/predict/), a
nationwide system that is meant to complement the existing observation capability of the Philippine
Atmospheric, Geophysical and Astronomical Services Administration (PAGASA).
Although the rainfall information provided by Project NOAH and PREDICT is sufficient for the purpose of
rainfall monitoring, the manner at which information is being displayed takes time and needs examination and
analysis from the end-user. For example, the current rainfall intensity can only be determined once the user has
clicked on the rain gauge location and examine the graph. Also, some relevant information is lacking such as the
total accumulated rainfall depth in the last 24 hours. By the also getting this information (aside from the rainfall
depth), the users can be more informed of how intense and how much rain has been falling in their localities.
Moreover, the nationwide coverage of Project NOAH sometimes limits the rapid access of rainfall information
of a specific area since there is a need to focus and zoom-in the map to a desired area. For disaster managers and
LGUs, rapid access to rainfall information to their area of concern is important.
2677
36th Asian Conference on Remote Sensing 2015 (ACRS 2015), Quezon City, Philippines, Volume 4, pp. 2677-2682, 2015
In this paper, we prepared a site-specific online near-real time rainfall monitoring system for the Caraga Region,
Mindanao, Philippines. The system uses web-accessible data recorded by ASTI DOST rain gauges installed in
Caraga Region (Figure 1), and was primarily designed to provide the necessary rainfall information such as its
intensity and the accumulated rainfall in the last 24 hours in a graphical representation for rapid monitoring and
as a tool for flood disaster preparedness. The development of the system is based on OpenLayers and
JavasScript technologies.
Figure 1. The rain gauge stations installed in Caraga Region by ASTI DOST
2. MATERIALS AND METHODS
2.1 Conceptual Basis
The conceptual basis for the development of the Caraga Region Near-Real Time Online Rainfall Monitoring is
the need to rapidly access the following information:
2678
36th Asian Conference on Remote Sensing 2015 (ACRS 2015), Quezon City, Philippines, Volume 4, pp. 2677-2682, 2015
The current (latest) rainfall intensity in a particular location
The time series of rainfall intensity in the last 24 hours
The accumulated rainfall depth in the last 24 hours
In order to access this information, a user must first have access to a web map interface where he/she can view
the various locations of rain gauges, with each rain gauge color-coded according to how intense the current
rainfall is. The user will then click a specific rain gauge location, and make a request to display the time series
plot of rainfall intensities and accumulated rainfall in the last 24 hours. From the graph, the user can further
examine it to display in detail the rainfall intensity and accumulated rainfall values.
The framework for the above concept is technically illustrated in Figure 2. Essentially, the user‟s need for the
information through the web map interface is handled on the background as a request that is processed by a web
proxy. This web proxy then access the rainfall data server‟s application programming interface (API) to extract
the rainfall information needed by the user. The data server‟s API will then give a readable response which is
then interpreted by the web map interface, generates a graph, and display this to the user.
Figure 2. Conceptual Framework
2.2 System Development
2.2.1 Rainfall Data Access: We utilize the publicly-available API of ASTI DOST
(http://fmon.asti.dost.gov.ph/home/index.php/api/data/) for rainfall data extraction. In the Caraga Region, there
were 58 rainfall stations (as shown previously in Figure 1), and each station has unique identification (ID)
number. This ID number is supplied to the API to extract rainfall data in JavaScript Object Notation (JSON)
format.
The rainfall data access was done using JavaScript and through a web proxy. Instead of directly requesting the
data from the server (e.g. direct access to the JSON file), web proxy was utilized to act as an intermediary every
time the application takes request from the server. It will add Cross-origin Resource Sharing (CORS) header to
the response so that the web map application can process it. CORS is a mechanism that allows restricted
2679
36th Asian Conference on Remote Sensing 2015 (ACRS 2015), Quezon City, Philippines, Volume 4, pp. 2677-2682, 2015
resources (e.g. JavaScript, etc.) on a web page to be requested from another domain outside the domain from
which the resource originated.
Figure 3 shows the flow in acquiring the data from the ASTI DOST data server. For each rainfall station, the
rainfall data is in mm, and is recorded every 15 minutes. The extracted data is then multiplied by 4 to convert
into intensity (mm/hr). The computed values are then used as the basis to identify the current rainfall intensity at
each rain gauge station according to an official color scheme adopted by PAGASA (Official Gazette, 2015) that
signifies no rainfall (0 mm/hr), light (< 10 mm/hr), moderate (>2.5mm/hr, ≤7.5mm/hr), heavy (<7.5mm/hr,
≥15mm/hr), intense(>15mm/hr, ≤30mm/hr), torrential(>30mm/hr), and in some cases no data.
Figure 3. Flow in acquiring data from the server
2.2.2 Technologies Used
The following technologies were used in the development of the online near-real time rainfall monitoring
system:
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, untyped, client-side scripting and interpreted programming
language of HTML and the Web.
Openlayers (http://openlayers.org/) - An opensource JavaScript library to load, display and render maps
from multiple sources on web pages.
Highcharts (http://www.highcharts.com/) - interactive JavaScript charts for web pages. This was used
to generate the graphs/time series plots of rainfall intensity and accumulated rainfall
Web Proxy (CORS Anywhere) - a NodeJS proxy which adds CORS headers to the proxied request.
3. RESULTS
The Caraga Region Near-real time Rainfall Monitoring System is available at
http://rainmonitoring.csulidar1.ccgeo.info. Alternatively, it can be accessed at http://tinyurl.com/csulidar1v2.
Once accessed, the user will be provided with a web map interface as shown in Figure 4. On page load, rain
gauge stations (points) will be individually plotted and rendered using Openlayers API according to its location
(latitude and longitude). The user can easily see if it is raining in a certain locality as the rain gauge locations are
colorized by its current rainfall intensity. Additionally, the user will be informed also if the rain gauge station is
not providing rainfall data. Currently, there are 58 stations present in Caraga Region.
An example time series plot of rainfall intensity and accumulated rainfall when a user click on a rain gauge
location is shown in Figure 5. The user can see the rainfall records for the last 24 or more hours by hovering the
2680
36th Asian Conference on Remote Sensing 2015 (ACRS 2015), Quezon City, Philippines, Volume 4, pp. 2677-2682, 2015
mouse on the plots. Other necessary information such as date and time the maximum rainfall intensity occurred
is also shown in the graph.
Figure 4. Rain gauge station with its current rainfall intensity (August 27, 2015 11:30 AM)
Figure 5. Example time series plot of rainfall intensity and accumulated rainfall for the „Caraga State
University‟ rainfall station.
2681
36th Asian Conference on Remote Sensing 2015 (ACRS 2015), Quezon City, Philippines, Volume 4, pp. 2677-2682, 2015
4. CONCLUDING REMARKS
In this paper, we presented the development of an online application for near-real time rainfall monitoring in
Caraga Region. The application is capable of generating graph based on the rainfall data acquired from the
sensors installed by ASTI DOST.
The application can be utilized by Local Government Units (LGUs) and residents of Caraga Region for rapid
rainfall monitoring and as a tool for flood disaster preparedness.
ACKNOWLEDGEMENTS
This work is an output of the Caraga State University (CSU) Phil-LiDAR 1 project under the “Phil-LiDAR 1.
Hazard Mapping of the Philippines using LiDAR” program funded by the Department of Science and
Technology (DOST). We acknowledge the ASTI DOST for giving us access to the near-real time rainfall data
of Caraga Region.
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 Vol. 1 (201), pp. 28-36 ISSN 2362 7409
Official Gazette, 2015. How to make sense of PAGASA‟s color-coded rainfall advisories . Retrieved August 1,
20-15 from http://www.gov.ph/how-to-make-sense-of-pagasas-color-coded-warning-signals/
.
2682
36th Asian Conference on Remote Sensing 2015 (ACRS 2015), Quezon City, Philippines, Volume 4, pp. 2677-2682, 2015
Article
Full-text available
In view of the imperfect construction of power transmission line visualization system, this paper studies the power transmission line visualization system based on open source GIS engine openlayers. At the same time, it makes full use of VUE, JavaScript front-end technology and express framework, Node.js, MariaDB, GeoServer and other server technologies to realize the two-dimensional GIS solution based on open source openlayers, which has a certain application value for two-dimensional GIS visualization management in the field of transmission lines. This scheme can meet the daily application needs of power grid transmission lines, and greatly facilitates the management of power grid transmission lines.
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.
How to make sense of PAGASA"s color-coded rainfall advisories
Official Gazette, 2015. How to make sense of PAGASA"s color-coded rainfall advisories. Retrieved August 1, 20-15 from http://www.gov.ph/how-to-make-sense-of-pagasas-color-coded-warning-signals/ .