Get link in templated feature working. Update existing test to pass with

fix in place.

Author: prushforth

src/mapml/layers/DebugOverlay.js

@@ -255,7 +255,7 @@ export var DebugVectors = L.LayerGroup.extend({
                   .getLayerEl()
                   .getAttribute('data-testid')
               : layers[i].layerBounds &&
-                layers[i].options?._leafletLayer?._layerEl.hasAttribute(
+                layers[i].options?._leafletLayer?._layerEl?.hasAttribute(
                   'data-testid'
                 )
               ? layers[i].options._leafletLayer._layerEl.getAttribute(

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -65,6 +65,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
           geometry.bindPopup(c, { autoClose: false, minWidth: 108 });
         }
       });
+      L.extend(this._features.options, { _leafletLayer: this._features });
     } else {
       this._features.eachLayer((layer) => layer.addTo(map));
     }

test/e2e/elements/map-a/map-a-inline-or-remote-templated-issue-968.test.js

@@ -14,52 +14,62 @@ test.describe('map-a loaded inline or remote, directly or via templated map-link
   const contentLocations = ['inline', 'remote'];
   for (const inlineOrRemote of contentLocations) {
     test(`${inlineOrRemote} map-a-wrapped-map-geometry loaded directly creates a hyperlink`, async () => {
-      const directlyLoadedFeaturesLayer = await page.getByTestId(`${inlineOrRemote}-features`);
+      const directlyLoadedFeaturesLayer = await page.getByTestId(
+        `${inlineOrRemote}-features`
+      );
       const directlyLoadedFeaturesCount =
-        await directlyLoadedFeaturesLayer.evaluate(l => {
-          let node = (l.hasAttribute('src') ? l.shadowRoot : l); 
+        await directlyLoadedFeaturesLayer.evaluate((l) => {
+          let node = l.hasAttribute('src') ? l.shadowRoot : l;
           return node.querySelectorAll('map-feature').length;
-        }
-      );
+        });
       expect(directlyLoadedFeaturesCount).toBe(2);
       // one of them contains a map-a wrapping its map-geometry
       const directlyLoadedHyperlinksCount =
-        await directlyLoadedFeaturesLayer.evaluate(l => {
-          let node = (l.hasAttribute('src') ? l.shadowRoot : l); 
+        await directlyLoadedFeaturesLayer.evaluate((l) => {
+          let node = l.hasAttribute('src') ? l.shadowRoot : l;
           return node.querySelectorAll('map-feature:has(map-a)').length;
-        }
-        );
+        });
       expect(directlyLoadedHyperlinksCount).toBe(1);
       // all features should have a _groupEl prop (i.e. all features are rendered)
-      const directlyLoadedFeaturesRenderedCount = await directlyLoadedFeaturesLayer.evaluate(l => {
-          let node = (l.hasAttribute('src') ? l.shadowRoot : l); 
+      const directlyLoadedFeaturesRenderedCount =
+        await directlyLoadedFeaturesLayer.evaluate((l) => {
+          let node = l.hasAttribute('src') ? l.shadowRoot : l;
           const hasRendering = (f) => Boolean(f._groupEl);
-          return Array.from(node.querySelectorAll('map-feature')).filter(hasRendering).length;
-      });
-      expect(directlyLoadedFeaturesRenderedCount).toEqual(directlyLoadedFeaturesCount);
+          return Array.from(node.querySelectorAll('map-feature')).filter(
+            hasRendering
+          ).length;
+        });
+      expect(directlyLoadedFeaturesRenderedCount).toEqual(
+        directlyLoadedFeaturesCount
+      );
     });
     test(`${inlineOrRemote} map-a-wrapped-map-geometry loaded via templated map-link creates a hyperlink`, async () => {
       await page.waitForTimeout(500);
-      const templatedLoadedFeaturesContainer = await page.getByTestId(`${inlineOrRemote}-templated-link`);
+      const templatedLoadedFeaturesContainer = await page.getByTestId(
+        `${inlineOrRemote}-templated-link`
+      );
       const templatedLoadedFeaturesCount =
-        await templatedLoadedFeaturesContainer.evaluate(l => {
+        await templatedLoadedFeaturesContainer.evaluate((l) => {
           return l.shadowRoot.querySelectorAll('map-feature').length;
-        }
-      );
+        });
       expect(templatedLoadedFeaturesCount).toBe(2);
       // one of them contains a map-a wrapping its map-geometry
       const templatedLoadedHyperlinksCount =
-        await templatedLoadedFeaturesContainer.evaluate(l => {
+        await templatedLoadedFeaturesContainer.evaluate((l) => {
           return l.shadowRoot.querySelectorAll('map-feature:has(map-a)').length;
-        }
-        );
+        });
       expect(templatedLoadedHyperlinksCount).toBe(1);
       // all features should have a _groupEl prop (i.e. all features are rendered)
-      const templatedLoadedFeaturesRenderedCount = await templatedLoadedFeaturesContainer.evaluate(l => {
+      const templatedLoadedFeaturesRenderedCount =
+        await templatedLoadedFeaturesContainer.evaluate((l) => {
           const hasRendering = (f) => Boolean(f._groupEl);
-          return Array.from(l.shadowRoot.querySelectorAll('map-feature')).filter(hasRendering).length;
-      });
-      expect(templatedLoadedFeaturesRenderedCount).toEqual(templatedLoadedFeaturesCount);
+          return Array.from(
+            l.shadowRoot.querySelectorAll('map-feature')
+          ).filter(hasRendering).length;
+        });
+      expect(templatedLoadedFeaturesRenderedCount).toEqual(
+        templatedLoadedFeaturesCount
+      );
     });
   }
 });