Fix adding wmts on reload (#1578)

swisstopo · Oct 10, 2024 · bba0979 · bba0979
2 parents b6fde60 + 370f0c1
commit bba0979
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/client/cypress/e2e/settings/mapSettings.cy.js b/src/client/cypress/e2e/settings/mapSettings.cy.js
@@ -33,9 +33,14 @@ describe("map settings", () => {
     cy.contains(wmsName);
     cy.contains(wmtsName);
 
+    // Reload page to verify layers are correctly added
+    cy.reload(true);
+    goToRouteAndAcceptTerms("/");
+
     // Remove layers
     cy.get('[data-cy="settings-button"]').click();
     cy.contains("Map").click();
+    cy.wait(1000);
     cy.get('[data-cy="maps-for-user-box"]').contains(wmtsName);
     cy.get('[data-cy="maps-for-user-box"]').contains(wmsName);
     cy.get('[data-cy="delete-user-map-button"]').eq(0).click();
@@ -44,6 +49,7 @@ describe("map settings", () => {
     cy.wait("@setting"); //¯\_(ツ)_/¯
 
     cy.get('[data-cy="maps-for-user-box"]').should("not.contain", wmsName);
+    cy.wait(1000);
 
     cy.get('[data-cy="delete-user-map-button"]').eq(0).click();
     cy.get('[data-cy="maps-for-user-box"]').should("not.exist");

diff --git a/src/client/src/components/map/mapComponent.jsx b/src/client/src/components/map/mapComponent.jsx
@@ -18,6 +18,7 @@ import { Cluster } from "ol/source";
 import TileWMS from "ol/source/TileWMS";
 import VectorSource from "ol/source/Vector";
 import WMTS from "ol/source/WMTS";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
 import proj4 from "proj4";
 import PropTypes from "prop-types";
 import { getGeojson } from "../../api-lib";
@@ -216,12 +217,22 @@ class MapComponent extends React.Component {
 
   //////  HANDLE CUSTOM USER LAYERS //////
   addWMTSLayer(identifier, layer) {
+    const tileGridConfig = {
+      ...layer.conf.tileGrid,
+      origin: null,
+      origins: layer.conf.tileGrid.origins_,
+      resolutions: layer.conf.tileGrid.resolutions_ || [],
+      matrixIds: layer.conf.tileGrid.matrixIds_ || [],
+    };
+
     const wmtsLayer = new TileLayer({
       visible: layer.visibility,
-      name: identifier,
       opacity: 1,
       source: new WMTS({
         ...layer.conf,
+        extent: swissExtent,
+        tileGrid: new WMTSTileGrid(tileGridConfig),
+        projection: getProjection(this.srs),
       }),
       zIndex: layer.position + 1,
     });