GmE 205 application documentation

PHILIPPINE LIDAR DATA COVERAGE MAP

Gerome Hipolito, Marck John Rivera

GME 205 - GTH

Instructor: Oliver T. Macapinlac

I. Introduction
LiDAR or Light Detection and Ranging technology is used to measure distances using laser.

“LIDAR, which stands for Light Detection and Ranging, is a remote sensing method that uses
light in the form of a pulsed laser to measure ranges (variable distances) to the Earth. These light
pulses—combined with other data recorded by the airborne system— generate precise, three-
dimensional information about the shape of the Earth and its surface characteristics.”
-https://oceanservice.noaa.gov/facts/lidar.html

With the advent of aerial LiDAR surveying, acquiring topographic data over very wide areas has
become a hundred to a thousand times faster than the conventional surveying techniques,
making it highly efficient in surveying large areas of interest in terms of speed and cost.

The Nationwide Disaster Risk and Exposure Assessment for Mitigation (DREAM) Program and
consequently Hazard Mapping of the Philippines Using LiDAR (PHIL-LiDAR 1) Program (see
Figure 1), funded by the Department of Science and Technology (DOST), monitored by Philippine
Council for Industry, Energy, and Emerging Technology Research and Development (PCIEERD),
and implemented by the University of the Philippines Training Center for Applied Geodesy and
Photogrammetry (UP TCAGP) was the first in the Philippines to acquire Light Detection and
Ranging (LiDAR) data over the country using sensors mounted on an aircraft (Cessna T206H)
where the operators and processors are all trained Filipino scientists and engineers. It generally
aims to acquire a national elevation and resource information dataset in 3D at sufficient detail and
resolution from which various base and thematic map features can be extracted. Particularly, it
operationalized the development of flood hazard models that would produce updated and detailed
flood hazard maps and early warning systems for the majority of flood plains in the country.
-DREAM/PHIL-LiDAR 1 Program

Figure 1: DREAM/PHIL-LiDAR 1 logos. Images courtesy of DREAM/PHIL-LIDAR 1 Program

Every step from acquisition to processing, to validation, to flood modelling and mapping is
conducted by Filipinos here in the Philippines, and at times they consult with the Canadian or
 Swiss manufacturers and British institutions to ensure that the data and methodologies are within
the acceptable standards. It is also only one of the few in Asia and probably in the world where
the conduct of LiDAR data acquisition is on a national scale (most are only project/ROI-based);
that is why most Southeast Asian countries consult and even seeks the mentorship of these
Filipinos so they can also start the implementation of aerial LiDAR surveying for the advantage of
their respective countries.

The DREAM/PHIL-LiDAR 1 Program utilizes four LiDAR sensors (ALTM Pegasus, ALTM Gemini,
ALTM Aquarius, and Leica ALS80) with waveform digitizers, and combined with metric aerial
camera or a hyperspectral imager branded Compact Airborne Spectrographic Imager (CASI-
1500). Its outputs include among others DTM, DSM, Orthophoto, flood hazard maps, and early
warning systems. These LiDAR datasets are being utilized by different entities such as local
government units, government agencies (DILG, DPWH, DOST, NIA, MGB, etc), students and
academe, urban planners, scientists, and engineers in government and now also in private
companies, to aid in their planning, projects/programs, studies, and research. Accordingly, we
can state that its accuracy and usefulness are acknowledged by both the government and
commercial sectors. The DOST has even created the National Resource Inventory of the
Philippines Using LiDAR and Other Remotely Sensed Data (PHIL-LiDAR 2) Program to explore
more ways to utilize DREAM/PHIL-LiDAR 1’s data such as: “production of high value crops,
irrigation assessment, aquaculture production, forest protection, and discovery of renewable
energy sources” -PHIL-LiDAR 2 Program.

The goal of this GmE 205 project is to publish an HTML map of the Philippines with an overlay of
the current LiDAR data coverage as acquired by the DREAM/PHIL-LiDAR 1 Program and how
much is acquired per province. It also contains some interactive features for the users to aid in
their query. It can be categorized into what year the data was acquired. This gives the user an
idea on how updated the data is, because the freshness of the data is important depending on
the application it will serve. It can also be categorized to view which sensor (Pegasus, Gemini, or
Aquarius) was used for a certain flight during its data acquisition for advanced analysis options.

II. Technology Used

The technologies used for this project are: PostgreSQL with PostGIS , Geoserver , Leaflet ,
GeoJson, and Hypertext Markup Language (HTML). See Figure 2 for some of their logso. These
technologies are used to manipulate the shapefiles and other data, the views/GUI, and storage.
Their descriptions/definitions are easily searchable in the web or their own websites which are
provided below in the reference section. The data source for the shapefiles and attributes of the
LiDAR coverage is DREAM/PHIL-LiDAR 1 Program’s LiDAR data coverage shapefile with
attributes while the Philippine provinces’ boundaries shapefile with attributes was from National
Statistics Office (NSO). The basemap used is linked from Openstreetmap (streets) using Leaflet.
 Figure 2. Some logos of the technologies used

III. Architecture – PostgreSQL and PostGIS was used as the spatial database
-These shapefiles are loaded to GeoServer and published for use of HTML applications such as
Leaflet and GeoJson. GeoServer has chosen for interoperability and open data standards.
-Leaflet was used as the open-source JavaScript library for the interactive maps to display on the
web page. Its API’s are explored such as the one used for choropleth maps.
-OpenStreetMap was the base layer for the web page. It was linked to the program by html
commands in leaflet.

IV. Application Control Structure

The following data were used:

1. NSO province shapefile - shapefile showing the different provinces of the Philippines
2. Lidar 2012-2013 shapefile - shapefile showing the lidar coverage for the year 2012-2013
3. Lidar 2014-2015 shapefile - shapefile showing the lidar coverage for the year 2014-2015
4. Lidar 2016-2017 shapefile - shapefile showing the lidar coverage for the year 2016-2017

The three lidar data shapefiles were preprocessed using merge tool of ArcGIS to get the whole
lidar coverage. The area covered by lidar on each province of the Philippines were computed and
added on the attribute field of the NSO Province shapefile. This shapefile was the basis of our
choropleth map.

From the lidar coverage shapefile, three shapefiles were generated showing the area covered by
lidar using Pegasus sensor, Gemini sensor, and Aquarius sensor.

These 4 shapefiles together with the 3 generated shapefiles were stored in a PostgreSQL
Database and were loaded to geoserver.

The application makes use of the layer control module of the leaflet. The layer control module of
leaflet lets the user pick a basemap and overlay maps to display. On our application, the
basemap is the openstreetmap while the overlay maps are the 3 lidar coverage based on year
flown and 3 lidar coverage based on sensor used.
 The application has a choropleth map over the basemap and overlay maps. The choropleth map
shows the percentage of area the lidar project has covered a certain province. The most efficient
data format at which we can retrieve and change a feature property is the GeoJSON data format.
NSO Province shapefile was loaded as a GeoJSON object using Ajax plugin.

To create a choropleth map, we defined colors to display according to percent cover of lidar over
a feature (province). The application retrieves the percent lidar cover over a province from thand
use it as a parameter on a GetColor function to specify a color to display for a specific feature
(province). The return of the GetColor was then used as a parameter for the fillcolor style of our
GeoJSON. Hence, the varying color display of the choropleth map.

An info layer was also used to display different information of a province the mouse pointer is
hovering. As stated before, the application made used of the advantage of GeoJSON data format
to retrieve feature properties. In this application, the feature properties we get are the name,
shape_area, and lidarcover.

V. Code Snippet

var osmap =
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6Im
NpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>
contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.light'
});
Code snippet to load openstreetmap as tilelayer.

var lidar1 = L.tileLayer.wms("http://localhost:8080/geoserver/Project/wms", {

layers: 'Project:lidar_2012_2013',
format: 'image/png',
transparent: true,
styles: 'Red',
tiled: false,
version: '1.1.1',
});

var lidar2 = L.tileLayer.wms("http://localhost:8080/geoserver/Project/wms", {

layers: 'Project:lidar_2014_2015',
format: 'image/png',
transparent: true,
styles: 'Violet',
tiled: false,
version: '1.1.1',
});

var lidar3 = L.tileLayer.wms("http://localhost:8080/geoserver/Project/wms", {

layers: 'Project:lidar_2016_2017',
format: 'image/png',
transparent: true,
styles: 'green',
tiled: false,
version: '1.1.1',
});
Code snippet to load the three shapefiles of lidar cover according to year flown. These shapefiles
played according to the style specified which are from geoserver layer styles.

var aqua = L.tileLayer.wms("http://localhost:8080/geoserver/Project/wms", {

layers: 'Project:aqua_correct',
format: 'image/png',
transparent: true,
tiled: false,
version: '1.1.1',
});

var pegasus = L.tileLayer.wms("http://localhost:8080/geoserver/Project/wms", {

layers: 'Project:pegfeb5toapr18',
format: 'image/png',
transparent: true,
tiled: false,
version: '1.1.1',
});

var gemini = L.tileLayer.wms("http://localhost:8080/geoserver/Project/wms", {

layers: 'Project:gemfebw3toapr16',
format: 'image/png',
transparent: true,
tiled: false,
version: '1.1.1',
});

Code snippet to load the three shapefiles of lidar cover according to sensor used.

var map = L.map('map', {

center: [14, 121],
zoom: 10,
layers: [osmap]
});

var baseMaps = {'OSM': osmap};

var overlayMaps = {
'Lidar 2012 - 2013': lidar1,
'Lidar 2014 - 2015': lidar2,
'Lidar 2016 - 2017': lidar3,
'AQUARIUS- Sensor': aqua,
'GEMINI - Sensor': gemini,
'PEGASUS - Sensor': pegasus,
};

L.control.layers(baseMaps, overlayMaps, {position: 'topleft'}).addTo(map);

Code snippet to initialize Map and specify the layers to be displayed on layer control.

var owsrootUrl = 'http://localhost:8080/geoserver/ows';

var defaultParameters = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName : 'Project:provinces',
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
 SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);

var URL = owsrootUrl + L.Util.getParamString(parameters);

var addGeojson =
function (data) {

var WFSLayer = L.geoJson(data, {

style:style,
onEachFeature: onEachFeature
}).addTo(map);
map.fitBounds(WFSLayer.getBounds());
};

var ajax = $.ajax({

url : URL,
dataType : 'jsonp',
jsonpCallback : 'getJson',
success : addGeojson
});

Code snippet to load the NSO Province shapefile as GeoJSON data format using Ajax plugin.

function getColor(d) {
return d > 90 ? '#800026' :
d > 75 ? '#BD0026' :
d > 60 ? '#E31A1C' :
d > 45 ? '#FC4E2A' :
d > 30 ? '#FD8D3C' :
d > 15 ? '#FEB24C' :
d > 0 ? '#FED976' :
'#FFEDA0';
}

function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: .5,
fillColor: getColor(feature.properties.lidarcover)
};
}

Code snippet that specifies the style to be be used on each feature of our GeoJSON data. The
lidarcover attribute of our data was used to specify the fillcolor to be displayed for a specific
feature (province) of our GeoJSON data

function highlightFeature(e) {
var layer = e.target;

layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
 fillOpacity: 0.5
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {

layer.bringToFront();
}

info.update(layer.feature.properties);
}

function resetHighlight(e) {
var layer = e.target;

layer.setStyle({
weight: 2,
color: 'white',
dashArray: '3',
fillOpacity: 0.5
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {

layer.bringToFront();
}

info.update(layer.feature.properties);
}

function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}

function onEachFeature(feature, layer) {

layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}

Code snippet to add interactive function on our map such as change the highlight when the
mouse hovers a specific province and zoom when it’s clicked.

var info = L.control();

info.onAdd = function (map) {

this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};

info.update = function (props) {

this._div.innerHTML = '<h3 >LIDAR PERCENT COVER <br> PER PROVINCE</h3>' + '<h4>' +
(props ? '<b><h4>' + props.province + '</b><br>Area : ' + parseInt(props.shape_area/10000) + ' Ha.'
+ '<br>Area Covered : ' + parseInt(((props.lidarcover/100) * props.shape_area)/10000) + ' Ha.
covered' + '<br>Percent Covered : ' + props.lidarcover + '% covered' : 'Hover over a province</h4>');
};

info.addTo(map);
 Code snippet to display Information about the Province where the mouse hovers. It fetched the
lidarcover, shape_area, and lidarcover attribute of our GeoJSON data. The information displayed
are name, area, lidar cover area, lidar percent cover.

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),

grades = [0, 15, 30, 45, 60, 75, 90],
labels = [],
from, to;

for (var i = 0; i < grades.length; i++) {

from = grades[i];
to = grades[i + 1];

labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
'<h4>' + from + (to ? '&ndash;' + to : '+') + '</h4>');
}

div.innerHTML = labels.join('<br>');
return div;
};

legend.addTo(map);

Code snippet to add legend.

VI. View or Presentation or GUI – Features:

Here, we define the features of the program and how it is presented, or how the GUI works for the
users browsing the program.
1. It has a base map that is linked from the Openstreetmap. See Figure 3.
 Figure 3. Openstreetmap as basemap of the application

2. Zoom-in and zoom-out feature was provided for easy moving of views. It may be by
mouse scroll or by the “+” and “-” sign in the top left corner of the interface as shown in
Figure 4.

Figure 4. Zoom in and out buttons

3. For visual presentation, a choropleth map showing the ‘completeness of data’ over a
province thru percent coverage is displayed by default over the map. Shades of red are
selected for the appearance as shown in Figure 5. This is important for a user who would
want to request for data as the first step is to know if there actually is available data for
the area they are interested in.
 Figure 5. Choropleth map showing percent coverage with legend

a. A legend is provided on the lower right corner of the map showing the divisions:
0-15%, 15-30%, 30-45%, 45-60%, 60-75%, 75-90%, and 90+%. See Figure 5.

4. For the interaction, when the user clicks a certain province over the map, it shall display
the selected province’s name, province’s total area, LiDAR coverage area for that
province, and percent coverage on the upper right corner of the map. See Figure 6.
 Figure 6. On-click information about a selected province

5. Check-box buttons are also provided on the left-side of the interface for the user to query
how updated the data over some regions are, meaning it shows the year the data was
acquired by the data acquisition component of the DREAM/PHIL-LiDAR 1 Program.
Either 2012-2013, 2014-2015, or 2016-2017. See Figure 7. The shapefiles also have the
attributes of the exact dates the data was taken. It’s important for the data requesters to
know the freshness of the data depending on the application where he/she intends to use
the data.
 Figure 7. Checkbox buttons demo for selecting the year the data was acquired

6. Also, there are checkbox buttons for choosing to see which data were acquired using
which sensor of the DREAM/PHIL-LiDAR 1 Program. There are three choices for this
feature: Pegasus, Gemini, and Aquarius sensor. The user can select to see what certain
area or acquisition flights each LiDAR sensor has flown. See Figure 8.
 Figure 8. Checkbox buttons demo for LiDAR coverage per sensor that acquired

Acknowledgments:
DREAM/PHIL-LiDAR 1 Program
For more info and data, you may visit their websites at:
https://dream.upd.edu.ph/, https://lipad.dream.upd.edu.ph/, and
https://dostphillidar2.wordpress.com/

References:
https://leafletjs.com/
https://leafletjs.com/examples/quick-start/
https://leafletjs.com/examples/choropleth/
http://geoserver.org/
http://www.bostongis.com/PrinterFriendly.aspx?content_name=postgis_tut01
https://www.w3schools.com/
https://www.openstreetmap.org/#map=5/13.019/121.767