Static tile layer changes - move code from onAdd to initialize

prushfor · prushforth · commit 1f71be278874 · 2023-09-26T15:43:00.000-04:00
Change (back) what StaticTileLayer.option._leafletLayer points to

update broken playwright tests
by removing the dom order dependency of the g elements + updating other methods of testing
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
@@ -161,18 +161,7 @@ export var MapMLLayer = L.Layer.extend({
     // content will be maintained
 
     //only add the layer if there are tiles to be rendered
-    if (
-      (!this._staticTileLayer || this._staticTileLayer._container === null) &&
-      this._mapmlTileContainer.getElementsByTagName('map-tiles').length > 0
-    ) {
-      this._staticTileLayer = M.staticTileLayer({
-        pane: this._container,
-        _leafletLayer: this,
-        className: 'mapml-static-tile-layer',
-        tileContainer: this._mapmlTileContainer,
-        maxZoomBound: map.options.crs.options.resolutions.length - 1,
-        tileSize: map.options.crs.options.crs.tile.bounds.max.x
-      });
+    if (this._staticTileLayer) {
       map.addLayer(this._staticTileLayer);
     }
 
@@ -868,7 +857,8 @@ export var MapMLLayer = L.Layer.extend({
       setLayerTitle();
       parseLicenseAndLegend();
       setZoomInOrOutLinks();
-      processTiles();
+      // crs is only set if the layer has the same projection as the map
+      if (layer._properties.crs) processTiles();
       processFeatures();
       M._parseStylesheetAsHTML(mapml, base, layer._container);
       layer._validateExtent();
@@ -1537,6 +1527,14 @@ export var MapMLLayer = L.Layer.extend({
             tiles.appendChild(document.importNode(newTiles[nt], true));
           }
           layer._mapmlTileContainer.appendChild(tiles);
+          layer._staticTileLayer = M.staticTileLayer({
+            pane: layer._container,
+            projection: layer._properties.projection,
+            className: 'mapml-static-tile-layer',
+            tileContainer: layer._mapmlTileContainer,
+            maxZoomBound: layer._properties.crs.options.resolutions.length - 1,
+            tileSize: layer._properties.crs.options.crs.tile.bounds.max.x
+          });
         }
       }
       function getAlternateStyles() {
diff --git a/src/mapml/layers/StaticTileLayer.js b/src/mapml/layers/StaticTileLayer.js
@@ -5,22 +5,21 @@ export var StaticTileLayer = L.GridLayer.extend({
       options.maxZoomBound
     );
     L.extend(options, this.zoomBounds);
+    L.extend(options, { _leafletLayer: this });
     L.setOptions(this, options);
     this._groups = this._groupTiles(
       this.options.tileContainer.getElementsByTagName('map-tile')
     );
-  },
-
-  onAdd: function () {
-    this._bounds = this._getLayerBounds(
-      this._groups,
-      this._map.options.projection
-    ); //stores meter values of bounds
+    this._bounds = this._getLayerBounds(this._groups, this.options.projection); //stores meter values of bounds
     this.layerBounds = this._bounds[Object.keys(this._bounds)[0]];
     for (let key of Object.keys(this._bounds)) {
       this.layerBounds.extend(this._bounds[key].min);
       this.layerBounds.extend(this._bounds[key].max);
     }
+  },
+
+  onAdd: function (map) {
+    this._map = map;
     L.GridLayer.prototype.onAdd.call(this, this._map);
     this._handleMoveEnd();
   },
@@ -116,7 +115,6 @@ export var StaticTileLayer = L.GridLayer.extend({
         projection
       );
     }
-
     return layerBounds;
   },
 
diff --git a/test/e2e/core/debugMode.test.js b/test/e2e/core/debugMode.test.js
@@ -40,7 +40,7 @@ test.describe('Playwright Map Element Tests', () => {
 
   test('Reasonable debug layer extent created', async () => {
     const feature = await page.$eval(
-      'xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path:nth-child(2)',
+      'xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path[stroke="#8DFF33"]',
       (tile) => tile.getAttribute('d')
     );
     expect(feature).toEqual(
@@ -50,15 +50,15 @@ test.describe('Playwright Map Element Tests', () => {
 
   test('Large debug layer extent created', async () => {
     const feature = await page.$eval(
-      'xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path:nth-child(4)',
+      'xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path[stroke="#E433FF"]',
       (tile) => tile.getAttribute('d')
     );
     expect(feature).toEqual('M-659 500L365 500L365 -780L-659 -780z');
   });
 
   test('Debug layer extent beyond ((0,0), (5,5))  created', async () => {
     const feature = await page.$eval(
-      'xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path:nth-child(6)',
+      'xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path[d="M-1683 1268L1133 1268L1133 -1292L-1683 -1292z"]',
       (tile) => tile.getAttribute('d')
     );
     expect(feature).toEqual('M-1683 1268L1133 1268L1133 -1292L-1683 -1292z');
diff --git a/test/e2e/core/mapFeature.test.js b/test/e2e/core/mapFeature.test.js
@@ -176,7 +176,7 @@ test.describe('Playwright MapFeature Custom Element Tests', () => {
 
   test('Default click method test', async () => {
     await page.pause();
-    
+
     // click method test
     // <map-feature> with role="button" should have popup opened after click
     const popup = await page.$eval('body > map', (map) => {
diff --git a/test/e2e/mapml-viewer/locateButton.test.js b/test/e2e/mapml-viewer/locateButton.test.js
@@ -22,13 +22,10 @@ test.describe('Geolocation control tests', () => {
 
   test('Using geolocation control to control map', async () => {
     await page.click('body > mapml-viewer');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
+    for (let i = 0; i < 7; i++) {
+      await page.keyboard.press('Tab');
+      await page.waitForTimeout(50);
+    }
     await page.keyboard.press('Enter');
 
     let locateButton_lat = await page.$eval(
diff --git a/test/e2e/mapml-viewer/mapml-viewer.html b/test/e2e/mapml-viewer/mapml-viewer.html
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-  <mapml-viewer data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
+  <mapml-viewer style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
     <layer- data-testid="testlayer" label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE">
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js
@@ -184,8 +184,9 @@ test.describe('Playwright mapml-viewer Element Tests', () => {
 
     await page.click('body > mapml-viewer');
     await page.keyboard.press('Control+v');
-    const viewer = await page.getByTestId('testviewer');
-    await viewer.evaluate((viewer) => viewer.whenLayersReady());
+    await page.$eval('body > mapml-viewer', (viewer) =>
+      viewer.whenLayersReady()
+    );
     const layerCount = await page.$eval(
       'body > mapml-viewer',
       (map) => map.layers.length
diff --git a/test/e2e/web-map/map.html b/test/e2e/web-map/map.html
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-  <map data-testid="testviewer" is="web-map" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
+  <map is="web-map" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
   	controls>
   	<layer- label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE">
diff --git a/test/e2e/web-map/map.test.js b/test/e2e/web-map/map.test.js
@@ -66,8 +66,7 @@ test.describe('Playwright web-map Element Tests', () => {
 
     await page.click('body > map');
     await page.keyboard.press('Control+v');
-    const viewer = await page.getByTestId('testviewer');
-    await viewer.evaluate((viewer) => viewer.whenLayersReady());
+    await page.$eval('body > map', (viewer) => viewer.whenLayersReady());
     const layerCount = await page.$eval(
       'body > map',
       (map) => map.layers.length
