The main objective of this application is to present geospatial data in three different ways: in maps, grids and charts. It was designed and built for this very purpose and is currenlty used in production as a module for a bigger application that produces advanced reports.


The data shown here comes from GMap (GeoGratis) and is used for demonstration purpose only. Please, wait while the provinces are loading. You should see them appear on the map after a couple of seconds.


The application uses a JSON configuration that could be fetched from a remote server dynamically generating it or it can be a plain file, like the one used by this demo. It contains a list of resources (layers), their services that publish them in WMS and WFS, their fields and how to display them in the chart. See the JSON configuration file used by this demo.

Layer tree

A resource (layer) tree is displayed in the left. Selecting (highlighting) one displays it on the right in the map, table and chart tabs. A right click on a layer name scrolls a menu in which you can get more information about it and recenter the map to its data extent.


The Map tab shows the currently selected layer on a map as a vector layer using its WFS configuration. One WMS layer is also displayed for each one defined. Here, each resource only have one and it is the same as their WFS counterpart, but you could add as many as you want. Hovering a feature on the map displays a popup with information about it. A click selects the feature, which is also selected in the Table tab grid. There's also a small legend displayed


The Table tab contains a grid with all fields defined in the resource configuration. A click on a row selects it in the grid and the map. You can select more than one by holding the Ctrl key. A click on the magnifier selects it and recenters the map to its location.


Finally, the Chart tab displays the data either as a pie or column chart depending on how the resource is configured. The data can be aggregated on a specific field and return the sum, mean or count of it. The "Provinces and Territories" resource demonstrates a sum of the area field per prov./terr. name. The "Drainage (subset)" one displays a simple column chart showing 2 fields: area and length.


The client application uses the ExtJS 4.1.0, GeoExt 2.0 (alpha) and OpenLayers as JavaScript libraries. The base map is served by a MapCache server using the TMS OGC protocol on OpenStreetMap data. The WMS and WFS services are published by MapServer.

Alexandre Dubé

Mapgears Inc.