Work through a few issues to get basic function of prefers-lang,

prefers-color-scheme,map-projection,map-zoom working up to the initial
matches.  Tbd if this will need modification to support dynamic
evaluation of map properties to support attaching event handlers.

Not yet determined: how to implement map-extent support, because media
features are all either discrete or range types, and while it may
be possible to implemnent a bbox using four corner values as the 
pre-determined corners of the bbox, it is less clear how to represent
a bbox as a media feature value, which does not typically contain 
commas.

src/mapml-viewer.js

@@ -990,34 +990,83 @@ export class HTMLMapmlViewerElement extends HTMLElement {
     });
   }
   matchMedia(query) {
+    // useful features for maps: prefers-color-scheme, prefers-lang, projection, zoom, extent
     const parsedQuery = parseMediaQueryList(query);
 
-    const customFeatures = {
-      'prefers-lang': { type: 'discrete', values: navigator.languages },
-      projection: {
+    // less obviously useful: aspect-ratio, orientation, (device) resolution, overflow-block, overflow-inline
+
+    const currentBounds = [
+      this.extent.topLeft.pcrs.horizontal,
+      this.extent.bottomRight.pcrs.vertical,
+      this.extent.bottomRight.pcrs.horizontal,
+      this.extent.topLeft.pcrs.vertical
+    ];
+
+    const features = {
+      'prefers-lang': {
+        type: 'discrete',
+        values: [
+          ...new Set(navigator.languages.map((code) => code.slice(0, 2)))
+        ]
+      },
+      'map-projection': {
+        type: 'discrete',
+        values: [this.projection.toLowerCase()]
+      },
+      'map-zoom': {
+        type: 'range',
+        valueType: 'integer',
+        canBeNegative: false,
+        canBeZero: true,
+        extraValues: {
+          min: 0,
+          max: M[this.projection].options.resolutions.length - 1
+        }
+      },
+      'prefers-color-scheme': {
         type: 'discrete',
-        values: ['OSMTILE', 'CBMTILE', 'CUSTOM']
+        values: [
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+        ]
       },
-      zoom: { type: 'range', min: 1, max: 20 },
-      extent: { type: 'custom', evaluate: evaluateExtent }
+      'map-extent': {
+        type: 'discrete',
+        values: currentBounds
+      }
     };
 
-    const getCurrentEnvironment = () => ({
-      'prefers-lang': navigator.languages[0], // Simplified example
-      projection: this.projection,
-      zoom: this.zoom,
-      extent: this.extent
-    });
-
-    // Scoped function to evaluate extent, private to matchMedia
-    function evaluateExtent(value) {
-      // Custom logic for evaluating `extent` if needed
-      return true; // Placeholder: Implement extent evaluation as required
-    }
+    const solveUnknownFeature = (featureNode) => {
+      let feature = featureNode.feature;
+      let queryValue = featureNode.value.value;
+
+      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();
+      } else if (feature === 'map-projection') {
+        return features['map-projection'].values
+          .some((p) => p === queryValue)
+          .toString();
+      } else if (feature === 'prefers-color-scheme') {
+        return features['prefers-color-scheme'].values
+          .some((s) => s === queryValue)
+          .toString();
+      } else if (feature === 'map-extent') {
+        //        const [x1, y1, x2, y2] = queryValue.split(',').map(Number);
+        //        let queryBounds = bounds([x1, y1], [x2, y2]);
+        return 'false';
+      }
 
+      return 'false';
+    };
     let matches = solveMediaQueryList(parsedQuery, {
-      features: customFeatures,
-      environment: getCurrentEnvironment()
+      features,
+      solveUnknownFeature
     });
 
     // Make mediaQueryList an EventTarget for dispatching events
@@ -1053,10 +1102,9 @@ export class HTMLMapmlViewerElement extends HTMLElement {
 
     const observeProperties = () => {
       const notifyIfChanged = () => {
-        const environment = getCurrentEnvironment();
         const newMatches = solveMediaQueryList(parsedQuery, {
-          features: customFeatures,
-          environment
+          features,
+          solveUnknownFeature
         });
         if (newMatches !== mediaQueryList.matches) {
           mediaQueryList.matches = newMatches;