GeoNetwork Workshop

How to easily build your own UI

using widgets

GeoMetaData for All

María Arias de Reyna @delawen

Brief Introduction

First of all:

Does somebody here need an introduction to GeoNetwork?

Or can we move forward?

Metadata Catalog

Widgets:

Metadata Catalog Search
TagCloud
Latest added
Metadata Editor
...

New HTML5 UI for GeoNetwork

Easiest way

Full Metadata Catalog (full geoNetwork)

No need to program, just CSS

First: change colors

Colors.css

Change logo

main.css:200 #logo

or replace file images/banner_logo.png

Change header and footer

main.css:81 #footer

main.css:193 #header

or replace file images/map_header.png

Change tabs

search.xsl

We can add more tabs

How to customize or create a simple geoNetwork UI using widgets

Average Diffulty

Partial Metadata Catalog

You choose your own widgets

Imports:

Compressed
- App-mini.js
Separated Files
- (+) Less size
- (-) Lots of cross-dependencies

Common steps:

Create html structure
Add imports
Add widgets
- Add tagcloud
- Add search fields
Full Example

We can use the web-client/src/main/resources/ folder to place our files

Note: If no results are shown maybe it is because our local GN does not have any record

More widgets like Adding a map

How to add a widget to a non-geoNetwork webpage

Advanced Diffulty

Mixed with your own webpage

Use a vanilla geoNetwork

Problem if using another port

Origin is not allowed by Access-Control-Allow-Origin.

Probably need a proxy

May be incompatible with your own libraries

We use ExtJS 3.4

Compatible with JQuery

Use CSW/search api to search from an external website

Very Advanced Diffulty

Don't use GeoNetwork's javascript, just server-side APIs

Your own UI from scratch

Full compatibility with your own libraries

Two options:

CSW (OGC)
Q service (GN)

CSW:

Gxp widget

Q service (GN)

http://..../geonetwork/srv/eng/q

Works without parameters

Response

Summary
- attribute Results Count
- Facets Fields (Filters)
Metadata*
- Title
- Abstract
- Constraints
- ...

Parameters

from Useful for pagination
to Only retrieve a number of results
themekey KeyWord
any_OR_geokeyword Free text search (allows *)
...
fast=index

We need

UI to create the request
UI to process the response

UI to create the request

Create a simple form

<form id="qservice" style="display:inline-block;width:300px">
<div>Keyword:<input type="text" name="themekey"/></div>
<div>Free text:<input type="text" name="any_OR_geokeyword"/></div>
<div>From: <input type="number" name="from"/></div>
<div>To:<input type="number" pattern="[0-9]{3}" name="to"/></div>
<div><input type="button" id="submit" value="Search"/></div>
</form>

And use jQuery for the Ajax request:

We will have a problem with the proxy here

Origin null is not allowed by Access-Control-Allow-Origin.

Final steps

And we can try it