Shared parameters for WMS and WMTS sources

🟡 Intermediate

map

osp-maps osp-web osp-variables

Offline map display standard points on map

This example covers the configuration parameters shared by both WMS and WMTS sources, such as offline tile assets, layer definitions and dashboard wiring.

• Declare offline tile assets (PMTiles) used by both WMS and WMTS map dashboards.

• Configure layer files (layer.ospp, layer.maps, layer.web) shared across source types.

• Link geographic points via geo.maps and owner.variables to their respective values.

• Wire the dashboard to load assets and display the configured layers.

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

Learning goals

Note

If you are looking for WMTS and WMS examples see those examples :

• WMTS

• WMS

• Describe how to display a WMTS 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": {
        "protomapSource": "/osp/resources/tiles/fr.pmtiles",
        "library": "MapLibre",
        "centerPosition": [
          7.139734,
          46.806418
        ],
        "layerOptions": [],
        "zoomLevel": 14,
        "sharedParameters": [
          {
            "id": "floor",
            "type": "Select",
            "style": "Floor",
            "label": "Floor",
            "defaultValue": "0",
            "options": [
              {
                "value": "0"
              },
              {
                "value": "1"
              },
              {
                "value": "2"
              }
            ]
          }
        ],
        "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": "Shared"
              }
            ]
          }
        ],
        "wmtsSources": [
          {
            "sourceName": "myWMTSLayer",
            "urlTemplate": "http://your-hostname:your-port/patho/to/wmts/${floor}/${tileMatrixSet}/{z}/{x}/{y}.png",
            "format": "image/png",
            "tileSize": 256,
            "urlRequestParameters": [
              {
                "id": "tileMatrixSet",
                "type": "Static",
                "defaultValue": "webmercator"
              },
              {
                "id": "floor",
                "type": "Shared"
              }
            ]
          }
        ]
      }
    }
  ],
  "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
}