allow missing <map-input> el for zoom level when it isn't required (#754

) * allow missing <map-input> el for zoomlevel when it isn't required by tref * continue modifying codes, add a test * Add comment
Maps4HTML · Feb 16, 2023 · 11777d7 · 11777d7
1 parent abff1aa
commit 11777d7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
@@ -886,7 +886,8 @@ export var MapMLLayer = L.Layer.extend({
           }
 
           for (var i=0;i< tlist.length;i++) {
-            var t = tlist[i], template = t.getAttribute('tref'); 
+            var t = tlist[i], template = t.getAttribute('tref');
+            t.zoomInput = zoomInput;
             if(!template){
               template = BLANK_TT_TREF;
               let blankInputs = mapml.querySelectorAll('map-input');
@@ -909,12 +910,13 @@ export var MapMLLayer = L.Layer.extend({
               var varName = v[1],
                   inp = serverExtent.querySelector('map-input[name='+varName+'],map-select[name='+varName+']');
               if (inp) {
-
+                
                 if ((inp.hasAttribute("type") && inp.getAttribute("type")==="location") && 
-                    (!inp.hasAttribute("min" || !inp.hasAttribute("max"))) && 
+                    (!inp.hasAttribute("min") || !inp.hasAttribute("max")) && 
                     (inp.hasAttribute("axis") && !["i","j"].includes(inp.getAttribute("axis").toLowerCase()))){
-                  zoomInput.setAttribute("value", extentFallback.zoom);
-
+                  if (zoomInput && template.includes(`{${zoomInput.getAttribute('name')}}`)) {
+                    zoomInput.setAttribute("value", extentFallback.zoom);
+                  }
                   let axis = inp.getAttribute("axis"), 
                       axisBounds = M.convertPCRSBounds(extentFallback.bounds, extentFallback.zoom, projection, M.axisToCS(axis));
                   inp.setAttribute("min", axisBounds.min[M.axisToXY(axis)]);

diff --git a/src/mapml/layers/TemplatedTileLayer.js b/src/mapml/layers/TemplatedTileLayer.js
@@ -153,10 +153,15 @@ export var TemplatedTileLayer = L.TileLayer.extend({
                 !this._template.tilematrix.bounds[coords.z].contains(coords)) {
           return '';
         }
-        var obj = {};
+        var obj = {},
+            linkEl = this._template.linkEl,
+            zoomInput = linkEl.zoomInput;
         obj[this._template.tilematrix.col.name] = coords.x;
         obj[this._template.tilematrix.row.name] = coords.y;
-        obj[this._template.zoom.name] = this._getZoomForUrl();
+        if (zoomInput && (linkEl.hasAttribute('tref') && 
+            linkEl.getAttribute('tref').includes(`{${zoomInput.getAttribute('name')}}`))) {
+          obj[this._template.zoom.name] = this._getZoomForUrl();
+        }
         obj[this._template.pcrs.easting.left] = this._tileMatrixToPCRSPosition(coords, 'top-left').x;
         obj[this._template.pcrs.easting.right] = this._tileMatrixToPCRSPosition(coords, 'top-right').x;
         obj[this._template.pcrs.northing.top] = this._tileMatrixToPCRSPosition(coords, 'top-left').y;

diff --git a/test/e2e/layers/templatedTileLayer.html b/test/e2e/layers/templatedTileLayer.html
@@ -47,6 +47,16 @@
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
     </layer->
+
+    <layer- label="Templated Tile Layer for Zoom" checked>
+      <map-extent units="CBMTILE">
+        <map-input name="txmin" type="location" rel="tile" position="top-left" axis="easting" units="tilematrix" ></map-input>
+        <map-input name="tymin" type="location" rel="tile" position="bottom-left" axis="northing" units="tilematrix" ></map-input>
+        <map-input name="txmax" type="location" rel="tile" position="top-right" axis="easting" units="tilematrix" ></map-input>
+        <map-input name="tymax" type="location" rel="tile" position="top-left" axis="northing" units="tilematrix" ></map-input>
+        <map-link rel="tile" tref="https://datacube.services.geo.ca/ows/msi?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=TRUE&STYLES=msi-color&VERSION=1.3.0&LAYERS=msi&WIDTH=256&HEIGHT=256&CRS=EPSG:3978&BBOX={txmin},{tymin},{txmax},{tymax}" ></map-link>
+      </map-extent>
+    </layer->
   </map>
 </body>
 

diff --git a/test/e2e/layers/templatedTileLayer.test.js b/test/e2e/layers/templatedTileLayer.test.js
@@ -48,6 +48,16 @@ test.describe("Playwright mapMLTemplatedTile Layer Tests", () => {
       );
       expect(tiles).toEqual(8);
     });
+
+    test("Templated tile layer works without <map-input> for zoom level", async () => {
+      // tests fix for https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/669
+      await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
+      const layerCount = await page.$eval(
+        "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays",
+        (el) => el.children.length
+      );
+      expect(layerCount).toEqual(3);
+    });
   });
 
 });