WIP on map-link:

- enable switching from remote to local / inline content - closes Maps4HTML#898
prushforth · Feb 24, 2024 · 95006a8 · 95006a8
1 parent f8fa6b2
commit 95006a8
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 2 deletions.
diff --git a/src/layer.js b/src/layer.js
@@ -145,6 +145,7 @@ export class MapLayer extends HTMLElement {
     delete this._layerControlHTML;
     delete this._fetchError;
     this.shadowRoot.innerHTML = '';
+    if (this.src) this.innerHTML = '';
 
     if (l) {
       l.off();
@@ -451,6 +452,14 @@ export class MapLayer extends HTMLElement {
         this._layer.appendStyleElement(mapStyle);
       });
     };
+    const _addExtentElement = (mapExtent) => {
+      this.whenReady().then(() => {
+        // see comment regarding features / extent. Same thing applies to
+        // map-extent
+        delete this._layer.bounds;
+        this._validateDisabled();
+      });
+    };
     for (let i = 0; i < elementsGroup.length; ++i) {
       let element = elementsGroup[i];
       switch (element.nodeName) {
@@ -467,8 +476,8 @@ export class MapLayer extends HTMLElement {
           }
           break;
         case 'MAP-EXTENT':
-        // if extent is checked, ...
-        // TODO: Static Tiles
+          _addExtentElement(element);
+          break;
         case 'MAP-META':
         // name=projection, name=zoom, name=extent
         default:

diff --git a/test/e2e/data/dummy-cbmtile-cbmt.mapml b/test/e2e/data/dummy-cbmtile-cbmt.mapml
@@ -0,0 +1,13 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+  <map-head>
+    <map-title>Canada Base Map - Transportation (CBMT)</map-title>
+  </map-head>
+  <map-body>
+    <map-extent units="CBMTILE"  checked="checked">
+      <map-input name="z" type="zoom"  value="17" min="0" max="17"></map-input>
+      <map-input name="y" type="location" units="tilematrix" axis="row" min="29750"  max="34475"></map-input>
+      <map-input name="x" type="location" units="tilematrix" axis="column" min="26484"  max="32463"></map-input>
+      <map-link rel="tile" tref="dummy/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+    </map-extent>
+  </map-body>
+</mapml-> 
diff --git a/test/e2e/elements/layer-/layer-.html b/test/e2e/elements/layer-/layer-.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>&lt;layer-&gt; test</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>
+    <template data-testid="inline-content">
+      <map-extent units="CBMTILE"  checked="checked">
+        <!-- the bounds of the inline map-extent are different than those of the remote layer's map-extent -->
+        <map-input name="z" type="zoom"  value="17" min="3" max="17"></map-input>
+        <map-input name="y" type="location" units="tilematrix" axis="row" min="31000"  max="34000"></map-input>
+        <map-input name="x" type="location" units="tilematrix" axis="column" min="27000"  max="30000"></map-input>
+        <map-link rel="tile" tref="dummy/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+      </map-extent>
+    </template>
+  </head>
+  <body>
+    <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;" controls zoom="2" lat="68" lon="-87" controls projection="CBMTILE">
+      <layer- data-testid="test-layer" label="Remote content" src="dummy-cbmtile-cbmt.mapml" checked></layer->
+    </mapml-viewer>
+  </body>
+</html>
diff --git a/test/e2e/elements/layer-/layer-src.test.js b/test/e2e/elements/layer-/layer-src.test.js
@@ -0,0 +1,114 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('layer- local/inline vs remote content/src 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('layer-.html');
+    await page.waitForTimeout(1000);
+  });
+  test('Test that a layer- with src attribute can transition to inline content', async () => {
+    const viewer = await page.getByTestId('viewer');
+    const layer = await page.getByTestId('test-layer');
+    const labelAttribute = await layer.evaluate((l) => l.getAttribute('label'));
+    expect(labelAttribute).toEqual('Remote content');
+    const labelProperty = await layer.evaluate((l) => l.label);
+    expect(labelProperty).toEqual('Canada Base Map - Transportation (CBMT)');
+    await layer.evaluate((layer) => layer.zoomTo());
+    let mapLocation = await viewer.evaluate((v) => ({
+      lat: v.lat,
+      lon: v.lon,
+      zoom: v.zoom
+    }));
+    expect(mapLocation).toEqual(
+      expect.objectContaining({
+        zoom: 1,
+        lat: expect.closeTo(60.28, 2),
+        lon: expect.closeTo(-89.78, 2)
+      })
+    );
+
+    // remove the src attribute
+
+    await layer.evaluate((layer) => layer.removeAttribute('src'));
+    expect(layer).toHaveAttribute('disabled');
+
+    // append the template map-extent to the local / inline content
+    await page.evaluate(() => {
+      let ext = document.head
+        .querySelector('template')
+        .content.querySelector('map-extent')
+        .cloneNode(true);
+      document.querySelector('[data-testid=test-layer]').appendChild(ext);
+      document
+        .querySelector('[data-testid=test-layer]')
+        .whenReady()
+        .then(() =>
+          document.querySelector('[data-testid=test-layer]').zoomTo()
+        );
+    });
+    await page.waitForTimeout(1000);
+    expect(layer).not.toHaveAttribute('disabled');
+    mapLocation = await viewer.evaluate((v) => ({
+      lat: v.lat,
+      lon: v.lon,
+      zoom: v.zoom
+    }));
+    expect(mapLocation).toEqual(
+      expect.objectContaining({
+        zoom: 3,
+        lat: expect.closeTo(55.26, 2),
+        lon: expect.closeTo(-109.13, 2)
+      })
+    );
+
+    await layer.evaluate(
+      (layer) => (layer.label = 'You can set the label of a local layer')
+    );
+  });
+  test('Test that a layer- with inline content can transition to remote (src-based) content', async () => {
+    const viewer = await page.getByTestId('viewer');
+    const layer = await page.getByTestId('test-layer');
+    let label = await layer.evaluate((l) => l.label);
+    expect(label).toEqual('You can set the label of a local layer');
+
+    // setting the src attribute should clean out the light DOM, populate SD
+    await layer.evaluate((layer) => (layer.src = 'dummy-cbmtile-cbmt.mapml'));
+
+    await page.waitForTimeout(1000);
+    // remote source layers return the map-title in the label property
+    label = await layer.evaluate((l) => l.label);
+
+    expect(label).toEqual('Canada Base Map - Transportation (CBMT)');
+
+    const hasContentInShadowRoot = await layer.evaluate((l) => {
+      return l.shadowRoot.querySelector('*') !== null;
+    });
+    expect(hasContentInShadowRoot).toBe(true);
+
+    const hasNoLightDOMContent = await layer.evaluate(
+      (l) => l.querySelector('*') === null
+    );
+    expect(hasNoLightDOMContent).toBe(true);
+
+    await layer.evaluate((layer) => layer.zoomTo());
+    await page.waitForTimeout(1000);
+
+    let mapLocation = await viewer.evaluate((v) => ({
+      lat: v.lat,
+      lon: v.lon,
+      zoom: v.zoom
+    }));
+    expect(mapLocation).toEqual(
+      expect.objectContaining({
+        zoom: 1,
+        lat: expect.closeTo(60.28, 2),
+        lon: expect.closeTo(-89.78, 2)
+      })
+    );
+  });
+});
diff --git a/test/server.js b/test/server.js
@@ -8,6 +8,7 @@ app.use(express.static(path.join(__dirname, '../dist')));
 app.use(express.static(path.join(__dirname, 'e2e/core')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-extent')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-link')));
+app.use(express.static(path.join(__dirname, 'e2e/elements/layer-')));
 app.use(express.static(path.join(__dirname, 'e2e/api')));
 app.use(express.static(path.join(__dirname, 'e2e/data')));
 app.use(express.static(path.join(__dirname, 'e2e/geojson')));