GeoDashboard

Web library to display data as maps and widgets using WMS, WFS and WPS services.

GeoDashboard is a pure client application. That means it doesn't include a backend side. All it needs to work is a map server with WMS, WFS and WPS enabled. At the moment, GeoDashboard has been tested only with GeoServer.

The idea behind this project is that anybody who already has an OGC compliant server up and running can create a simple and nice dashboard with just a few lines of JavaScript.

GeoDashboard has born as an inside project of SIASAR.

How to use it

There are basically two options to use GeoDashboard:

• Downloading or linking the .js and .css files.
• Installing the node package and requiring/importing it in your project.

Using the files

• Include GeoDashboard CSS file

<link rel="stylesheet" href="https://unpkg.com/geodashboard/dist/geo-dashboard.css" />

• Include GeoDashboard JS file

<script src="https://unpkg.com/geodashboard/dist/geo-dashboard.js"></script>

Using node package

• Install the package

npm install --save geodashboard

or

yarn add geodashboard

• Require or import the module

const GeoDashboard = require('geodashboard');

or

import * as GeoDashboard from 'geodashboard';

Next steps

• Add a div where you wanna display the dashboard

<div id="dashboard"></div>

• Create the dashboard

const dashboard = new GeoDashboard.Dashboard({
     container: document.getElementById('dashboard'),
     header: {
       title: 'GeoDashboard Demo',
     },
     map: {
       center: [-75.01, -9.53],
       zoom: 7,
     }
});

• Add some layers

dashboard.addBaseLayer(new GeoDashboard.OSMLayer({
     visible: true,
}));

dashboard.addOverlayLayer(new GeoDashboard.WFSLayer({
     title: 'Communities',
     server: 'https://geoserver.siasar.org/geoserver',
     layer: 'siasar:communities',
     visible: true,
     popup: [{
       title: 'Name',
       property: 'name',
     }],
     style: {
       property: 'score',
       values: {
         'A': { color: '#54BA46' },
         'B': { color: '#FFFF39' },
         'C': { color: '#FF9326' },
         'D': { color: '#C92429' },
       },
     }
}));

• Add some widgets

dashboard.addWidget(new GeoDashboard.CountWidget({
     title: 'Total Communities',
     server: 'https://geoserver.siasar.org/geoserver',
     layer: 'siasar:communities',
}));

dashboard.addWidget(new GeoDashboard.AggregateWidget({
     title: 'Total Population',
     server: 'https://geoserver.siasar.org/geoserver',
     layer: 'siasar:communities',
     property: 'population',
     function: 'Sum',
}));

• Call the render function

dashboard.render();

• And... that's it! Go and navigate your new GeoDashboard.

Demo

• Using files: Source, Live
• Using node package and webpack: Source, Live

Thanks ThreeFunkyMonkeys for hosting GeoServer with demo data!

Docs

For further details on objects, see the documentation.

Testing

GeoDashboard uses BrowserStack for testing automation. BrowserStack is a cloud-based cross-browser testing tool that enables developers to test their websites across various browsers on different operating systems and mobile devices, without requiring users to install virtual machines, devices or emulators.

Thanks BrowserStack for supporting OpenSource projects!