OpenFairViewer

OpenFairViewer - a FAIR, ISO and OGC (meta)data compliant GIS data viewer for browsing, accessing and sharing geo-referenced statistics

Sponsors

Many thanks to the following organizations that have provided fundings for strenghtening OpenFairViewer:

The following projects have contributed to strenghten OpenFairViewer:

• Blue-Cloud Blue-Cloud has received funding from the European Union's Horizon programme call BG-07-2019-2020, topic: [A] 2019 - Blue Cloud services, Grant Agreement No.862409.
• CCSAFE

Contributors

• Julien Barde @juldebar
• Wilfried Heintz @wheintz
• Alexandre Bennici @abennici

Special thanks

Warm and special thanks to @highsource (Alexey Valikov, RIP), for his amazing libraries (jsonix, ogc-schemas) to parse XML and OGC schemas.

Introduction

The OpenFairViewer is an HTML5/JS map viewer application developed to adopt the FAIR Data principles, while complying with ISO/OGC standards for geospatial data. It enables data findn, access, query and sharing of geospatial data, in interoperable way.

The development of OpenFairViewer is done in synergy with the geoflow R package which provides a workflow tool to facilitate the management / publication of geospatial data and metadata using OGC services.

Installation

To deploy and configure an OpenFairViewer, you should install node.js that will provide the npm command required to build your OpenFairViewer project. Once node.js installed, install the following packages:

npm instal parcel-bundler --save-dev
npm install parcel-plugin-static-files-copy  --save-dev

Next, create a project with npm init, or create the below package.json as follows:

{
  "name": "openfairviewer_test",
  "version": "1.0.0",
  "description": "My mapviewer powered by OpenFairViewer",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url ./ index.html"
  },
  "staticFiles": {
    "staticPath": [
      {
        "staticPath": "node_modules/openfairviewer/src/templates",
        "staticOutDir": "templates"
      },
      {
        "staticPath": "node_modules/openfairviewer/src/img",
        "staticOutDir": "img"
      }
    ]
  },
  "author": "Your name",
  "license": "licence",
  "devDependencies": {
    "cssnano": "^4.1.10",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-static-files-copy": "^2.5.0"
  },
  "dependencies": {

  }
}

Next, install OpenFairViewer using the following commands:

• for the latest (Github master branch)

npm install eblondel/openfairviewer

• for the latest release

npm install eblondel/openfairviewer#2.7.5

After the installation, OpenFairViewer will be installed as dependency.

Configuration

The initialization of the viewer is done with a Javascript only, with a single main.js script. A simple index.html file is required referencing this javascript file, then all the HTML markup required is generated by OpenFairViewer. As OpenFairViewer is metadata-driven, the minimal configuration is done by specifying the OGC Catalogue Service for the Web (CSW) endpoint URL.

import $ from 'jquery';
window.$ = $;

import OpenFairViewer from 'openfairviewer/src/OpenFairViewer.js';

window.OFV = null;
$(document).ready(function(){
    new OpenFairViewer({
        id: 'OFV',
        profile : '<p>Welcome to my <b>data portal!</b> powered by OpenFairViewer</p>',
        OGC_CSW_BASEURL: "https://localhost:8080/geonetwork/srv/eng/csw"
    }).init(true); //init is required to initialize the instance
    console.log(OFV);
});

The id is required to create an OpenFairViewer that will be queryable for any further interaction and customization with the application.

The profile is a summary markup description of your application that will appear when opening the application in a "About" panel dialog.

To run the application, you can run npm start, it will compile deploy your viewer to http://localhost:1234

To create a build for deployment on web servers, run npm run build. The compiled web resources will be created in the dist directory, and can be copied to your web-server.

Options

Apart from global options, options of OpenFairViewer are grouped according to the main component of application, ie language, labels, find, access, map

An OpenFairViewer instance can be then customized handling one more options like this:

import $ from 'jquery';
window.$ = $;

import OpenFairViewer from 'openfairviewer/src/OpenFairViewer.js';

window.OFV = null;
$(document).ready(function(){
    new OpenFairViewer({
        //an identifier used for the OpenFairViewer instance
        id: 'OFV', 
        //a profile (plain html markup or text) used as About window opened on viewer start
        profile : '<p>Welcome to my <b>data portal!</b> powered by OpenFairViewer</p>',
        //an OGC CSW endpoint URL
        OGC_CSW_BASEURL: "https://localhost:8080/geonetwork/srv/eng/csw"
    },{
        language: {<language options here>},
        labels: { <label options here> },
        find: { <browse options here> },
        access: { <browse options here> },
        map: { <map options here> }
    }).init(true);
    console.log(OFV);
});

global options

The next sections highlight the current groups of options available in OpenFairViewer

language options

labels options

find options

access options

Example of export definitions, where we deactivate the map png export (provided by default), and add a custom export button:

[
 {
     'id': 'data-map-png',
     'enabled': false
 },
 {
    'id': 'export-custom',
    'main': false, 
    'enabled': true,
    'services': ['wfs'],
    'title': 'Export data with custom method',
    'class': 'export-custom-css-class',
    'handler': function(){
        //business logic to run on button click event
    }
 }
]

Example of dashboard handler:

function(dataset){
    var layer = OFV.getLayerByProperty(dataset.pid, 'id');
    OpenFairShiny.dashboardHandler("https://myshinyproxy.org/app_direct/myShinyApp/", layer, false);
}

map options

Example of popup handler:

function(layer, feature){
    if(layer.id.startsWith('my_layer')){
            return OpenFairShiny.popupHandler("https://myshinyproxy.org/app_direct/myShinyPopup/", layer, feature, false);
        }else{
            return this.DEFAULT_HANDLER(layer, feature);
        }
    }
}