Fix #980

Maps4HTML · Sep 13, 2024 · 41414db · 41414db
1 parent a94847a
commit 41414db
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -83,6 +83,21 @@
           <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
         </map-extent>
       </layer->
+      <layer- label="Restaurants" checked="">
+           <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+            <map-extent units="OSMTILE" checked="">
+              <map-select id="restaurants" name="cusine">
+                  <map-option value="restaurants" selected="selected">All cuisines</map-option>
+                  <map-option value="african">African</map-option>
+                  <map-option value="asian">Asian</map-option>
+                  <map-option value="cajun">Cajun</map-option>
+                  <map-option value="indian">Indian</map-option>
+                  <map-option value="italian">Italian</map-option>
+                  <map-option value="mexican">Mexican</map-option>
+              </map-select>
+              <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
+            </map-extent>
+          </layer->
     </mapml-viewer>
   </body>
 </html>
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -88,7 +88,7 @@ export class MapViewer extends HTMLElement {
           this.setAttribute('projection', val);
         })
         .catch(() => {
-          throw new Error('Undefined projection:' + val);
+          throw new Error('Undefined projection: ' + val);
         });
     }
   }
@@ -405,13 +405,18 @@ export class MapViewer extends HTMLElement {
           this._map.options.projection !== newValue
         ) {
           const connect = reconnectLayers.bind(this);
-          connect().then(() => {
-            if (this._map && this._map.options.projection !== oldValue) {
-              // this doesn't completely work either
-              this._resetHistory();
-            }
-            if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
-          });
+          this.whenProjectionDefined(newValue)
+            .then(() => connect())
+            .then(() => {
+              if (this._map && this._map.options.projection !== oldValue) {
+                // this doesn't completely work either
+                this._resetHistory();
+              }
+              if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
+            })
+            .catch(() => {
+              throw new Error('Undefined projection: ' + newValue);
+            });
         }
         break;
     }

diff --git a/src/web-map.js b/src/web-map.js
@@ -89,7 +89,7 @@ export class WebMap extends HTMLMapElement {
           this.setAttribute('projection', val);
         })
         .catch(() => {
-          throw new Error('Undefined projection:' + val);
+          throw new Error('Undefined projection: ' + val);
         });
     }
   }
@@ -460,13 +460,18 @@ export class WebMap extends HTMLMapElement {
           this._map.options.projection !== newValue
         ) {
           const connect = reconnectLayers.bind(this);
-          connect().then(() => {
-            if (this._map && this._map.options.projection !== oldValue) {
-              // this doesn't completely work either
-              this._resetHistory();
-            }
-            if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
-          });
+          this.whenProjectionDefined(newValue)
+            .then(() => connect())
+            .then(() => {
+              if (this._map && this._map.options.projection !== oldValue) {
+                // this doesn't completely work either
+                this._resetHistory();
+              }
+              if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
+            })
+            .catch(() => {
+              throw new Error('Undefined projection: ' + newValue);
+            });
         }
         break;
     }

diff --git a/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html b/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Basic Mapml-Viewer</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 data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
+    <layer- data-testid="testlayer" label="CBMT - INLINE" checked>
+      <map-meta name="zoom" content="min=0,max=25"></map-meta>
+      <map-extent units="CBMTILE" checked hidden>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
+      </map-extent>
+    </layer->
+  </mapml-viewer>
+</body>
+
+</html>
diff --git a/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js b/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js
@@ -0,0 +1,28 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('Playwright mapml-viewer issue-980 test', () => {
+  let page;
+  let context;
+  test.beforeAll(async () => {
+    context = await chromium.launchPersistentContext('');
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('mapml-viewer-unknown-projection.html');
+    await page.waitForTimeout(500);
+  });
+
+  test.afterAll(async function () {
+    await context.close();
+  });
+
+  test('mapml-viewer projection set to unknown prj errors to console', async () => {
+    let message;
+    page.on('pageerror', exception  => message = exception.message);
+    const viewer = page.getByTestId('testviewer');
+    await viewer.evaluate((v) => (v.projection = 'unknown'));
+    // update the projection attribute on the viewer
+    await page.waitForTimeout(5000);
+    expect(message).toBe("Undefined projection: unknown");
+  });
+});