Republic of the Philippines

TOPIC 6:

Creating Simple Dashboards

using GeoNode
[NAME]
[POSITION]

Geospatial Management Division

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Outline of the Presentation

A. Introduction to GeoNode
B. Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Introduction to GeoNode
What is GeoNode?
• It is a geospatial content management system and platform for the
management and publication of geospatial data.
• It combines stable open-source software projects under a consistent and
easy-to-use interface allowing users to share and manage data and create
interactive maps.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Introduction to GeoNode

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Introduction to GeoNode
Features of

Browse and search for Upload and share Create and share
geospatial data geospatial data, securely interactive web maps

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Introduction to GeoNode
Discovery and browsing of geospatial data

• GeoNode makes it easy to explore, process, style, and

share maps and geospatial data.
• Geospatial datasets can be imported and shared, all
through a non-technical user interface.
Powerful spatial search engine
Federated OGC services
Browse and search for
geospatial data Metadata catalogue

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Introduction to GeoNode
Import and management of geospatial data
• GeoNode allows the easy upload and manage geospatial
data on the web.
• Users can upload and make content available via standard
OGC protocols such as Web Map Service (WMS) and
Web Features Service (WFS).
• Supported formats include shapefile, GeoTIFF, KML, and
CSV.
Publish raster, vector, and tabular data
Upload and share
geospatial data, securely Manage metadata and associated documents
Securely or publicly share data

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Introduction to GeoNode
Interactive mapping
• GeoNode includes a repository of cartography tools for
styling and composing maps graphically.
• It allows users to easily generate a web-based mapping
application.
• Users can gain enhanced interactivity with GIS-specific
tools such as querying and measuring.
GeoExplorer GIS client
Create and share Graphical style editor
interactive web maps Create multi-layer interactive maps
Share and embed maps in web pages

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Outline of the Presentation

A. Introduction to GeoNode
B. Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

• In this portion of this topic, users shall create an interactive dashboard using
CBMS Form 5 Service Institutions and Infrastructure data of the Municipality of
Limasawa, Southern Leyte.

1 To start, open the GeoNode website: https://geonode.org/

2
Then in the upper right portion of the GeoNode website,
click Try the Demo button.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

3
Users will be redirected to the
GeoNode Live Demo site.

4
Then, click the Development
button.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Users will be redirected to the

5 development website of
GeoNode.
6
In the upper right portion of the
site, click Register.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

7
Users must register and create
a new local account.

8
Provide the necessary
information needed.
9 Once done, click Sign Up.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Users with existing accounts

can immediately sign in to
GeoNode.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Note that this site of GeoNode is accessible to public users, please

AVOID uploading confidential datasets/shapefiles.
CBMS Module III-A: Thematic Mapping using CBMS Data
Republic of the Philippines

Generation of Interactive Dashboard

These tabs allow users to filter and explore the
datasets/resources found inside GeoNode.
Select from Data, Maps, GeoStories,
Dashboards, or Featured.

• The settings tab allows users to see their profile,

recent activities, favorite datasets/resources,
and inbox.
• It also has the Help button that shows FAQs
about GeoNode.
• And lastly, the Log out button.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Add Resource
• This button allows users to upload dataset
(in the form of shapefile, GeoTIFF, CSV,
GeoPackage, etc.) and document (in the
form of docs, docx, jpg, png, etc.).
• It also allows users to create new dataset,
map, geostory, and dashboard.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Uploading of Shapefiles/Datasets

1 To start, click the Upload dataset button.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Uploading of Shapefiles/Datasets

Next, click the Select files button and

search for the Limasawa_Facilities
2
shapefiles located at the Day 3 →
2_Datasets → Dataset 5 folder.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Uploading of Shapefiles/Datasets

A new window opens. Locate the folder

and ensure that ALL complimentary
3 files (e.g. .shp, .shx, .dbf, and.prj) to the
Limasawa_Facilities are selected. Then
click, Open.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Once selected, the files should be visible
in the column and the Upload button is
4
now clickable. Users may also import zip
file containing these complimentary files.
Perform the same step and import the
5 Limasawa_Southern Leyte_bgyboundary
shapefile.
6
After importing the two shapefiles, click the
Upload button.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Uploading of Shapefiles/Datasets
Wait for the files to be uploaded
completely. A View button will appear,
7
which indicates that the shapefiles were
successfully uploaded.
Users may click the View button to
8 check the uploaded shapefiles in
GeoNode’s Map Viewer.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Limasawa Southern Leyte

Barangay Boundary
(operational and non-
administrative boundary)

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Limasawa Southern Leyte

Geotagged Facilities

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Uploading of Shapefiles/Datasets

9
Users can also see their uploaded
shapefiles by checking their Profile.

Scroll down and locate Resources. It

10 should show the two uploaded
shapefiles of Limasawa.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Creation of Map

1
Next, go back to GeoNode’s homepage
and click Add Resource → Create Map.
Once clicked, users will be redirected to
GeoNode’s Map Viewer.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

GeoNode Map Canvas

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Creation of Map
Then, click Add Dataset. The Datasets
Catalog shall appear in the right portion
2 of the screen. If necessary, search for the
Limasawa shapefiles in the
Filter/Search bar.
Click the two shapefiles. Check the
3 Layers panel, it should have grouped the
two added layers.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Creation of Map
Users can perform various activities to
the loaded layers such zoom, filter,
open the attribute table, export,
4
remove, and change the
symbology/appearance of the loaded
layers.
Next, click limasawa_facilities and
5 select the Edit Dataset Style button to
change the appearance of the layers.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets
Users can change the shape, fill and
1 stroke color, stroke width, radius, and
rotation.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets Users must classify and symbolize the
limasawa_facilities layer by its facility type.
They must also change the shape of the
symbols to circles/points.

2
First, to classify points based on the facility
type. Click the Open Filter Builder tool.
Select Match any* of the following
conditions. Then, click the + (plus) icon.
3
Follow the expression as shown in the image
to filter the points with Health Facility type.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets

Next, change the appearance of

4 limasawa_facilities layer based on the
following parameters:
• Legend Label: Health Facility
• Shape: Circle
• Fill Color: #D0021B
• Stroke Color: #000000
• Stroke Width: 1px
• Radius: 10px
• Rotation: 0

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets

Next, add a new Mark Rule. Then,

5 perform same steps to filter other
facility types.

CBMS Module III-A: Thematic Mapping using CBMS Data

 Republic of the Philippines

Generation of Interactive Dashboard

Filter Expression Parameters Filter Expression Parameters
• Legend Label: Agricultural • Legend Label: Energy
Facility Facility
• Shape: Circle • Shape: Circle
• Fill Color: #F8E71C • Fill Color: #8B572A
1 type = Agricultural Facility 3 type = Energy Facility
• Stroke Color: #000000 • Stroke Color: #000000
• Stroke Width: 1px • Stroke Width: 1px
• Radius: 10px • Radius: 10px
• Rotation: 0 • Rotation: 0
• Legend Label: Education • Legend Label: Financial
Facility and Credit Institution
• Shape: Circle • Shape: Circle
• Fill Color: #F5A623 type = Financial and Credit • Fill Color: #7ED321
2 type = Education Facility 4
• Stroke Color: #000000 Institution • Stroke Color: #000000
• Stroke Width: 1px • Stroke Width: 1px
• Radius: 10px • Radius: 10px
• Rotation: 0 • Rotation: 0

CBMS Module III-A: Thematic Mapping using CBMS Data

 Republic of the Philippines

Generation of Interactive Dashboard

Filter Expression Parameters Filter Expression Parameters
• Legend Label: Garbage & • Legend Label: Service
Waste Disposal Facility
• Shape: Circle • Shape: Circle
type = Garbage & Waste • Fill Color: #417505 • Fill Color: #BD10E0
5 7 type = Service Facility
Disposal • Stroke Color: #000000 • Stroke Color: #000000
• Stroke Width: 1px • Stroke Width: 1px
• Radius: 10px • Radius: 10px
• Rotation: 0 • Rotation: 0
• Legend Label: Health • Legend Label: Tourism
Facility Sites & Destination
• Shape: Circle • Shape: Circle
• Fill Color: #D0021B type = Tourism Sites & • Fill Color: #9013FE
6 type = Health Facility 8
• Stroke Color: #000000 Destination • Stroke Color: #000000
• Stroke Width: 1px • Stroke Width: 1px
• Radius: 10px • Radius: 10px
• Rotation: 0 • Rotation: 0

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Filter Expression Parameters
• Legend Label: Transport
Facility
• Shape: Circle
• Fill Color: #4A90E2
9 type = Transport Facility
• Stroke Color: #000000
• Stroke Width: 1px
• Radius: 10px
• Rotation: 0
• Legend Label: Water
Facility
• Shape: Circle
• Fill Color: #50E3C2
10 type = Water Facility
• Stroke Color: #000000
• Stroke Width: 1px
• Radius: 10px
• Rotation: 0

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets

6
Once all the facility types are filtered
and classified, click Apply.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets
Next, also change the symbology
and appearance of the
7
limasawa_southern_leyte_bgy
boundary layer.
• Legend Label: Barangay Boundary
• Fill Color: #009999
• Transparency: 30
• Outline Color: #000000
• Outline Width: 1px

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Symbolization of Datasets Users may also add Text Labels to the
8 barangay boundary layer by clicking the
Add Text Rule tool.
• Label: name
• Font Family: Times New Roman
• Font Color/Size: #FFFFFF; 12px
• Font Style/Weight: Normal
• Halo Color/Width: #000000, 2px
• Rotation: 0
• Offset X/Y: 0px
9
Once done applying the settings, click
Apply.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Changing of Basemaps

Users can also change the basemaps of

their map. GeoNode offers a variety of
1 available basemaps such as the default
OpenStreetMap, OpenTopoMap, and
Sentinel 2 Satellite Image.
2
Try changing the basemap from its
default to the Sentinel 2 Satellite Image.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Saving the GeoNode Map After symbolizing and checking the
1 layers, click the Save → Save As…
button.
2 Enter a Title and Description.
• Title: Municipality of Limasawa
Geotagged Facilities
• Description: This is a sample web map
containing geotagged facilities in the
Municipality of Limasawa, Southern
Leyte
3 Lastly, click Save.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Municipality of Limasawa Geotagged Facilities

GeoNode Web Map

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

After importing the datasets and creating the
map. Users are now ready to create an
interactive dashboard.
In the homepage, users can select the
Dashboards tab to filter the selection and to
see some of the dashboards created using
GeoNode.
1
To create a dashboard, click Add
Resource → Create Dashboard.
Once clicked, users will be redirected to
GeoNode’s Dasboard Viewer.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

GeoNode’s Dashboard
Viewer

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

To start, click the Add Widget to
Dashboard button located at the left
2
side of the window, below the Save
button.
This button shows the various widgets
that can be added to the user’s
dashboard such as Chart, Text, Table,
Counter, and Map.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

First, click Map to add the Municipality of
Limasawa Geotagged Facilities map that
3
was previously created. If necessary,
search Limasawa in the search bar.

Click the Municipality of Limasawa

Geotagged Facilities map. It shall be
highlighted in blue once selected. Then,
4
click the User this map button (right
key) located above the Select one or
more maps.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Next, the Configure Map Options

5 window opens. It shows the layers
loaded in the selected map.
It also has an option to Disable/Enable
Identify Tool to restrict the pop-ups
in the map.

CBMS Module III-A: Thematic Mapping using CBMS Data

 Republic of the Philippines

Generation of Interactive Dashboard

Next, users can click the Add a Layer to

the Map (Plus) button to add the map in
the dashboard. Or they can also select
6
the Configure Widget Option (right)
button to insert a Title and/or
Description of the map imported.
Lastly, click Add the Widget (save)
button to add the map in the dashboard.
• Title: Municipality of Limasawa Geotagged Facilities
• Description: Map of Geotagged Facilities in
Municipality of Limasawa, Southern Leyte

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Users can enlarge the imported map by dragging

the lower right portion of the map box.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Interactive Map that allows users to

zoom in/out and identify features on
the map.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Next, add a Chart widget. Click the Plus

button and select Chart. The GeoNode
Catalogue opens. In the search bar, type
7
in Limasawa and select
limasawa_facilities. Then, click the Use
Selected Layer (right button).

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

8
In the Select the Chart Type window,
select Pie Chart.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

9
The next window allows users to Configure
Indicator that the data.
chart/widget is
connected to the map.
Also, ensure that the chart is connected to the
map. This allows the chart to become dynamic
and interactive based on the map linked to it.
Click the Connect to the Map button to link it
with the previously added Limasawa map.
• Group By: type
• Use: type
• Operation: COUNT
• Color Ramp: Blues
• Display Legend: off

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Users can also Filter the chart by clicking
10 the Configure a Filter for the Widget
Data button.
Once done configuring the parameters,
11 click the Configure Widget Options
(right button).
Similar to the map added earlier, users
can also add a Title/Description of the
chart.
• Title: Percentage of Geotagged Facilities by
Type
12 Then, click the Add the Widget button.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Notice that the pie chart is now added in the

dashboard’s canvas. Users can rearrange the
positioning of the added widgets by dragging it
on their preferred position.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Try to zoom in/out and pan the map. Did the pie
chart change?

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Next, add a new widget, Counter. Search and
13 select the limasawa_facilities layer . Ensure
that the widget is connected to the map.
This widget shows numeric representations
of an attribute of a specific layer.
• Use: type
• Operation: COUNT
• Unit of measure: leave it blank
• Title: Total Number of Geotagged
Facilities
14 Then, add the widget.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Rearrange the placement of widgets based on

user’s preference.

Try to zoom in/out and pan the map. Did the

values in the counter widget change?

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Next, add the Legend widget. Search and

select the limasawa_facilities layer.
15 Ensure that the widget is connected to the
map. Leave the Title/Description blank,
then, add the widget.

CBMS Module III-A: Thematic Mapping using CBMS Data

 Republic of the Philippines

Generation of Interactive Dashboard

Rearrange the placement of widgets based on

user’s preference.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Next, add the Table widget. Search and

16 select the limasawa_facilities layer. Ensure
that the widget is connected to the map.
• Uncheck the ogc_fid field and
retain others to its default values.
• Title: Attribute Table of the
Geotagged Facilities in the
Municipality of Limasawa, Southern
Leyte.
17 Then, add the widget.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Users can still add

other widgets (e.g.
bar chart) and add
it on the GeoNode
dashboard.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Once done with the configuration of the
18 dashboard, save the project by clicking Save
→ Save As…
• Title: GeoNode Dashboard of the
Geotagged Facilities in the Municipality
of Limasawa, Southern Leyte
• Description: This is a sample GeoNode
Dashboard that contains and visualizes
the geotagged facilities in the
Municipality of Limasawa, Southern
Leyte
19 Lastly, click Save.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Exercise #6: Creating Basic Dashboard using GeoNode
Using the procedures on how to create a GeoNode dashboard in the discussion, create
a simple dashboard for the Geotagged Facilities in the Municipality of Padre Burgos.

Using the data in the Day 3 → 2_Datasets → Dataset 5, create the following:
1. Import and upload the shapefiles of the geotagged facilities and
operational boundary of the Municipality of Padre Burgos;
2. Create a web map using the uploaded datasets; and
3. Create a GeoNode dashboard with configured and working widgets.

CBMS Module III-A: Thematic Mapping using CBMS Data

Republic of the Philippines

Generation of Interactive Dashboard

Exercise #6: Creating Basic Dashboard using GeoNode

Name all the outputs (uploaded shapefiles, created maps, and dashboards) in
GeoNode as follows:

E6_<Shapefile/Map/Dashboard Name>_RSSO/PSO_LastName_FirstName

Shapefile: e.g. E5_padreburgos_facilities_CAR_DelaCruz_Juan

Map: e.g. E5_Municipality of Padre Burgos Geotagged
Facilities_Benguet_DelaCruz_Juan
Dashboard: e.g. E5_GeoNode Dashboard of the Geotagged Facilities in the
Municipality of Padre Burgos, Southern Leyte_MIMAROPA_DelaCruz_Juan

CBMS Module III-A: Thematic Mapping using CBMS Data