Update map-layer._registerMediaQuery so that when the observed media

attribute is removed or set to the empty string, the map-layer goes through the initialization process, as though it was newly connected to the DOM (it may go from disabled to enabled due to the removal).
Maps4HTML · Dec 18, 2024 · 8e4aa79 · 8e4aa79
1 parent f8fff7f
commit 8e4aa79
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/src/layer.js b/src/layer.js
@@ -134,19 +134,18 @@ export class BaseLayerElement extends HTMLElement {
     if (!this._changeHandler) {
       // Define and bind the change handler once
       this._changeHandler = () => {
+        this._onRemove();
         if (this._mql.matches) {
           // TODO evaluate if _onAdd does the right thing for this situation
           this._onAdd();
-        } else {
-          // TODO evaluate if _onRemove does the right thing for this situation
-          this._onRemove();
         }
         // set the disabled 'read-only' attribute indirectly, via _validateDisabled
         this._validateDisabled();
       };
     }
 
     if (mq) {
+      // a new media query is being established
       let map = this.getMapEl();
       if (!map) return;
 
@@ -160,9 +159,14 @@ export class BaseLayerElement extends HTMLElement {
       this._changeHandler(); // Initial evaluation
       this._mql.addEventListener('change', this._changeHandler);
     } else if (this._mql) {
+      // the media attribute removed or query set to ''
       // Clean up the existing listener
       this._mql.removeEventListener('change', this._changeHandler);
       delete this._mql;
+      // effectively, no / empty media attribute matches, do what changeHandler does
+      this._onRemove();
+      this._onAdd();
+      this._validateDisabled();
     }
   }
   getMapEl() {

diff --git a/test/e2e/elements/map-layer/map-layer-media.html b/test/e2e/elements/map-layer/map-layer-media.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>&lt;map-layer&gt; media attribute test</title>
+    <meta charset="UTF-8">
+    <script type="module" src="mapml.js"></script>
+    <style>
+      html {
+        height: 100%
+      }
+
+      body {
+        height: inherit
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;" controls zoom="2" lat="68" lon="-87" controls projection="CBMTILE">
+      <!-- map loads at z=2, so both layers should be enabled -->
+      <map-layer data-testid="initial-mq" media="(0 <= map-zoom <=3)" checked>
+        <map-title>media query: (0 <= map-zoom <=3)</map-title>
+        <map-meta name="projection" content="CBMTILE"></map-meta>
+        <map-meta name="extent" content="top-left-easting=-2985112, top-left-northing=5403578, bottom-right-easting=3629485, bottom-right-northing=-1211019"></map-meta>
+        <!<!-- to be enabled, a map-layer must have in-view content -->
+        <map-feature min="0" max="17"><map-geometry cs="gcrs"><map-point><map-coordinates>-87 68</map-coordinates></map-point></map-geometry></map-feature>
+      </map-layer>
+      <!-- at z=4, only this layer should be enabled -->
+      <map-layer data-testid="no-initial-mq"  src="dummy-cbmtile-cbmt.mapml" checked></map-layer>
+
+      <!-- adding a media attribute value of media="(0 <= map-zoom <=3)" to the above layer while map is at z=4
+           should result in the above layer being disabled until z is in range.
+           This tests that the media attribute is 'observed' -->
+
+      <!-- removing the media attribute while the above layer is disabled due to
+      the media query mismatch should result in the layer being re-enanbled and the
+      disable attribute cleared -->
+    </mapml-viewer>
+  </body>
+</html>