set featureLayer._staticFeature for static features, fix failing tests

Author: yhy0217

src/map-feature.js

@@ -79,7 +79,7 @@ export class MapFeature extends HTMLElement {
             this._removeInFeatureList(oldValue);
             let native = this._getNativeZoomAndCS(layer._content);
             mapmlvectors.zoomBounds = M.getZoomBounds(
-              layerEl.shadowRoot || layerEl,
+              layer._content,
               native.zoom
             );
           }
@@ -160,7 +160,7 @@ export class MapFeature extends HTMLElement {
           let container = this._layer.shadowRoot || this._layer._layerEl;
           // update zoom bounds of vector layer
           mapmlvectors.zoomBounds = M.getZoomBounds(
-            container,
+            this._layer._content,
             this._getNativeZoomAndCS(this._layer._content).zoom
           );
         }
@@ -216,18 +216,20 @@ export class MapFeature extends HTMLElement {
     // if the <layer- > is not removed, then regenerate featureGroup and update the mapmlvectors accordingly
     let native = this._getNativeZoomAndCS(this._layer._content);
     this._featureGroup = mapmlvectors.addData(this, native.cs, native.zoom);
-    this._layer._setLayerElExtent();
     mapmlvectors._layers[this._featureGroup._leaflet_id] = this._featureGroup;
     this._groupEl = this._featureGroup.options.group;
     if (mapmlvectors._staticFeature) {
       let container = this._layer.shadowRoot || this._layer._layerEl;
       // update zoom bounds of vector layer
       mapmlvectors.zoomBounds = M.getZoomBounds(
-        container,
+        this._layer._content,
         this._getNativeZoomAndCS(this._layer._content).zoom
       );
+      // update layer bounds of vector layer
+      mapmlvectors.layerBounds = M.getBounds(this._layer._content);
       // add feature layers to map
       mapmlvectors._resetFeatures();
+      this._layer._setLayerElExtent();
       // update map's zoom limit
       this._map._addZoomLimit(mapmlvectors);
       L.extend(mapmlvectors.options, mapmlvectors.zoomBounds);

src/mapml/layers/FeatureLayer.js

@@ -40,28 +40,23 @@ export var FeatureLayer = L.FeatureGroup.extend({
       let native = M.getNativeVariables(mapml);
       this.options.nativeZoom = native.zoom;
       this.options.nativeCS = native.cs;
-    } else if (mapml) {
-      let native = M.getNativeVariables(mapml);
-      //needed to check if the feature is static or not, since this method is used by templated also
-      if (
-        !mapml.querySelector('map-extent') &&
-        mapml.querySelector('map-feature') &&
-        this.options.static
-      ) {
-        this._features = {};
-        this._staticFeature = true;
-        this.isVisible = true; //placeholder for when this actually gets updated in the future
-        this.zoomBounds = M.getZoomBounds(mapml, native.zoom);
-        this.layerBounds = M.getBounds(mapml);
-        L.extend(this.options, this.zoomBounds);
+    } else {
+      if (mapml) {
+        let native = M.getNativeVariables(mapml);
+        this.addData(mapml, native.cs, native.zoom);
+      } else if (!mapml) {
+        this.isVisible = false;
+        // use this.options._leafletLayer to distinguish the featureLayer constructed for initialization and for templated features / tiles
+        if (this.options._leafletLayer) {
+          // this._staticFeature should be set to true to make sure the _getEvents works properly
+          this._features = {};
+          this._staticFeature = true;
+        }
+        this.layerBounds = this.options.layerBounds
+          ? this.options.layerBounds
+          : null;
+        this.zoomBounds = this.options.zoomBounds;
       }
-      this.addData(mapml, native.cs, native.zoom);
-    } else if (!mapml) {
-      this.isVisible = false;
-      this.layerBounds = this.options.layerBounds
-        ? this.options.layerBounds
-        : null;
-      this.zoomBounds = this.options.zoomBounds;
     }
   },
 

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -37,6 +37,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
         pane: container,
         // the bounds will be static, fixed, constant for the lifetime of the layer
         layerBounds: this.extentBounds,
+        zoomBounds: this.zoomBounds,
         opacity: opacity,
         projection: map.options.projection,
         static: true,

src/mapml/layers/TemplatedTileLayer.js

@@ -163,10 +163,11 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       xOffset = coords.x * tileSize,
       yOffset = coords.y * tileSize;
 
-    let tileFeatures = M.featureLayer(null, {
+    let tileFeatures = M.featureLayer(markup, {
       projection: this._map.options.projection,
       static: false,
       layerBounds: this.extentBounds,
+      zoomBounds: this.zoomBounds,
       interactive: false
     });
 

test/e2e/core/mapContextMenu.test.js

@@ -581,6 +581,7 @@ test.describe('Playwright Map Context Menu Tests', () => {
     await page.click('body > map');
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('p');
+    await page.waitForTimeout(500);
     const layerLabel = await page.$eval(
       'body > map',
       (map) => map.layers[2].outerHTML

test/e2e/core/projectionChange.test.js

@@ -56,6 +56,7 @@ test.describe('Playwright Projection Change Tests', () => {
 
     test('Debug components update with projection changes', async () => {
       await page.reload();
+      await page.waitForTimeout(500);
       await page.$eval('body > map:nth-child(1)', (map) => map.toggleDebug());
 
       const colBefore = await page.$eval(
@@ -81,7 +82,8 @@ test.describe('Playwright Projection Change Tests', () => {
         await page.waitForTimeout(200);
       }
       await page.keyboard.press('Enter');
-      await page.waitForTimeout(2000);
+      // enter on the wrong thing
+      await page.waitForTimeout(1000);
 
       const colAfter = await page.$eval(
         'xpath=//html/body/map[1] >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-layer.mapml-debug-grid > div > div:nth-child(1)',

test/e2e/geojson/geojson2mapml.test.js

@@ -9,7 +9,7 @@ test.describe('GeoJSON API - geojson2mapml', () => {
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
     await page.goto('geojson2mapml.html');
-    //await page.waitForTimeout(10000);
+    await page.waitForTimeout(200);
   });
 
   test.afterAll(async function () {

test/e2e/layers/featureLayer.test.js

@@ -44,6 +44,7 @@ test.describe('Playwright featureLayer (Static Features) Layer Tests', () => {
     });
 
     test('Loading in retrieved features', async () => {
+      await page.waitForTimeout(200);
       const features = await page.$eval(
         'layer-#US',
         (layer) =>

test/e2e/mapml-viewer/customTCRS.test.js

@@ -17,6 +17,7 @@ test.describe('Playwright Custom TCRS Tests', () => {
   });
 
   test('Simple Custom TCRS, tiles load, mismatched layer disabled', async () => {
+    await page.waitForTimeout(100);
     const misMatchedLayerDisabled = await page.$eval(
       'body > mapml-viewer:nth-child(1)',
       (map) => map.querySelectorAll('layer-')[0].hasAttribute('disabled')