node package manager

geodashboard

GeoDashboard Build Status

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

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!