Display a WMS source as an image

🟢 Beginner

map

This example shows how to display a WMS (Web Map Service) raster source as an image layer inside an OnSphere map dashboard.

Configure a WMS layer using the shared layer files (layer.ospp, layer.maps, layer.web).
Declare geographic points with geo.maps and owner.variables to position them on the map.
Wire the dashboard to display the WMS image layer alongside the configured points.

git checkout origin/osp-maps-configuration .
git checkout origin/osp-web-configuration .
git checkout origin/osp-variables-configuration .
git checkout origin/example-maps-display-wms .

Learning goals

Note

If you are looking for WMTS example see this example :

WMS

Describe how to display a WMS source in a Map.

Description

The Maps module lets users display external sources:

WMTS
WMS

Each of those sources are added as a layer in the Map.

Warning

This example only works if you replace the place holders for the wms server and wmts server host names and adapt the parameters to your use case.

Configuration structure

Steps

root/feature/protomaps/layers/layer.ospp

{
  "configuration": [
    {
      "id": "map",
      "type": "Maps",
      "title": "",
      "mapsWidgetSettings": {
        "layerOptions": [],
        "protomapSource": "/osp/resources/tiles/fr.pmtiles",
        "library": "MapLibre",
        "centerPosition": [
          7.139734,
          46.806418
        ],
        "zoomLevel": 14,
        "wmsSources": [
          {
            "sourceName": "site-wms",
            "urlTemplate": "https://your-wms-host/wms?service=WMS&version=1.1.1&request=GetMap&layers=${layer}&styles=&transparent=true&format=${format}&width=256&height=256&srs=EPSG:3857&bbox={bbox-epsg-3857}&cql_filter=floor='${floor}'",
            "format": "image/png",
            "tileSize": 256,
            "urlRequestParameters": [
              {
                "id": "layer",
                "type": "Static",
                "defaultValue": "planning:plan_base"
              },
              {
                "id": "floor",
                "type": "Select",
                "label": "Etage",
                "defaultValue": "RS",
                "options": [
                  {
                    "value": "E3"
                  },
                  {
                    "value": "E2"
                  },
                  {
                    "value": "E1"
                  },
                  {
                    "value": "RS"
                  },
                  {
                    "value": "RI"
                  },
                  {
                    "value": "S1"
                  },
                  {
                    "value": "S2"
                  },
                  {
                    "value": "S3"
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ],
  "layout": {
    "lg": [
      {
        "w": 12,
        "h": 6,
        "x": 0,
        "y": 0,
        "i": "map"
      }
    ]
  },
  "breakpoints": {
    "lg": 1200,
    "md": 996,
    "sm": 768,
    "xs": 480,
    "xxs": 0
  },
  "cols": {
    "lg": 12,
    "md": 10,
    "sm": 6,
    "xs": 4,
    "xxs": 2
  },
  "rowHeight": 150
}