CBMS Module III-A: Thematic Mapping using CBMS Data
Topic 6
Creating Simple Dashboards
using GeoNode
Scan the QR
Code to
access GMD’s
iMapa
Prepared by the Geospatial Management Division for 2021-2023 CBMS Pilot/Rollout Areas
CBMS Module III-A: Thematic Mapping using CBMS Data
Topic Outline
Introduction to Geonode ............................................................................................................................. 3
What is GeoNode? ...................................................................................................................................... 3
Features of GeoNode .................................................................................................................................. 4
Discovery and Browsing of Geospatial Data ............................................................................................... 4
Import and Management of Geospatial Data ............................................................................................... 4
Interactive Mapping .................................................................................................................................... 5
Generation of Interactive Dashboard ........................................................................................................ 5
Uploading of Shapefiles/Datasets ............................................................................................................... 9
Creation of Web Map ................................................................................................................................ 12
Symbolization of Datasets ........................................................................................................................ 15
Changing of Basemaps ............................................................................................................................ 20
Saving the GeoNode Map ......................................................................................................................... 20
Creation of Interactive Dashboard ............................................................................................................ 22
Exercise 6: Creating Basic Dashboard using GeoNode ......................................................................... 32
Page 2 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Learning Objectives
1. Introduce and explore the capabilities of GeoNode.
2. Create simple and interactive web maps and dashboards using GeoNode.
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.
Page 3 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Features of 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.
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.
Page 4 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
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.
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: [Link]
2. Then in the upper right portion of the GeoNode website, click Try the Demo button.
Page 5 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
3. Users will be redirected to the GeoNode Live Demo site.
4. Then, click the Development button.
5. Users will be redirected to the development website of GeoNode.
6. In the upper right portion of the site, click Register.
Page 6 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
7. Users must register and create a new local account.
8. Provide the necessary information needed.
9. Once done, click Sign Up. Users with existing accounts can immediately sign in to GeoNode.
Page 7 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
DISCLAIMER
Note that this site of GeoNode is accessible to public users, please AVOID uploading confidential datasets and/or
shapefiles.
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.
Page 8 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Uploading of Shapefiles/Datasets
• The Add Resource 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 datasets, maps, geostories, and dashboards.
1. To start, click the Upload dataset button.
2. Next, click the Select files button and search for the Limasawa_Facilities shapefiles located at the
Day 3 → 2_Datasets → Dataset 5 folder.
Page 9 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
3. A new window opens. Locate the folder and ensure that ALL complimentary files (e.g. .shp, .shx,
.dbf, [Link]) to the Limasawa_Facilities are selected. Then click, Open.
4. Once selected, the files should be visible in the column and the Upload button is now clickable. Users
may also import zip file containing these complimentary files.
5. Perform the same step and import the Limasawa_Southern Leyte_bgyboundary shapefile.
6. After importing the two shapefiles, click the Upload button.
Page 10 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
7. Wait for the files to be uploaded completely. A View button will appear, which indicates that the
shapefiles were successfully uploaded.
8. Users may click the View button to check the uploaded shapefiles in GeoNode’s Map Viewer.
Page 11 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
9. Users can also see their uploaded shapefiles by checking their Profile.
10. Scroll down and locate Resources. It should show the two uploaded shapefiles of Limasawa.
Creation of Web 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.
Page 12 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
2. Then, click Add Dataset. The Datasets Catalog shall appear in the right portion of the screen. If
necessary, search for the Limasawa shapefiles in the Filter/Search bar.
Page 13 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
3. Click the two shapefiles. Check the Layers panel, it should have grouped the two added layers.
4. Users can perform various activities to the loaded layers such zoom, filter, open the attribute table,
export, remove, and change the symbology/appearance of the loaded layers.
5. Next, click limasawa_facilities and select the Edit Dataset Style button to change the appearance
of the layers.
Page 14 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Symbolization of Datasets
1. Users can change the shape, fill and stroke color, stroke width, radius, and rotation.
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.
3. Select Match any* of the following conditions. Then, click the + (plus) icon. Follow the expression
as shown in the image to filter the points with Health Facility type.
Page 15 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
4. Next, change the appearance of 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
5. Next, add a new Mark Rule. Then, perform same steps to filter other facility types.
Page 16 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
6. Once all the facility types are filtered and classified, click Apply.
Page 17 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
7. Next, also change the symbology and appearance of the limasawa_southern_leyte_bgyboundary
layer.
• Legend Label: Barangay Boundary
• Fill Color: #009999
• Transparency: 30
• Outline Color: #000000
Page 18 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
• Outline Width: 1px
8. Users may also add Text Labels to the 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.
Page 19 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Changing of Basemaps
1. Users can also change the basemaps of their map. GeoNode offers a variety of 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.
Saving the GeoNode Map
1. After symbolizing and checking the layers, click the Save → Save As… button.
Page 20 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
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.
Page 21 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Creation 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.
Page 22 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
2. To start, click the Add Widget to Dashboard button located at the left 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.
3. First, click Map to add the Municipality of Limasawa Geotagged Facilities map that was previously
created. If necessary, search Limasawa in the search bar.
4. Click the Municipality of Limasawa Geotagged Facilities map. It shall be highlighted in blue once
selected. Then, click the User this map button (right key) located above the Select one or more
maps.
Page 23 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
5. Next, the Configure Map Options 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.
6. 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 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.
Page 24 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
• Title: Municipality of Limasawa Geotagged Facilities
• Description: Map of Geotagged Facilities in Municipality of Limasawa, Southern Leyte
Page 25 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
7. Next, add a Chart widget. Click the Plus button and select Chart. The GeoNode Catalogue opens.
In the search bar, type in Limasawa and select limasawa_facilities. Then, click the Use Selected
Layer (right button).
8. In the Select the Chart Type window, select Pie Chart.
9. The next window allows users to Configure data. 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
Page 26 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
• Use: type
• Operation: COUNT
• Color Ramp: Blues
• Display Legend: off
10. Users can also Filter the chart by clicking the Configure a Filter for the Widget Data button.
11. Once done configuring the parameters, click the Configure Widget Options (right button). Similar
to the map added earlier, users can also add a Title/Description of the chart.
• Group By: type
12. Then, click the Add the Widget button.
Page 27 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
13. Next, add a new widget, Counter. Search and 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.
Page 28 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
15. Next, add the Legend widget. Search and select the limasawa_facilities layer. Ensure that the
widget is connected to the map. Leave the Title/Description blank, then, add the widget.
Page 29 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
16. Next, add the Table widget. Search and 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.
Page 30 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
18. Once done with the configuration of the 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.
Page 31 of 32
Topic 6: Creating Simple Dashboards using GeoNode
CBMS Module III-A: Thematic Mapping using CBMS Data
Exercise 6: Creating Basic Dashboard using GeoNode
Time Limit: 1 – 1.5 hours
DISCLAIMER:
Users may opt to not perform this exercise due to concerns regarding data privacy since data uploaded in the
trial version of GeoNode are can be seen by other GeoNode users. However, if the participants choose to conduct
this exercise, ensure that you WILL NOT UPLOAD ANY CONFIDENTIAL SHAPEFILES, data, among others.
• 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.
Screenshot the generated dashboard and name it as follows:
E6_<Dashboard Name>_LastName_FirstName.png
Page 32 of 32
Topic 6: Creating Simple Dashboards using GeoNode