From 41414db1244f0409457a6e5b4d84f9aed4bca7a9 Mon Sep 17 00:00:00 2001
From: Peter Rushforth <peter.rushforth@gmail.com>
Date: Fri, 13 Sep 2024 13:19:20 -0400
Subject: [PATCH] Fix #980

---
 index.html                                    | 15 ++++++++
 src/mapml-viewer.js                           | 21 ++++++----
 src/web-map.js                                | 21 ++++++----
 .../mapml-viewer-unknown-projection.html      | 38 +++++++++++++++++++
 .../mapml-viewer-unknown-projection.test.js   | 28 ++++++++++++++
 5 files changed, 107 insertions(+), 16 deletions(-)
 create mode 100644 test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html
 create mode 100644 test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js

diff --git a/index.html b/index.html
index 67afb32e9..96ea53c63 100644
--- 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
index 4aa15d235..b52839747 100644
--- 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
index 672c9aef9..5903add52 100644
--- 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
new file mode 100644
index 000000000..56c4cc372
--- /dev/null
+++ 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>
\ No newline at end of file
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
new file mode 100644
index 000000000..3c1dd0c2e
--- /dev/null
+++ 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");
+  });
+});