Maps4HTML · prushforth · Aug 12, 2024 · Jul 31, 2024
diff --git a/src/mapml/layers/DebugOverlay.js b/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(

diff --git a/src/mapml/layers/TemplatedFeaturesLayer.js b/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));
     }

diff --git a/test/e2e/elements/map-a/map-a-inline-or-remote-templated-issue-968.test.js b/test/e2e/elements/map-a/map-a-inline-or-remote-templated-issue-968.test.js
@@ -0,0 +1,75 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('map-a loaded inline or remote, directly or via templated map-link tests', () => {
+  let page;
+  let context;
+  test.beforeAll(async function () {
+    context = await chromium.launchPersistentContext('');
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('map-a.html');
+    await page.waitForTimeout(500);
+  });
+
+  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 directlyLoadedFeaturesCount =
+        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;
+          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 hasRendering = (f) => Boolean(f._groupEl);
+          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 () => {
+      const templatedLoadedFeaturesContainer = await page.getByTestId(
+        `${inlineOrRemote}-templated-link`
+      );
+      const templatedLoadedFeaturesCount =
+        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) => {
+          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 hasRendering = (f) => Boolean(f._groupEl);
+          return Array.from(
+            l.shadowRoot.querySelectorAll('map-feature')
+          ).filter(hasRendering).length;
+        });
+      expect(templatedLoadedFeaturesRenderedCount).toEqual(
+        templatedLoadedFeaturesCount
+      );
+    });
+  }
+});
diff --git a/test/e2e/elements/map-a/map-a.html b/test/e2e/elements/map-a/map-a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Remote layer with map-link rel=features</title>
+    <meta charset="UTF-8">
+    <script type="module" src="mapml-viewer.js"></script>
+    <style>
+      html {
+        height: 100%
+      }
+
+      body {
+        height: inherit
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <mapml-viewer projection="OSMTILE" data-testid="viewer" style="height: 500px;width:500px;" controls zoom="18" lat="40.7075" lon="-74.011" >
+      <layer- data-testid="inline-features" label="inline-features" checked>
+        <map-meta name="projection" content="OSMTILE"></map-meta>
+        <map-meta name="cs" content="pcrs"></map-meta>
+        <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"></map-meta>
+        <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:rebeccapurple; stroke:rebeccapurple; fill-opacity:0.7}</map-style>
+        <map-feature id="poi.2" class="poi-r1-s1 poi-r1-s2">
+          <map-geometry>
+            <map-point>
+              <map-coordinates>-8238848.744948964 4969300.121476209</map-coordinates>
+            </map-point>
+          </map-geometry>
+          <map-properties>
+            <table xmlns="http://www.w3.org/1999/xhtml">
+              <thead>
+                <tr>
+                  <th role="columnheader" scope="col">Property name</th>
+                  <th role="columnheader" scope="col">Property value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">MAINPAGE</th>
+                  <td itemprop="MAINPAGE">pics/22037829-L.jpg</td>
+                </tr>
+              </tbody>
+            </table>
+          </map-properties>
+        </map-feature>
+        <map-feature id="poi.1" class="poi-r1-s1 poi-r1-s2">
+          <map-geometry>
+            <map-a href="https://example.org/" target="_top">
+              <map-point>
+                <map-coordinates>-8238806.8429565085 4969306.111096254</map-coordinates>
+              </map-point>
+            </map-a>
+          </map-geometry>
+          <map-properties>
+            <table xmlns="http://www.w3.org/1999/xhtml">
+              <thead>
+                <tr>
+                  <th role="columnheader" scope="col">Property name</th>
+                  <th role="columnheader" scope="col">Property value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">MAINPAGE</th>
+                  <td itemprop="MAINPAGE">pics/22037827-L.jpg</td>
+                </tr>
+              </tbody>
+            </table>
+          </map-properties>
+        </map-feature>
+      </layer->
+      <layer- data-testid="remote-features" label="remote-features.mapml"  src="remote-features.mapml" checked></layer->
+      <layer- data-testid="inline-templated" label="inline-rel-features" checked>
+        <map-meta name="projection" content="OSMTILE"></map-meta>
+        <map-meta name="cs" content="pcrs"></map-meta>
+        <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"></map-meta>
+        <map-extent units="OSMTILE" checked="checked" hidden="hidden">
+            <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:green; stroke:green; fill-opacity:0.7}</map-style>
+            <map-input name="z" type="zoom" min="0" max="18" ></map-input>
+            <map-input name="xmin" type="location" rel="map" position="top-left"     axis="easting" units="pcrs" ></map-input>
+            <map-input name="ymin" type="location" rel="map" position="bottom-left"  axis="northing" units="pcrs"></map-input>
+            <map-input name="xmax" type="location" rel="map" position="top-right"    axis="easting" units="pcrs"></map-input>
+            <map-input name="ymax" type="location" rel="map" position="top-left"     axis="northing" units="pcrs"></map-input>
+            <map-input name="w" type="width" min="1" max="4096" ></map-input>
+            <map-input name="h" type="height" min="1" max="4096" ></map-input>
+            <map-link data-testid="inline-templated-link" rel="features" tref="./remote-features.mapml?format_options=mapmlfeatures:true&amp;request=GetMap&amp;crs=MapML:OSMTILE&amp;bbox={xmin},{ymin},{xmax},{ymax}&amp;format=text/mapml&amp;language=en&amp;version=1.3.0&amp;transparent=true&amp;service=WMS&amp;layers=poi&amp;width={w}&amp;styles=poi&amp;height={h}"></map-link>
+        </map-extent>
+      </layer->
+      <layer- data-testid="remote-templated" src="remote-rel-features.mapml" checked ></layer->
+    </mapml-viewer>
+  </body>
+</html>
diff --git a/test/e2e/elements/map-a/remote-features.mapml b/test/e2e/elements/map-a/remote-features.mapml
@@ -0,0 +1,61 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+  <map-head>
+    <map-title>remote-features.mapml</map-title>
+    <map-meta charset="UTF-8"/>
+    <map-meta content="text/mapml" http-equiv="Content-Type"/>
+    <map-meta name="projection" content="OSMTILE"/>
+    <map-meta name="cs" content="pcrs"/>
+    <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"/>
+    <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:red; stroke:red; fill-opacity:0.7}</map-style>
+  </map-head>
+  <map-body>
+    <map-feature id="poi.2" class="poi-r1-s1 poi-r1-s2">
+      <map-geometry>
+        <map-point>
+          <map-coordinates>-8238848.744948964 4969300.121476209</map-coordinates>
+        </map-point>
+      </map-geometry>
+      <map-properties>
+        <table xmlns="http://www.w3.org/1999/xhtml">
+          <thead>
+            <tr>
+              <th role="columnheader" scope="col">Property name</th>
+              <th role="columnheader" scope="col">Property value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">MAINPAGE</th>
+              <td itemprop="MAINPAGE">pics/22037829-L.jpg</td>
+            </tr>
+          </tbody>
+        </table>
+      </map-properties>
+    </map-feature>
+    <map-feature id="poi.1" class="poi-r1-s1 poi-r1-s2">
+      <map-geometry>
+        <map-a href="https://example.org/" target="_top">
+          <map-point>
+            <map-coordinates>-8238806.8429565085 4969306.111096254</map-coordinates>
+          </map-point>
+        </map-a>
+      </map-geometry>
+      <map-properties>
+        <table xmlns="http://www.w3.org/1999/xhtml">
+          <thead>
+            <tr>
+              <th role="columnheader" scope="col">Property name</th>
+              <th role="columnheader" scope="col">Property value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">MAINPAGE</th>
+              <td itemprop="MAINPAGE">pics/22037827-L.jpg</td>
+            </tr>
+          </tbody>
+        </table>
+      </map-properties>
+    </map-feature>
+  </map-body>
+</mapml->
diff --git a/test/e2e/elements/map-a/remote-rel-features.mapml b/test/e2e/elements/map-a/remote-rel-features.mapml
@@ -0,0 +1,20 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+    <map-head>
+        <map-title>remote-rel-features.mapml</map-title>
+        <map-meta charset="utf-8" />
+        <map-style>.poi-r1-s1.poi-r1-s2 {opacity:1.0; fill:blue; stroke:blue; fill-opacity:0.7}</map-style>
+        <map-meta name="extent" content="top-left-easting=-8238908, top-left-northing=4969383, bottom-right-easting=-8238758, bottom-right-northing=4969234"></map-meta>
+    </map-head>
+    <map-body>
+        <map-extent units="OSMTILE" checked="checked" hidden="hidden">
+            <map-input name="z" type="zoom" min="0" max="18" />
+            <map-input name="xmin" type="location" rel="map" position="top-left"     axis="easting" units="pcrs" />
+            <map-input name="ymin" type="location" rel="map" position="bottom-left"  axis="northing" units="pcrs" />
+            <map-input name="xmax" type="location" rel="map" position="top-right"    axis="easting" units="pcrs" />
+            <map-input name="ymax" type="location" rel="map" position="top-left"     axis="northing" units="pcrs" />
+            <map-input name="w" type="width" min="1" max="4096" />
+            <map-input name="h" type="height" min="1" max="4096" />
+            <map-link data-testid="remote-templated-link" rel="features" tref="./remote-features.mapml?format_options=mapmlfeatures:true&amp;request=GetMap&amp;crs=MapML:OSMTILE&amp;bbox={xmin},{ymin},{xmax},{ymax}&amp;format=text/mapml&amp;language=en&amp;version=1.3.0&amp;transparent=true&amp;service=WMS&amp;layers=poi&amp;width={w}&amp;styles=poi&amp;height={h}"></map-link>
+        </map-extent>
+    </map-body>
+</mapml->
diff --git a/test/server.js b/test/server.js
@@ -10,6 +10,7 @@ app.use(express.static(path.join(__dirname, 'e2e/elements/map-extent')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/mapml-viewer')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-feature')));
+app.use(express.static(path.join(__dirname, 'e2e/elements/map-a')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-input')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-link')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-style')));