Update map-zoom handling to compare current map zoom against query

src/mapml-viewer.js

@@ -1004,7 +1004,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
       },
       'map-projection': {
         type: 'discrete',
-        values: [this.projection.toLowerCase()]
+        values: [this.projection.toLowerCase()] // change this in map-projectionchange event handler
       },
       'map-zoom': {
         type: 'range',
@@ -1013,7 +1013,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
         canBeZero: true,
         extraValues: {
           min: 0,
-          max: M[this.projection].options.resolutions.length - 1
+          max: this.zoom // change this on map-moveend
         }
       },
       'prefers-color-scheme': {
@@ -1037,10 +1037,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
       if (feature === 'prefers-lang') {
         return features['prefers-lang'].values.includes(queryValue).toString;
       } else if (feature === 'map-zoom') {
-        return (
-          queryValue >= features['map-zoom'].extraValues.min &&
-          queryValue <= features['map-zoom'].extraValues.max
-        ).toString();
+        return evaluateMapZoomFeature(featureNode, this.zoom);
       } else if (feature === 'map-projection') {
         return features['map-projection'].values
           .some((p) => p === queryValue)
@@ -1062,12 +1059,45 @@ export class HTMLMapmlViewerElement extends HTMLElement {
       solveUnknownFeature
     });
 
+    function evaluateMapZoomFeature(featureNode, currentZoom) {
+      const { context, feature, value, op } = featureNode;
+
+      if (feature !== 'map-zoom') {
+        return 'unknown'; // Only handling 'map-zoom' in this function
+      }
+
+      if (context === 'value') {
+        // Plain case: <mf-name>: <mf-value>
+        // Example: (map-zoom: 15)
+        return currentZoom === value.value ? 'true' : 'false';
+      }
+
+      if (context === 'range') {
+        // Range case: <mf-name> <mf-comparison> <mf-value>
+        // Example: (map-zoom < 15), (map-zoom >= 10)
+        switch (op) {
+          case '<':
+            return currentZoom < value.value ? 'true' : 'false';
+          case '<=':
+            return currentZoom <= value.value ? 'true' : 'false';
+          case '>':
+            return currentZoom > value.value ? 'true' : 'false';
+          case '>=':
+            return currentZoom >= value.value ? 'true' : 'false';
+          default:
+            return 'unknown';
+        }
+      }
+
+      return 'unknown'; // If the context is neither "value" nor "range"
+    }
+
     // Make mediaQueryList an EventTarget for dispatching events
     const mediaQueryList = Object.assign(new EventTarget(), {
       matches,
       media: query,
       listeners: [],
-
+      // this is a client facing api
       addEventListener(event, listener) {
         if (event === 'change') {
           this.listeners.push(listener);
@@ -1076,10 +1106,11 @@ export class HTMLMapmlViewerElement extends HTMLElement {
           if (this.listeners.length !== 0) {
             observeProperties();
           }
+          EventTarget.prototype.addEventListener.call(this, event, listener);
         }
-        EventTarget.prototype.addEventListener.call(this, event, listener);
       },
 
+      // this is a client facing api
       removeEventListener(event, listener) {
         if (event === 'change') {
           this.listeners = this.listeners.filter((l) => l !== listener);
@@ -1088,13 +1119,18 @@ export class HTMLMapmlViewerElement extends HTMLElement {
           if (this.listeners.length === 0) {
             stopObserving();
           }
+          EventTarget.prototype.removeEventListener.call(this, event, listener);
         }
-        EventTarget.prototype.removeEventListener.call(this, event, listener);
       }
     });
 
     const observeProperties = () => {
-      const notifyIfChanged = () => {
+      const notifyIfChanged = (mapEvent) => {
+        if (mapEvent.name === 'map-projectionchange') {
+          features['map-projection'].values = [this.projection.toLowerCase()];
+        } else if (mapEvent.name === 'map-moveend') {
+          features['map-zoom'].extraValues.max = this.zoom;
+        }
         const newMatches = solveMediaQueryList(parsedQuery, {
           features,
           solveUnknownFeature
@@ -1106,19 +1142,15 @@ export class HTMLMapmlViewerElement extends HTMLElement {
           mediaQueryList.dispatchEvent(new Event('change'));
         }
       };
-
+      notifyIfChanged.bind(this);
       // Subscribe to internal events for changes in projection, zoom, and extent
-      this.addEventListener('projectionchange', notifyIfChanged);
-      this.addEventListener('moveend', notifyIfChanged);
-
-      // Optional: Simulate language changes with an interval
-      const languageChangeInterval = setInterval(notifyIfChanged, 1000); // Simplified example
+      this.addEventListener('map-projectionchange', notifyIfChanged);
+      this.addEventListener('map-moveend', notifyIfChanged);
 
       // Stop observing function
       stopObserving = () => {
-        this.removeEventListener('projectionchange', notifyIfChanged);
-        this.removeEventListener('moveend', notifyIfChanged);
-        clearInterval(languageChangeInterval);
+        this.removeEventListener('map-projectionchange', notifyIfChanged);
+        this.removeEventListener('map-moveend', notifyIfChanged);
       };
     };