Add map-tile element

layer.js - no longer tests to see if the bounds have been previously calculated,
updates the _layer.bounds field whenever extent getter executes

- MapMLLayer usage refactored to use MapLayer per the element name association

- _validateDisabled method updated to account for replacement of StaticTileLayer by MapTileLayer

- replaced reliance of _validateDisabled on presence of properties such as
MapLayer['_staticTileLayer'] by using the array ['_staticTileLayer','_mapmlvectors','_extentLayer']
only as a driver of the loop used to validate that each child layer of the
LayerGroup's extent is enabled or not.  the _mapmlvectors step is not completely
worked out, will get done in subsequent work tbc...

map-extent.js - applied name refactoring required by renaming ExtentLayer.js to
MapExtentLayer.js

map-feature.js

- changed addFeature a bit. changes look ok tbd, but the whole dependence of map-feature.js
on MapFeatureLayer.createGeometry as a factory method for creating the geometry
as a Leaflet layer should be revisited and hopefully simplified.  Why not just
construct a geometry via new Geometry?

- for the use case of a <map-feature> loaded via a <map-link>, created a group of
  new methods, patterned after/ copied from <map-tile>:
    - _createOrGetFeatureLayer - runs conditional on the feature being loaded as
      part of <map-link> processing.  Called during connectedCallback
    - isFirst - determines if this element is the first such element in a sequence
              of elements named the same i.e. map-feature.  If it is, used by
              _createOrGetFeatureLayer to construct a FeatureLayeer constructed
               as a holder for features that are constructed and removed with each
              map movement.
    - getPrevious - returns the previous sibling element of the <map-feature> with no checks
      as to what kind of element it is.  The notion is that it's only called when
      isFirst returns false, so the returned sibling element is guaranteed to be a map-feature
      (well, isFirst tests the name such that it must be equal to the name of this node,
      which in this case is map-feature).

map-link.js - imports and constructs the newly refactored TemplatedFeaturesOrTilesLayer instead
of only TemplatedFeaturesLayer

map-select.js - changed a comment that mentioned MapMLLayer

map-tile.js  - new.

mapml-viewer.js - imports and defines the map-tile element and HTMLTileElement interface

LayerControl.js - udpated a comment that referred to MapMLLayer

AnnounceMovement.js updated a comment that referred to MapMLLayer

index.js - imports and defines the map-tile element and HTMLTileElement interface from mapml-viewer.js

ExtentLayer.js - renamed to MapExtentLayer.js

FeatureLayer.js - updated a comment that referred to MapMLLayer

MapFeatureLayer.js - new.  not used yet

MapLayer.js - refactoring of MapMLLayer.js:
  - adds getContainer public method
  - in onAdd, removes addition of static tile layer to LayerGroup
  - removes the use of MapMLLayer['_staticTileLayer'], replaces with using the
    string '_staticTileLayer' as a key to determine action to be taken in the
    bounds calculation loop
  - removes the processTiles construction method

MapTileLayer.js - new.  Replaces StaticTileLayer.

TemplatedFeaturesOrTilesLayer.js - new. replaces TemplatedFeaturesLayer, since
we now support <map-tile> in template processing response documents.

TemplatedTileLayer.js - updated to support vector tiles that contain <map-tile>
elements.

map-bounding-box.test.js - add waitForTimeout to overcome flakiness.

drag.test.js - replace detection of class that was renamed / removed when StaticTileLayer was
eliminated

missingMetaParameters.html - add comment to clarify intent to future me

map-link-media.html - remove use of external resource, replace with content from test data

featureLayer.test.js - udpate comment mentioning MapMLLayer to MapLayer

multipleExtents.test.js, multipleExtents.html - update to support new classes used by
features or tiles support in templated link.  Modernize the test a bit to make
it more readable.  Still an ugly large test.

staticTileLayer.test.js - update

templatedPMTilesCBMTILETest.html - added map-link for stylesheet module. Not sure why this
test was working previously, maybe I misunderstood, but I think it was a cut and
paste error.

templatedPMTilesMVTLayer.test.js - changed expectation that layer will not be disabled
to expect that layer WILL be disabled, because the particular layer didn't have
a stylesheet and so could never be enabled, despite multiple projections available

customTCRS.test.js - one test was using static tiles, updated to continue working

playwright.config.js - added global directive to ignore https errors.  These were
causing intermittent problems with tests on work network.

Author: Peter Rushforth

.gitignore

@@ -11,4 +11,4 @@
 /test-results/
 .idea/
 *.iml
-test.html
+test.html

package-lock.json

@@ -11,6 +11,7 @@ export default defineConfig({
   use: {
       headless: true,
       browserName: 'chromium',
-      baseURL: 'http://localhost:30001/'
+      baseURL: 'http://localhost:30001/',
+      ignoreHTTPSErrors: true
   }
-});
+});

playwright.config.js

@@ -1,7 +1,8 @@
 import { setOptions, DomUtil, bounds, point } from 'leaflet';
 
 import { Util } from './mapml/utils/Util.js';
-import { MapMLLayer, mapMLLayer } from './mapml/layers/MapMLLayer.js';
+import { MapLayer, mapLayer } from './mapml/layers/MapLayer.js';
+import { MapTileLayer } from './mapml/layers/MapTileLayer.js';
 import { createLayerControlHTML } from './mapml/elementSupport/layers/createLayerControlForLayer.js';
 
 export class BaseLayerElement extends HTMLElement {
@@ -72,7 +73,7 @@ export class BaseLayerElement extends HTMLElement {
 
   get extent() {
     // calculate the bounds of all content, return it.
-    if (this._layer && !this._layer.bounds) {
+    if (this._layer) {
       this._layer._calculateBounds();
     }
     return this._layer
@@ -296,7 +297,7 @@ export class BaseLayerElement extends HTMLElement {
             this.selectAlternateOrChangeProjection();
           })
           .then(() => {
-            this._layer = mapMLLayer(new URL(this.src, base).href, this, {
+            this._layer = mapLayer(new URL(this.src, base).href, this, {
               projection: this.getProjection(),
               opacity: this.opacity
             });
@@ -333,7 +334,7 @@ export class BaseLayerElement extends HTMLElement {
             this.selectAlternateOrChangeProjection();
           })
           .then(() => {
-            this._layer = mapMLLayer(null, this, {
+            this._layer = mapLayer(null, this, {
               projection: this.getProjection(),
               opacity: this.opacity
             });
@@ -467,7 +468,7 @@ export class BaseLayerElement extends HTMLElement {
    * Runs the effects of the mutation observer, which is to add map-features' and
    * map-extents' leaflet layer implementations to the appropriate container in
    * the map-layer._layer: either as a sub-layer directly in the LayerGroup
-   * (MapMLLayer._layer) or as a sub-layer in the MapMLLayer._mapmlvectors
+   * (MapLayer._layer) or as a sub-layer in the MapLayer._mapmlvectors
    * FeatureGroup
    */
   _runMutationObserver(elementsGroup) {
@@ -633,6 +634,19 @@ export class BaseLayerElement extends HTMLElement {
   }
 
   _validateDisabled() {
+    const countTileLayers = () => {
+      let totalCount = 0;
+      let disabledCount = 0;
+
+      this._layer.eachLayer((layer) => {
+        if (layer instanceof MapTileLayer) {
+          totalCount++;
+          if (!layer.isVisible()) disabledCount++;
+        }
+      });
+
+      return { totalCount, disabledCount };
+    };
     // setTimeout is necessary to make the validateDisabled happen later than the moveend operations etc.,
     // to ensure that the validated result is correct
     setTimeout(() => {
@@ -671,10 +685,15 @@ export class BaseLayerElement extends HTMLElement {
                     if (mapExtents[i]._validateDisabled())
                       disabledExtentCount++;
                   }
-                } else if (layer[type]) {
-                  // not a templated layer
+                } else if (type === '_mapmlvectors') {
+                  // inline / static features
                   totalExtentCount++;
                   if (!layer[type].isVisible()) disabledExtentCount++;
+                } else {
+                  // inline tiles
+                  const tileLayerCounts = countTileLayers();
+                  totalExtentCount += tileLayerCounts.totalCount;
+                  disabledExtentCount += tileLayerCounts.disabledCount;
                 }
               }
             }

src/layer.js

@@ -1,7 +1,7 @@
 import { bounds as Lbounds, point as Lpoint } from 'leaflet';
 
 import { Util } from './mapml/utils/Util.js';
-import { extentLayer } from './mapml/layers/ExtentLayer.js';
+import { mapExtentLayer } from './mapml/layers/MapExtentLayer.js';
 import { createLayerControlExtentHTML } from './mapml/elementSupport/extents/createLayerControlForExtent.js';
 
 /* global M */
@@ -251,7 +251,7 @@ export class HTMLExtentElement extends HTMLElement {
     // when projection is changed, the parent map-layer._layer is created (so whenReady is fulfilled) but then removed,
     // then the map-extent disconnectedCallback will be triggered by map-layer._onRemove() (clear the shadowRoot)
     // even before connectedCallback is finished
-    // in this case, the microtasks triggered by the fulfillment of the removed MapMLLayer should be stopped as well
+    // in this case, the microtasks triggered by the fulfillment of the removed MapLayer should be stopped as well
     // !this.isConnected <=> the disconnectedCallback has run before
     if (!this.isConnected) return;
     /* jshint ignore:start */
@@ -263,7 +263,7 @@ export class HTMLExtentElement extends HTMLElement {
     // this._opacity is used to record the current opacity value (with or without updates),
     // the initial value of this._opacity should be set as opacity attribute value, if exists, or the default value 1.0
     this._opacity = this.opacity || 1.0;
-    this._extentLayer = extentLayer({
+    this._extentLayer = mapExtentLayer({
       opacity: this.opacity,
       crs: M[this.units],
       extentZIndex: Array.from(
@@ -432,7 +432,7 @@ export class HTMLExtentElement extends HTMLElement {
   _handleChange() {
     // add _extentLayer to map if map-extent is checked, otherwise remove it
     if (this.checked && !this.disabled && this.parentLayer._layer) {
-      // can be added to mapmllayer layerGroup no matter map-layer is checked or not
+      // can be added to MapLayer LayerGroup no matter map-layer is checked or not
       this._extentLayer.addTo(this.parentLayer._layer);
       this._extentLayer.setZIndex(
         Array.from(

src/map-extent.js

@@ -1,5 +1,7 @@
-import { bounds, point } from 'leaflet';
+import { bounds, point, extend } from 'leaflet';
 
+import { featureLayer } from './mapml/layers/FeatureLayer.js';
+import { featureRenderer } from './mapml/features/featureRenderer.js';
 import { Util } from './mapml/utils/Util.js';
 import proj4 from 'proj4';
 
@@ -180,6 +182,9 @@ export class HTMLFeatureElement extends HTMLElement {
       this._parentEl.parentElement?.hasAttribute('data-moving')
     )
       return;
+    if (this._parentEl.nodeName === 'MAP-LINK') {
+      this._createOrGetFeatureLayer();
+    }
     // use observer to monitor the changes in mapFeature's subtree
     // (i.e. map-properties, map-featurecaption, map-coordinates)
     this._observer = new MutationObserver((mutationList) => {
@@ -256,17 +261,97 @@ export class HTMLFeatureElement extends HTMLElement {
 
   addFeature(layerToAddTo) {
     this._featureLayer = layerToAddTo;
-    let parentLayer = this.getLayerEl();
     // "synchronize" the event handlers between map-feature and <g>
     if (!this.querySelector('map-geometry')) return;
     let fallbackCS = this._getFallbackCS();
-    let content = parentLayer.src ? parentLayer.shadowRoot : parentLayer;
     this._geometry = layerToAddTo.createGeometry(this, fallbackCS); // side effect: extends `this` with this._groupEl if successful, points to svg g element that renders to map SD
     if (!this._geometry) return;
+    this._geometry._layerEl = this.getLayerEl();
     layerToAddTo.addLayer(this._geometry);
     this._setUpEvents();
   }
+  isFirst() {
+    // Get the previous element sibling
+    const prevSibling = this.previousElementSibling;
+
+    // If there's no previous sibling, return true
+    if (!prevSibling) {
+      return true;
+    }
+
+    // Compare the node names (tag names) - return true if they're different
+    return this.nodeName !== prevSibling.nodeName;
+  }
+  getPrevious() {
+    // Check if this is the first element of a sequence
+    if (this.isFirst()) {
+      return null; // No previous element available
+    }
+
+    // Since we know it's not the first, we can safely return the previous element sibling
+    return this.previousElementSibling;
+  }
+  _createOrGetFeatureLayer() {
+    if (this.isFirst() && this._parentEl._templatedLayer) {
+      const parentElement = this._parentEl;
 
+      let map = parentElement.getMapEl()._map;
+
+      // Create a new FeatureLayer
+      this._featureLayer = featureLayer(null, {
+        // pass the vector layer a renderer of its own, otherwise leaflet
+        // puts everything into the overlayPane
+        renderer: featureRenderer(),
+        // pass the vector layer the container for the parent into which
+        // it will append its own container for rendering into
+        pane: parentElement._templatedLayer.getContainer(),
+        // the bounds will be static, fixed, constant for the lifetime of the layer
+        layerBounds: parentElement.getBounds(),
+        zoomBounds: this._getZoomBounds(),
+        projection: map.options.projection,
+        mapEl: parentElement.getMapEl(),
+        onEachFeature: function (properties, geometry) {
+          if (properties) {
+            const popupOptions = {
+              autoClose: false,
+              autoPan: true,
+              maxHeight: map.getSize().y * 0.5 - 50,
+              maxWidth: map.getSize().x * 0.7,
+              minWidth: 165
+            };
+            var c = document.createElement('div');
+            c.classList.add('mapml-popup-content');
+            c.insertAdjacentHTML('afterbegin', properties.innerHTML);
+            geometry.bindPopup(c, popupOptions);
+          }
+        }
+      });
+      // this is used by DebugOverlay testing "multipleExtents.test.js
+      // but do we really need or want each feature to have the bounds of the
+      // map link?  tbd
+      extend(this._featureLayer.options, {
+        _leafletLayer: Object.assign(this._featureLayer, {
+          _layerEl: this.getLayerEl()
+        })
+      });
+
+      this.addFeature(this._featureLayer);
+
+      // add featureLayer to TemplatedFeaturesOrTilesLayer of the parentElement
+      if (
+        parentElement._templatedLayer &&
+        parentElement._templatedLayer.addLayer
+      ) {
+        parentElement._templatedLayer.addLayer(this._featureLayer);
+      }
+    } else {
+      // get the previous feature's layer
+      this._featureLayer = this.getPrevious()?._featureLayer;
+      if (this._featureLayer) {
+        this.addFeature(this._featureLayer);
+      }
+    }
+  }
   _setUpEvents() {
     ['click', 'focus', 'blur', 'keyup', 'keydown'].forEach((name) => {
       // when <g> is clicked / focused / blurred

src/map-feature.js

@@ -10,7 +10,7 @@ import {
 import { Util } from './mapml/utils/Util.js';
 import { templatedImageLayer } from './mapml/layers/TemplatedImageLayer.js';
 import { templatedTileLayer } from './mapml/layers/TemplatedTileLayer.js';
-import { templatedFeaturesLayer } from './mapml/layers/TemplatedFeaturesLayer.js';
+import { templatedFeaturesOrTilesLayer } from './mapml/layers/TemplatedFeaturesOrTilesLayer.js';
 import { templatedPMTilesLayer } from './mapml/layers/TemplatedPMTilesLayer.js';
 /* global M */
 
@@ -436,7 +436,8 @@ export class HTMLLinkElement extends HTMLElement {
       //  be loaded as part of a templated layer processing i.e. on moveend
       //  and the generated <link> that implements this <map-link> should be located
       //  in the parent <map-link>._templatedLayer.container root node if
-      //  the _templatedLayer is an instance of TemplatedTileLayer or TemplatedFeaturesLayer
+      //  the _templatedLayer is an instance of TemplatedTileLayer or
+      //  TemplatedFeaturesOrTilesLayer
       //
       // if the parent node (or the host of the shadow root parent node) is map-layer, the link should be created in the _layer
       // container
@@ -551,12 +552,15 @@ export class HTMLLinkElement extends HTMLElement {
       if (!this.shadowRoot) {
         this.attachShadow({ mode: 'open' });
       }
-      this._templatedLayer = templatedFeaturesLayer(this._templateVars, {
+      // Use the FeaturesTilesLayerGroup to handle both map-feature and map-tile elements
+      this._templatedLayer = templatedFeaturesOrTilesLayer(this._templateVars, {
         zoomBounds: this.getZoomBounds(),
         extentBounds: this.getBounds(),
         zIndex: this.zIndex,
         pane: this.parentExtent._extentLayer.getContainer(),
-        linkEl: this
+        linkEl: this,
+        projection: this.mapEl._map.options.projection,
+        renderer: this.mapEl._map.options.renderer
       }).addTo(this.parentExtent._extentLayer);
     } else if (this.rel === 'query') {
       if (!this.shadowRoot) {

src/map-link.js

@@ -39,7 +39,7 @@ export class HTMLSelectElement extends HTMLElement {
     this._extentEl = this.parentElement;
     // TODO make the layer redraw after map-select change event
     // origin of this block was in _initTemplateVars from map-extent, which was
-    // originally part of MapMLLayer...
+    // originally part of MapLayer...
     //
     // use a throwaway div to parse the input from MapML into HTML
     this._createLayerControlForSelect();