Customizing GeoNode
Emere Arco, Simone Balbo, Paolo Pasquali, Constantin Sandu
ITHACA
Outline
● GMES RDA
● MASDAP
● HaitiData
● UI/UX Considerations
● Way forward
● Conclusions
ITHACA + GeoNode
● Need for a complete set of functionalities
○ Upload data
○ Quickly create a Web Map
○ Data styling (optional)
○ Metadata catalogue
○ Support
● Open Source
● Knowledge of GeoNode key components
(Django, GeoServer, GeoNetwork and PostGIS)
GMES Reference Data GeoNode
Implementation of an initial GMES
Service for Geospatial Data Access
covering areas outside Europe
● Analysis of non-EU reference data
availability, quality and consistency
and gaps to be filled
● Dissemination of the data quality
assessment results
MASDAP 1 (2012)
● Ensure that the data created
by a number of past or
ongoing projects is maintained
and remains accessible and
useful to the Government of
Malawi
● Technical support and training
to the National Spatial Data
Center and partner ministries
MASDAP 2
GeoNode 2.4
Apps: Contact Form
Requirements:
● A contact form to be available
on the GeoNode site
● Registered and non-registered users
must be enabled to send a message
to the administrators
● A security check must prevent a robot
to spam the system
● The message should reach an email inbox,
managed by the administrators
Solution:
● A Django app was added, that performs the required descriptions
● This was enriched with the google “nocaptcha_recaptcha” tool (i.e. “I’m not a robot”)
GeoNode 2.6
HaitiData
HaitiData with Kartoza
Updating the existing Haiti GeoNode platform (HaitiData) using the latest version of
GeoNode and developing additional functions specific to HaitiData
● Mosaic Clip’n’Ship (Aerial imagery and DSM)
● Charts
● Docker + Rancher
In depth training of staff of CNIGS (Centre National de l'Information Géo-Spatiale)
that will be responsible of the renewed HaitiData platform.
Charts
Specifications:
● Capacity of generating a chart
● On vector datasets
● Two-fields entry (label or category field, quantity field)
● Possibility of aggregating data, according to e.g. mean, average etc.
● Capacity of storing the chart in db, for retrieving it at a later stage
Charts
Charts
Solution provided
● Software stack: GeoServer, Django (two apps), d3js
● GeoServer provides the WFS service, which is used as source
● a Django app acts as a middleware between the client and WFS
● D3js reads a csv file obtained from the WFS
● D3js performs the aggregation and generates the chart on the client side
● another Django app stores the input parameters of each single chart in the db
and handle modifications
Charts
Integration with the GeoNode permission system:
● Non registered users can create a chart, on vector layers on which download
permissions is granted to anyone
● Registered users can create a chart, on additional layers which they have been
granted download permission to
● Registered users can save a chart in the system, in order to publish it. A chart
inherits the download permissions on the original layer
● Charts can be modified and deleted by the owner, or by the owner of the
original layer
Charts
Next steps and ideas:
● Currently the chart is not saved as image; the input parameters are saved (i.e.
layer, fields, aggregation, chart type, title, abstract). As a consequence every
time a user wants to see a chart, this must be regenerated (bandwidth...)
● A solution would be to store the HTML element that describes a chart… but
what about consistency if the layers is modified? Triggering chart update?
GeoNode + Wagtail CMS
Wagtail built on Django
MASDAP is based on GeoNode 2.4
Django==1.6.11 but need Django>=1.8.1,<1.12
(Latest Wagtail version requires Django>=1.11,<2.1)
How to install Wagtail CMS in GeoNode
1. pip install wagtail
2. Add required apps to INSTALLED_APPS
3. Add 2 entries in MIDDLEWARE
4. Configure [Link]
5. [Link] migrate
6. [Link] startapp
How to integrate Wagtail CMS?
GeoNode and Wagtail can share:
● Same Users
● Same Content (e.g. Maps)
How can I share more?
Register your piece of code as a Snippet
...
from [Link] import Map
class BlogMap(BlogPage):
map = [Link](
'[Link]',
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name='+'
)
content_panels = BlogPage.content_panels + [
SnippetChooserPanel('map'),
]
register_snippet(Map)
GeoNode Maps
Wagtail Maps
Editing Posts
Wagtail Blog Posts
A Blog post with a GeoNode map
What’s next?
ITHACA GeoNode (based on 2.8) will provide
● ERDS (Extreme Rainfall Detection System) products:
○ GPM Cumulated Rainfall
○ GFS Cumulated Rainfall
○ Extreme Rainfall Alerted Areas
● Drought Monitoring
● Early Impact Maps
● OSM Extracts and Analysis
● UI/UX Refactoring (Bootstrap 4?)
How can I customize the UI/UX?
● GeoNode UI is based on Bootstrap 3
● HTML, CSS, JS are documented in Bootstrap
● Always create a Django project to customize your GeoNode installation
● Modify the Less files (e.g. [Link]) and then compile in CSS
Example: About 20 years ago
<table style=”width:100%”>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
Tables vs Divs. Spot any difference?
<table style=”width:100%”> <div class=”container-fluid”>
<tr> <div class=”row”>
<th>...</th> <div class=”col-md-4”>...</div>
<th>...</th> <div class=”col-md-4”>...</div>
<th>...</th> <div class=”col-md-4”>...</div>
</tr> </div>
<tr> <div class=”row”>
<td>...</td> <div class=”col-md-4”>...</div>
<td>...</td> <div class=”col-md-4”>...</div>
<td>...</td> <div class=”col-md-4”>...</div>
</tr> </div>
<tr> <div class=”row”>
<td>...</td> <div class=”col-md-4”>...</div>
<td>...</td> <div class=”col-md-4”>...</div>
<td>...</td> <div class=”col-md-4”>...</div>
</tr> </div>
</table> </div>
HTML5 Best practice
<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
Solution
Use CSS to style your HTML pages
Use mixins = you can include the Bootstrap classes in your stylesheet!
● Bad:
<a href="#" class="btn btn-primary btn-lg">Button</a>
● Good:
<a href="#" class="my-style">Button</a>
.my-style {
.btn
.btn-primary
.btn-lg
}
Conclusions (or Recommendations)
● Easy to add Django apps
● Keep the pace with recent Django version
● Translations: Don’t mix content (Django v. Angular)
● Use Front-end framework (Bootstrap?) in a smarter way
● Light pages (more speed, more compatibility, more suitable)
● Less is more but Sass is even more
● Avoid inline styling