Save some work from today hopefully without breaking stuff

Author: Peter Rushforth

src/map-feature.js

@@ -1,5 +1,7 @@
 import { bounds, point } 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) => {
@@ -266,7 +271,64 @@ export class HTMLFeatureElement extends HTMLElement {
     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 tile
+    if (this.isFirst()) {
+      return null; // No previous tile 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()
+      });
+      this.addFeature(this._featureLayer);
+
+      // add featureLayer to TemplatedFeaturesOrTilesLayerGroup 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-link.js

@@ -10,7 +10,6 @@ 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 { templatedPMTilesLayer } from './mapml/layers/TemplatedPMTilesLayer.js';
 import { templatedFeaturesOrTilesLayerGroup } from './mapml/layers/TemplatedFeaturesOrTilesLayerGroup.js';
 /* global M */
@@ -437,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
+      //  TemplatedFeaturesOrTilesLayerGroup
       //
       // 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