Update default CS and Projection for layer

index.html

@@ -76,7 +76,6 @@
       <map-caption>A pleasing map of Canada</map-caption>
       <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
       <layer- label="Hat Guy" checked>
-        <map-meta name="projection" content="CBMTILE"></map-meta>
         <map-feature id="twohats" zoom="15" class="twohats">
         <map-properties>
           <table>
@@ -117,7 +116,7 @@
             </tr>
           </table>
         </map-properties>
-        <map-geometry cs="gcrs">
+        <map-geometry>
           <map-point>
             <map-coordinates>-75.705278 45.397778</map-coordinates>
           </map-point>

src/map-feature.js

@@ -303,14 +303,32 @@ export class MapFeature extends HTMLElement {
   _getNativeZoomAndCS(content) {
     // content: referred to <layer- > if the <layer- > has inline <map-extent>, <map-feature> or <map-tile>
     //          referred to remote mapml if the <layer- > has a src attribute, and the fetched mapml contains <map-feature>
+    //          referred to [map-meta, ...] if it is query
     //          referred to null otherwise (i.e. <layer- > has fetched <map-extent> in shadow, the <map-feature> attaches to <map-extent>'s shadow)
     let nativeZoom, nativeCS;
     if (this._extentEl) {
       // feature attaches to extent's shadow
       if (this._extentEl.querySelector('map-link[rel=query]')) {
         // for query, fallback zoom is the current map zoom level that the query is returned
-        nativeZoom = this._map.getZoom();
-        nativeCS = 'pcrs';
+        let metaZoom, metaCS;
+        if (content) {
+          metaZoom = M._metaContentToObject(
+            Array.prototype.filter
+              .call(content, function (elem) {
+                return elem.matches('map-meta[name=zoom]');
+              })[0]
+              ?.getAttribute('content')
+          ).content;
+          metaCS = M._metaContentToObject(
+            Array.prototype.filter
+              .call(content, function (elem) {
+                return elem.matches('map-meta[name=cs]');
+              })[0]
+              ?.getAttribute('content')
+          ).content;
+        }
+        nativeZoom = metaZoom || this._map.getZoom();
+        nativeCS = metaCS || 'gcrs';
       } else if (this._extentEl.querySelector('map-link[rel=features]')) {
         // for templated feature, read fallback from the fetched mapml's map-meta[name=zoom / cs]
         nativeZoom = this._extentEl._nativeZoom;
@@ -340,7 +358,7 @@ export class MapFeature extends HTMLElement {
           csLength = csMeta?.length;
         nativeCS = csLength
           ? csMeta[csLength - 1].getAttribute('content')
-          : 'pcrs';
+          : 'gcrs';
         return { zoom: nativeZoom, cs: nativeCS };
       }
     }
@@ -361,7 +379,9 @@ export class MapFeature extends HTMLElement {
         // calculate feature extent
         let map = this._map,
           geometry = this.querySelector('map-geometry'),
-          native = this._getNativeZoomAndCS(this._layer._content),
+          native = this._getNativeZoomAndCS(
+            this._layer._content || this._layer.metas
+          ),
           cs = geometry.getAttribute('cs') || native.cs,
           // zoom level that the feature rendered at
           zoom = this.zoom || native.zoom,

src/mapml/handlers/QueryHandler.js

@@ -109,6 +109,12 @@ export var QueryHandler = L.Handler.extend({
               features = Array.prototype.slice.call(
                 mapmldoc.querySelectorAll('map-feature')
               );
+            // <map-meta> elements
+            layer.metas = Array.prototype.slice.call(
+              mapmldoc.querySelectorAll(
+                'map-meta[name=cs], map-meta[name=zoom], map-meta[name=projection]'
+              )
+            );
             if (features.length)
               layer._mapmlFeatures = layer._mapmlFeatures.concat(features);
           } else {
@@ -246,6 +252,7 @@ export var QueryHandler = L.Handler.extend({
       }
     }
     function displayFeaturesPopup(features, loc) {
+      if (features.length === 0) return;
       let f = M.featureLayer(features, {
         // pass the vector layer a renderer of its own, otherwise leaflet
         // puts everything into the overlayPane
@@ -279,7 +286,7 @@ export var QueryHandler = L.Handler.extend({
       layer.on('popupclose', function () {
         map.removeLayer(f);
       });
-      f.showPaginationFeature({ i: 0, popup: layer._popup });
+      f.showPaginationFeature({ i: 0, popup: layer._popup, meta: layer.metas });
     }
   }
 });

src/mapml/layers/FeatureLayer.js

@@ -88,14 +88,21 @@ export var FeatureLayer = L.FeatureGroup.extend({
   showPaginationFeature: function (e) {
     if (this.options.query && this._mapmlFeatures[e.i]) {
       let feature = this._mapmlFeatures[e.i];
-      // remove the prev / next one <map-feature> from shadow if there is any
-      feature._extentEl.shadowRoot.firstChild?.remove();
+      // empty the map-extent shadowRoot
+      // remove the prev / next one <map-feature> and <map-meta>'s from shadow if there is any
+      feature._extentEl.shadowRoot.replaceChildren();
       this.clearLayers();
       feature._featureGroup = this.addData(
         feature,
         this.options.nativeCS,
         this.options.nativeZoom
       );
+      // append all map-meta from mapml document
+      if (e.meta) {
+        for (let i = 0; i < e.meta.length; i++) {
+          feature._extentEl.shadowRoot.appendChild(e.meta[i]);
+        }
+      }
       feature._extentEl.shadowRoot.appendChild(feature);
       e.popup._navigationBar.querySelector('p').innerText =
         e.i + 1 + '/' + this.options._leafletLayer._totalFeatureCount;
@@ -116,21 +123,51 @@ export var FeatureLayer = L.FeatureGroup.extend({
     }
   },
 
+  // _getNativeVariables: returns an object with the native zoom and CS,
+  //                     based on the map-metas that are available within
+  //                     the layer or the fallback default values.
+  // _getNativeVariables: mapml-||layer-||null||[map-feature,...] -> {zoom: _, val: _}
+  // mapml can be a mapml- element, layer- element, null, or an array of map-features
   _getNativeVariables: function (mapml) {
-    let nativeZoom =
-      (mapml.querySelector &&
-        mapml.querySelector('map-meta[name=zoom]') &&
-        +M._metaContentToObject(
-          mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
-        ).value) ||
-      0;
-    let nativeCS =
-      (mapml.querySelector &&
-        mapml.querySelector('map-meta[name=cs]') &&
-        M._metaContentToObject(
-          mapml.querySelector('map-meta[name=cs]').getAttribute('content')
-        ).content) ||
-      'PCRS';
+    let nativeZoom, nativeCS;
+    // when mapml is an array of features provided by the query
+    if (
+      mapml.length &&
+      mapml[0].parentElement.parentElement &&
+      mapml[0].parentElement.parentElement.tagName === 'mapml-'
+    ) {
+      let mapmlEl = mapml[0].parentElement.parentElement;
+      nativeZoom =
+        (mapmlEl.querySelector &&
+          mapmlEl.querySelector('map-meta[name=zoom]') &&
+          +M._metaContentToObject(
+            mapmlEl.querySelector('map-meta[name=zoom]').getAttribute('content')
+          ).value) ||
+        0;
+      nativeCS =
+        (mapmlEl.querySelector &&
+          mapmlEl.querySelector('map-meta[name=cs]') &&
+          M._metaContentToObject(
+            mapmlEl.querySelector('map-meta[name=cs]').getAttribute('content')
+          ).content) ||
+        'GCRS';
+    } else {
+      // when mapml is null or a layer-/mapml- element
+      nativeZoom =
+        (mapml.querySelector &&
+          mapml.querySelector('map-meta[name=zoom]') &&
+          +M._metaContentToObject(
+            mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
+          ).value) ||
+        0;
+      nativeCS =
+        (mapml.querySelector &&
+          mapml.querySelector('map-meta[name=cs]') &&
+          M._metaContentToObject(
+            mapml.querySelector('map-meta[name=cs]').getAttribute('content')
+          ).content) ||
+        'GCRS';
+    }
     return { zoom: nativeZoom, cs: nativeCS };
   },
 

src/mapml/layers/MapMLLayer.js

@@ -1428,6 +1428,15 @@ export var MapMLLayer = L.Layer.extend({
             projectionMatch =
               projection && projection === layer.options.mapprojection;
           }
+        } else {
+          // default projection set to parent projection when no map-meta projection element present
+          projection = layer.options.mapprojection;
+          projectionMatch = true;
+          serverMeta = projection;
+          console.log(
+            `A projection was not assigned to the '${this._layerEl.label}' Layer. Please specify a projection for that layer using a map-meta element. See more here - https://maps4html.org/web-map-doc/docs/elements/meta/`
+          );
+          // TODO: Add a more obvious warning.
         }
 
         var metaExtent = mapml.querySelector('map-meta[name=extent]'),
@@ -1496,7 +1505,13 @@ export var MapMLLayer = L.Layer.extend({
             }
           }
         } else {
-          layer._extent = serverMeta;
+          if (typeof serverMeta === 'string') {
+            // when map-meta projection not present for layer
+            layer._extent = { serverMeta };
+          } else {
+            // when map-meta projection present for layer
+            layer._extent = serverMeta;
+          }
         }
         layer._parseLicenseAndLegend(mapml, layer, projection);
 
@@ -1728,7 +1743,7 @@ export var MapMLLayer = L.Layer.extend({
     let extent = this._extent._mapExtents
       ? this._extent._mapExtents[0]
       : this._extent; // the projections for each extent eould be the same (as) validated in _validProjection, so can use mapExtents[0]
-    if (!extent) return FALLBACK_PROJECTION;
+    if (extent.serverMeta) return extent.serverMeta;
     switch (extent.tagName.toUpperCase()) {
       case 'MAP-EXTENT':
         if (extent.hasAttribute('units'))

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -159,7 +159,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
                     .querySelector('map-meta[name=cs]')
                     .getAttribute('content')
                 ).content) ||
-              'PCRS');
+              'GCRS');
             features.addData(mapml, nativeCS, nativeZoom);
             // "migrate" to extent's shadow
             // make a clone, prevent the elements from being removed from mapml file

test/e2e/core/metaDefault.html

@@ -34,6 +34,15 @@
           tref="http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
       </map-extent>
     </layer->
+    <layer- label="Default meta" checked>
+      <map-feature>
+        <map-geometry>
+          <map-point>
+            <map-coordinates>-79.477626 43.764814</map-coordinates>
+          </map-point>
+        </map-geometry>
+      </map-feature>
+    </layer->
   </mapml-viewer>
 
 </body>

test/e2e/core/metaDefault.test.js

@@ -90,4 +90,8 @@ test.describe('Playwright Missing Min Max Attribute, Meta Default Tests', () =>
       expectedGCRSSecondLayer.bottomRight
     );
   });
+  test("Layer with no map-meta's is rendered on map", async () => {
+    let vector = await page.locator('.mapml-vector-container > svg');
+    await expect(vector).toHaveCount(1);
+  });
 });

test/e2e/layers/queryLink.test.js

@@ -130,7 +130,8 @@ test.describe('Playwright Query Link Tests', () => {
       const featureCount = await page.evaluate(
         `document.querySelector('mapml-viewer > layer- > map-extent').shadowRoot.children.length`
       );
-      expect(featureCount).toEqual(1);
+      // shadowRoot contains 1 map-feature and 3 map-meta (cs, zoom, projection)
+      expect(featureCount).toEqual(4);
       const property = await page.evaluate(
         `document.querySelector('mapml-viewer > layer- > map-extent').shadowRoot.querySelector('map-properties').innerText.trim()`
       );

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

@@ -71,7 +71,7 @@ test.describe('Playwright Custom TCRS Tests', () => {
 
     expect(featureThree).toEqual('M382 -28L809 -28L809 399L382 399z');
     expect(featureFour).toEqual(
-      'M55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231L55 231z'
+      'M150 429L171 426L175 438L181 457L183 461L185 463L185 465L187 465L185 468L185 470L184 472L186 477L186 481L188 485L182 486L154 490L154 492L157 494L157 497L158 498L156 501L154 501L151 499L150 495L149 495L148 498L148 501L144 501L141 477L141 448L141 431L139 430L150 429z'
     );
 
     expect(staticFeatures).toEqual(false);