Better WMTS layer creation

app/src/Docs.vue

@@ -199,6 +199,7 @@ async function getFirstTenRecords() {
         <pre>
 import TileLayer from 'ol/layer/Tile';
 import WMTS from 'ol/source/WMTS';
+import { transformExtent } from 'ol/proj';
 import { WmtsEndpoint } from '@camptocamp/ogc-client';
 
 // create the OpenLayers map
@@ -226,6 +227,13 @@ async function addWmtsLayer() {
       projection: matrixSet.crs,
       dimensions,
     }),
+    // this will limit the rendering to the actual range where data is available
+    maxResolution: tileGrid.getResolutions()[0],
+    extent: transformExtent(
+      layer.latLonBoundingBox,
+      'EPSG:4326',
+      openLayersMap.getView().getProjection()
+    );
   });
   openLayersMap.addLayer(layer);
 }</pre

app/src/components/wmts/WmtsLayerInfo.vue

@@ -44,37 +44,11 @@ import TileLayer from 'ol/layer/Tile';
 import WMTS from 'ol/source/WMTS';
 import proj4 from 'proj4';
 import { register } from 'ol/proj/proj4';
+import { transformExtent } from 'ol/proj';
 
 // this is necessary for tile reprojection to work
 register(proj4);
 
-async function addWmtsLayer(olMap) {
-  const endpoint = await new WmtsEndpoint(
-    'https://my.server.org/wmts'
-  ).isReady();
-  const layer = endpoint.getLayers()[0];
-  const matrixSetLink = layer.matrixSets[0];
-  const tileGrid = await endpoint.getOpenLayersTileGrid(
-    layer.name,
-    matrixSetLink.identifier
-  );
-  const resourceLink = layer.resourceLinks[0];
-  const dimensions = endpoint.getDefaultDimensions(layer.name);
-  const olLayer = new TileLayer({
-    source: new WMTS({
-      layer: this.layer.name,
-      matrixSet: matrixSetLink.identifier,
-      format: resourceLink.format,
-      url: resourceLink.url,
-      requestEncoding: resourceLink.encoding,
-      tileGrid,
-      projection: matrixSetLink.crs,
-      dimensions,
-    }),
-  });
-  olMap.addLayer(olLayer);
-}
-
 export default {
   name: 'WmtsLayerInfo',
   components: { InfoList },
@@ -136,7 +110,16 @@ export default {
             projection: matrixSetLink.crs,
             dimensions,
           }),
+          maxResolution: tileGrid.getResolutions()[0],
         });
+        if (this.layer.latLonBoundingBox) {
+          const extent = transformExtent(
+            this.layer.latLonBoundingBox,
+            'EPSG:4326',
+            'EPSG:3857'
+          );
+          layer.setExtent(extent);
+        }
         this.olMap.addLayer(layer);
       },
     },

src/wmts/endpoint.ts

@@ -3,10 +3,10 @@ import { setQueryParams } from '../shared/http-utils.js';
 import { useCache } from '../shared/cache.js';
 import { parseWmtsCapabilities } from '../worker/index.js';
 import {
-  WmtsLayerDimensionValue,
-  WmtsLayerResourceLink,
   WmtsEndpointInfo,
   WmtsLayer,
+  WmtsLayerDimensionValue,
+  WmtsLayerResourceLink,
   WmtsMatrixSet,
 } from './model.js';
 import { generateGetTileUrl } from './url.js';
@@ -209,8 +209,12 @@ export default class WmtsEndpoint {
         (matrixSet) => matrixSet.identifier === matrixSetIdentifier
       ) ?? layer.matrixSets[0];
     const matrixSet = this.getMatrixSetByIdentifier(matrixSetLink.identifier);
-    return this.tileGridModule.then(({ buildOpenLayersTileGrid }) =>
-      buildOpenLayersTileGrid(matrixSet, matrixSetLink.limits)
-    );
+    return this.tileGridModule.then((olTileGridModule) => {
+      if (!olTileGridModule) return null;
+      return olTileGridModule.buildOpenLayersTileGrid(
+        matrixSet,
+        matrixSetLink.limits
+      );
+    });
   }
 }