Plugins 〉Geomap Panel WMS


Developer
Felix Müller


Sign up to receive occasional product news and updates:



Panel
community

Geomap Panel WMS

  • Overview
  • Installation
  • Change log
  • Related content

Geomap WMS Panel Plugin

Build Test e2e Playwright Plugin validation Linting Compatibility GitHub Release

💡 This project uses semantic versioning.

About

This plugin evolved from the Orchestra Cities Map Panel-Plugins. It extends the original version by the functionality of the intergration of an OGC Web Map Service (WMS version 1.3.0) as a base map layer. Additionally the plugin ships with an interactive filter tool to query data by spatial conditions. Also a minimal implementation of datalinks is provided to update dashboard variables by clicking on a map feature.

Due to Grafana Labs' plugin guidelines it was necessary to remove the Nextzen basemap layer, since it required to store the API key in the config, which should be avoided in panel plugins.

Features

  • Integration of OGC WMS 1.3.0 as base map layer
  • Interactive spatial filter
  • Minimal data links implementation

Using the Geomap WMS Panel Plugin

⚠️ Currently only WMS of version 1.3.0 is supported ⚠️

  1. In the selection Base layer choose the type OGC Web Map Sevice
  2. In the text field URL type in the base url of the WMS endpoint (NOTE: Only the URL of the service endpoint WITHOUT request parameters, e.g. https://geoportal.muenchen.de/geoserver/gsm/wms)
  3. Successively choose layers from the drop down list

Example 1): WMS Basemap with 3 layers

Layer names:

  • g_stadtkarte_gesamt_gtay
  • g_stadtspaziergang_moosach_route_a
  • baustellen_2_weeks

Example 2): WMS Basemap with 3 layers (layer names have whitespaces)

Layer names:

  • Blöcke
  • Linie_u_Stadtplanü. bis 150k
  • stehende Gewässer generalisiert

⚠️ Troubleshooting data layers when merging multiple datasource queries into one map layer

In some occasions it might be necessary to join mutliple datasource queries into one output dataset to summarize information coming from different sources in a single map layer. This can be achieved by applying transformations on the returned data frames.

alt text

alt text

This often results in data structure like the following which might be inspected in the debug view in the transformations panel missing the metadata properties like query "name" and "refId".

alt text

The above data structure is not compatible with Geomap Panel Plugin's query input which expects a data frame with metadata fields like "refId" or "meta".

alt text

A workaround to solve this problem is to use the prepare time series transformation with the setting "Wide time series" as last transformation in the processing chain.

alt text

The latter trasnformation a "meta" field to the data object and therefore can now be processed by the Geomap Panel Plugin.

alt text

Using the spatial filter tool

An additional feature of the Geomap WMS Plugin is the spatial filter tool that allows drawing a polygon on the map panel to be used as filter for a data query. The polygon is representated as Well-known-text (WKT) and stored in a dashboard variable "geomap_wms_spatial_filter_geometry".

⚠️ It is mandatory to name the dashbaord variable "geomap_wms_spatial_filter_geometry" ⚠️

⚠️ The spatial filter tool uses the geographic coordinate system urn:ogc:def:crs:OGC::CRS84 with the axis order longitude, latitude. Openlayers (dependency of the geomap plugin) uses the CRS CSR:84 as alias for EPSG:4326 (source), even if the official axis order of EPSG:4326 defines latitude, longitude. This is because the Proj4Js-Library uses the order [x=longitude,y=latitude] by default. ⚠️

To enable the spatial filter tool follow the steps below:

  1. Create a dashboard variable of type "Constant" and the name "geomap_wms_spatial_filter_geometry" (the spatial filter tool will update this variable internally and as for now does not provide the functionality of setting a different variable name externally). As initial value use e.g. POLYGON((-180 -90,180 -90,180 90,-180 90,-180 -90)), to selec all, if no polygon is drawn.

  1. Use the dashboard variable in a datasource query, e.g. the SensorThings API, which allows the filtering by providing a WKT in the geometry function:

/Things?$expand=Locations&$filter=substringof(name,'${tree_sensor:csv}') and st_intersects(Locations/location, geography'${geomap_wms_spatial_filter_geometry}')

  1. Enable the tool in the panel editor, press save or apply and leave edit mode

  1. Activate the tool in the panel

  1. Draw a polygon as spatial filter geometry. To apply the geometry set the last point on the starting point. After that the panels and datasources which use the variable "geomap_wms_spatial_filter_geometry" are updated automatically. To delete the geometry click on the cross symbol.

Using data links

The Geomap WMS Panel Plugin allows the use of dataLinks to update a dashboard variable with data of the clicked feature. This enables interactions between the map panel and other panels in the dashbaord, which use the same dashboard variable in their data queries. To make use of this functionality a datalink has to be created (see the official documentation) on how to do that.

⚠️ As of now the plugin is only able to handle 1 (the first) data link ⚠️

This example demonstrates how to configure the Geomap WMS Panel Plugin to update a dashboard variable "ladestationen" with the value of the data field of name "name" by clicking on a feature on the map.

alt text

alt text

Clicking on a certain feature on the map results in both, updating the map as well as all the panels which use the dashboard variable "ladestationen" in their queries.

Before: alt text

After: alt text

Development

Status of the original repository

This repository refers to the following version of its original: https://github.com/orchestracities/map-panel/tree/c0d3a19ce910b9c3ab8416f5a609afb10ff8c0fe

Technical setup

  • Grafana >= 10.0.2 as Docker container with bind mounts to host filesystem mounting following conatiner directory /var/lib/grafana/plugins
  • node v20.3.1
  • npm 10.5.0
  • Linux-based OS Windows with WSL

Installing Geomap Panel WMS on Grafana Cloud:

For more information, visit the docs on plugin installation.

Changelog

1.0.1 (2024-06-13)

Bug Fixes

  • mapvieweditor.tsx: fix undefined lastGeomapPanelInstance which is necessary to set current view (0d6cf89)

1.0.0 (2024-05-07)

Initial release.