node package manager


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="" />
  • Include GeoDashboard JS file
<script src=""></script>

Using node package

  • Install the package
npm install --save geo-dashboard


yarn add geo-dashboard
  • Require or import the module
const GeoDashboard = require('geo-dashboard');


import * as GeoDashboard from 'geo-dashboard';

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.getElementsById('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: '',
     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: '',
     layer: 'siasar:communities',
dashboard.addWidget(new GeoDashboard.AggregateWidget({
     title: 'Total Population',
     server: '',
     layer: 'siasar:communities',
     property: 'population',
     function: 'Sum',
  • Call the render function
  • And... that's it! Go and navigate your new GeoDashboard.



For further details on objects, see the documentation.