Display a WMTS source as a layer

🟢 Beginner

map

osp-maps osp-web osp-variables

Offline map display standard points on map

This example shows how to display a WMTS (Web Map Tile Service) source as a tile layer inside an OnSphere map dashboard.

• Configure a WMTS tile 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 WMTS tile 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-offline-display-standard .
git checkout origin/example-maps-display-wmts .

Learning goals

Note

If you are looking for WMS example see this example :

• 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,
        "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": "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
}