If this is the last feature or tile to be removed from a static layer

context, i.e. as child of a <map-layer>, the container for the MapFeatureLayer
or the MapTileLayer should be removed from the layer rendered dom;
includes basic tests of this for both types of static content.

Update ToDo file, index.html to remind me to fix problems with 
TemplatedFeaturesOrTilesLayer

Author: Peter Rushforth

ToDo

@@ -94,3 +94,22 @@ sibling's MapTileLayer GridLayer.  This behaviour is implemented by <map-feature
 when being added to the shadow root of a <map-link> element, with the 
 TemplatedFeaturesOrTilesLayer being the analog of MapLayer in this case.
 
+TemplatedFeaturesOrTilesLayer; the query selector on line 210 should restrict itself
+by content type and it should specifically exclude map-extent.
+
+TemplatedFeaturesOrTilesLayer is effectively the operation behind 
+<map-link rel="features">
+
+on moveend, it fetches from the filled-in template and appends the content it finds to
+the <map-link> shadowRoot.  The <map-feature> and <map-tile> built in behaviours
+take over from there. The trouble is now that there is different built-in behaviour,
+especially for <map-feature>, that the _container is left with empty <svg> elements
+after each move or zoom, and these build up.  Figure out how to make them go
+away after the last <map-feature> is removed.  This is something to do with
+the parameterization of the MapFeatureLayer (via options), and the associated
+renderer possibly.  Anyway, fix it and add a test.
+
+I updated index.html to access the GeoServer canada provinces layer which includes
+a <map-link rel="features"> that can be used to debug.  Will have to figure out
+how to test it without a dynamic server, but it does need a test.
+

index.html

@@ -12,7 +12,7 @@ export class HTMLFeatureElement extends HTMLElement {
   }
 
   /* jshint ignore:start */
-  #hasConnected;
+  #hasConnected; // prevents attributeChangedCallback before connectedCallback
   /* jshint ignore:end */
   get zoom() {
     // for templated or queried features ** native zoom is only used for zoomTo() **
@@ -223,6 +223,12 @@ export class HTMLFeatureElement extends HTMLElement {
     this._observer.disconnect();
     if (this._featureLayer) {
       this.removeFeature(this._featureLayer);
+      // If this was the last feature in the layer, clean up the layer
+      if (this._featureLayer.getLayers().length === 0) {
+        this._featureLayer.remove();
+        this._featureLayer = null;
+        delete this._featureLayer;
+      }
     }
   }
 

src/map-feature.js

@@ -11,7 +11,7 @@ export class HTMLTileElement extends HTMLElement {
     return ['row', 'col', 'zoom', 'src'];
   }
   /* jshint ignore:start */
-  #hasConnected;
+  #hasConnected; // prevents attributeChangedCallback before connectedCallback
   #initialRow;
   #initialCol;
   #initialZoom;
@@ -119,7 +119,7 @@ export class HTMLTileElement extends HTMLElement {
     /* jshint ignore:end */
     // Get parent element to determine how to handle the tile
     // Need to handle shadow DOM correctly like map-feature does
-    this._parentElement =
+    this._parentEl =
       this.parentNode.nodeName.toUpperCase() === 'MAP-LAYER' ||
       this.parentNode.nodeName.toUpperCase() === 'LAYER-' ||
       this.parentNode.nodeName.toUpperCase() === 'MAP-LINK'
@@ -141,6 +141,7 @@ export class HTMLTileElement extends HTMLElement {
 
       // If this was the last tile in the layer, clean up the layer
       if (this._tileLayer._mapTiles && this._tileLayer._mapTiles.length === 0) {
+        this._tileLayer.remove();
         this._tileLayer = null;
         delete this._tileLayer;
       }
@@ -217,24 +218,24 @@ export class HTMLTileElement extends HTMLElement {
   getMeta(metaName) {
     let name = metaName.toLowerCase();
     if (name !== 'cs' && name !== 'zoom' && name !== 'projection') return;
-    let sdMeta = this._parentElement.shadowRoot.querySelector(
+    let sdMeta = this._parentEl.shadowRoot.querySelector(
       `map-meta[name=${name}][content]`
     );
-    if (this._parentElement.nodeName === 'MAP-LINK') {
+    if (this._parentEl.nodeName === 'MAP-LINK') {
       // sd.map-meta || map-extent meta || layer meta
-      return sdMeta || this._parentElement.parentElement.getMeta(metaName);
+      return sdMeta || this._parentEl.parentElement.getMeta(metaName);
     } else {
-      return this._parentElement.src
-        ? this._parentElement.shadowRoot.querySelector(
+      return this._parentEl.src
+        ? this._parentEl.shadowRoot.querySelector(
             `map-meta[name=${name}][content]`
           )
-        : this._parentElement.querySelector(`map-meta[name=${name}][content]`);
+        : this._parentEl.querySelector(`map-meta[name=${name}][content]`);
     }
   }
   async _createOrGetTileLayer() {
-    await this._parentElement.whenReady();
+    await this._parentEl.whenReady();
     if (this.isFirst()) {
-      const parentElement = this._parentElement;
+      const parentElement = this._parentEl;
 
       // Create a new MapTileLayer
       this._tileLayer = mapTileLayer({

src/map-tile.js

@@ -222,6 +222,9 @@ export var MapFeatureLayer = FeatureGroup.extend({
       delete this._queryFeatures;
       DomUtil.remove(this._container);
     }
+    if (this._context === 'static') {
+      DomUtil.remove(this._container);
+    }
     FeatureGroup.prototype.onRemove.call(this, map);
     this._map.featureIndex.cleanIndex();
   },

src/mapml/layers/MapFeatureLayer.js

@@ -16,4 +16,63 @@ test.describe('map-feature rendering tests', () => {
       maxDiffPixels: 100
     });
   });
+  test('removing a map-feature from DOM removes its rendering', async ({
+    page
+  }) => {
+    await page.goto('static-features.html');
+    // Wait for initial rendering
+    await page.waitForTimeout(1000);
+    const viewer = page.getByTestId('viewer');
+    let nFeatures = await viewer.evaluate(
+      (v) => v.querySelectorAll('map-feature').length
+    );
+    expect(nFeatures).toEqual(5);
+    const f = page.locator('map-feature').first();
+    const rendered = await f.evaluate((f) => {
+      f._featureLayer._container.setAttribute(
+        'data-testid',
+        'test-feature-container'
+      );
+      f._groupEl.setAttribute('data-testid', 'test-feature-rendering');
+      return f._groupEl.isConnected;
+    });
+    expect(rendered).toBe(true);
+    await expect(page.getByTestId('test-feature-rendering')).toHaveCount(1);
+    await expect(page.getByTestId('test-feature-container')).toHaveCount(1);
+    await f.evaluate((f) => f.remove());
+    await expect(page.getByTestId('test-feature-rendering')).toHaveCount(0);
+    await expect(
+      page
+        .getByTestId('test-feature-container')
+        .locator('g[aria-label="Feature"]')
+    ).toHaveCount(4);
+  });
+
+  test('removing last map-feature in a sequence removes rendering container', async ({
+    page
+  }) => {
+    await page.goto('static-features.html');
+    // Wait for initial rendering
+    await page.waitForTimeout(1000);
+    const viewer = page.getByTestId('viewer');
+    let nFeatures = await viewer.evaluate(
+      (v) => v.querySelectorAll('map-feature').length
+    );
+    expect(nFeatures).toEqual(5);
+    const containerConnected = await viewer.evaluate((v) => {
+      v.querySelector('map-feature')._featureLayer._container.setAttribute(
+        'data-testid',
+        'test-feature-container'
+      );
+      return v.querySelector('map-feature')._featureLayer._container
+        .isConnected;
+    });
+    expect(containerConnected).toBe(true);
+    nFeatures = await viewer.evaluate((v) => {
+      v.querySelectorAll('map-feature').forEach((el) => el.remove());
+      return v.querySelectorAll('map-feature').length;
+    });
+    expect(nFeatures).toEqual(0);
+    await expect(page.getByTestId('test-feature-container')).toHaveCount(0);
+  });
 });

test/e2e/elements/map-feature/map-feature-rendering.test.js

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>mixedLayer.html</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="mapml.js"></script>
+  <style>
+    map-layer {
+        display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <mapml-viewer data-testid="viewer" width="500" height="500" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
+
+    <map-layer label="Static inline content" checked>
+      <map-meta name="zoom" content="min=0,max=10"></map-meta>
+      <map-meta name="projection" content="CBMTILE"></map-meta>
+      <!-- for features, zoom is advisory (min/max control rendering) -->
+      <!-- these features should be in one MapFeatureLayer -->
+
+      <!-- test the z-index of these features -->
+      <map-feature zoom="2" min="2" max="2"> col="10" row="10" 
+        <map-geometry cs="tilematrix">
+          <map-polygon>
+            <map-coordinates>10 10 11 10 11 11 10 11 10 10</map-coordinates>
+          </map-polygon>
+        </map-geometry>
+      </map-feature>
+      <map-feature zoom="2" min="2" max="2"> col="10" row="11" 
+        <map-geometry cs="tilematrix">
+          <map-polygon>
+            <map-coordinates>10 11 10 12 11 12 11 11 10 11</map-coordinates>
+          </map-polygon>
+        </map-geometry>
+      </map-feature>
+      <map-feature zoom="2" min="2" max="2"> col="9" row="11" 
+        <map-geometry cs="tilematrix">
+          <map-polygon>
+            <map-coordinates>9 11 9 12 10 12 10 11 9 11</map-coordinates>
+          </map-polygon>
+        </map-geometry>
+      </map-feature>
+      <map-feature zoom="2" min="2" max="2"> col="9" row="10" 
+        <map-geometry cs="tilematrix">
+          <map-polygon>
+            <map-coordinates>9 10 9 11 10 11 10 10 9 10</map-coordinates>
+          </map-polygon>
+        </map-geometry>
+      </map-feature>
+      <map-feature zoom="2" min="2" max="2"> col="11" row="11" 
+        <map-geometry cs="tilematrix">
+          <map-polygon>
+            <map-coordinates>11 11 11 12 12 12 12 11 11 11</map-coordinates>
+          </map-polygon>
+        </map-geometry>
+      </map-feature>
+    </map-layer>
+
+    <map-layer id="US" label="static remote features" src="data/us_pop_density.mapml" ></map-layer>
+  </mapml-viewer>
+
+</body>
+
+</html>

test/e2e/elements/map-feature/static-features.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <mapml-viewer width="500" height="500" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
+  <mapml-viewer data-testid="viewer" width="500" height="500" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
 
     <map-layer label="Static Tile Test Layer" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
@@ -46,4 +46,4 @@
 
 </body>
 
-</html>
+</html>

test/e2e/elements/map-tile/map-tile-test.html

@@ -110,6 +110,32 @@ test.describe('Map Tile Dynamic Updates Tests', () => {
     expect(removedTiles.removedCount).toBeGreaterThan(0);
   });
 
+  test('removing the last map-tile in a sequence removes MapTileLayer container', async () => {
+    // Reset by reloading the page
+    await page.reload();
+    await page.waitForTimeout(1000);
+
+    const viewer = page.getByTestId('viewer');
+    let nTiles = await viewer.evaluate(
+      (v) => v.querySelectorAll('map-tile').length
+    );
+    expect(nTiles).toEqual(15);
+    const containerConnected = await viewer.evaluate((v) => {
+      v.querySelector('map-tile')._tileLayer._container.setAttribute(
+        'data-testid',
+        'test-tile-container'
+      );
+      return v.querySelector('map-tile')._tileLayer._container.isConnected;
+    });
+    expect(containerConnected).toBe(true);
+    nTiles = await viewer.evaluate((v) => {
+      v.querySelectorAll('map-tile').forEach((el) => el.remove());
+      return v.querySelectorAll('map-tile').length;
+    });
+    expect(nTiles).toEqual(0);
+    await expect(page.getByTestId('test-tile-container')).toHaveCount(0);
+  });
+
   test('adding map-tile to DOM renders it on map', async () => {
     // Reset by reloading the page
     await page.reload();