Update message in map-extent.whenReady rejection handler

Condition layer.disconnectedCallback execution on presence of _layer
Use Promise.allSettled on array of layer.whenReady() promises to resolve
issue with map zoom after changeprojection event, having reconnected all
layers.
Reset mapml-viewer/web-map history after changeprojection

update test to work for custom projection

Author: prushforth

src/map-extent.js

@@ -84,7 +84,7 @@ export class MapExtent extends HTMLElement {
         this._layer = parentLayer._layer;
       })
       .catch(() => {
-        throw new Error('Map never became ready');
+        throw new Error('Layer never became ready');
       });
   }
   disconnectedCallback() {}

src/map-feature.js

@@ -134,6 +134,7 @@ export class MapFeature extends HTMLElement {
   }
 
   disconnectedCallback() {
+    if (!this._layer) return;
     if (this._layer._layerEl.hasAttribute('data-moving')) return;
     this._removeFeature();
     this._observer.disconnect();

src/mapml-viewer.js

@@ -350,13 +350,23 @@ export class MapViewer extends HTMLElement {
       case 'projection':
         const reconnectLayers = () => {
           if (this._map && this._map.options.projection !== newValue) {
+            // save map location and zoom
+            let lat = this.lat;
+            let lon = this.lon;
+            let zoom = this.zoom;
             this._map.options.crs = M[newValue];
             this._map.options.projection = newValue;
+            let layersReady = [];
             for (let layer of this.querySelectorAll('layer-')) {
               layer.removeAttribute('disabled');
               let reAttach = this.removeChild(layer);
               this.appendChild(reAttach);
+              layersReady.push(reAttach.whenReady());
             }
+            Promise.allSettled(layersReady).then(() => {
+              this.zoomTo(lat, lon, zoom);
+              this._resetHistory();
+            });
           }
         };
         if (newValue) {
@@ -943,7 +953,13 @@ export class MapViewer extends HTMLElement {
     this.lon = this._map.getCenter().lng;
     this.zoom = this._map.getZoom();
   }
-
+  _resetHistory() {
+    this._history = [];
+    this._historyIndex = -1;
+    this._traversalCall = false;
+    // weird but ok
+    this._addToHistory();
+  }
   /**
    * Adds to the maps history on moveends
    * @private

src/web-map.js

@@ -395,13 +395,23 @@ export class WebMap extends HTMLMapElement {
       case 'projection':
         const reconnectLayers = () => {
           if (this._map && this._map.options.projection !== newValue) {
+            // save map location and zoom
+            let lat = this.lat;
+            let lon = this.lon;
+            let zoom = this.zoom;
             this._map.options.crs = M[newValue];
             this._map.options.projection = newValue;
+            let layersReady = [];
             for (let layer of this.querySelectorAll('layer-')) {
               layer.removeAttribute('disabled');
               let reAttach = this.removeChild(layer);
               this.appendChild(reAttach);
+              layersReady.push(reAttach.whenReady());
             }
+            Promise.allSettled(layersReady).then(() => {
+              this.zoomTo(lat, lon, zoom);
+              this._resetHistory();
+            });
           }
         };
         if (newValue) {

test/e2e/api/domApi-mapml-viewer.test.js

@@ -1105,20 +1105,22 @@ test.describe('mapml-viewer DOM API Tests', () => {
         (viewer) => viewer.setAttribute('height', '600'),
         viewerHandle
       );
+
+      // Adding custom projection
+      const custProj = await page.evaluate((viewer) => {
+        return viewer.defineCustomProjection(template);
+      }, viewerHandle);
+      expect(custProj).toEqual('basic');
+
       await page.evaluateHandle(
-        (viewer) => viewer.setAttribute('projection', 'other'),
+        (viewer) => viewer.setAttribute('projection', 'basic'),
         viewerHandle
       );
       await page.evaluateHandle(
         (viewer) => document.body.appendChild(viewer),
         viewerHandle
       );
 
-      // Adding custom projection
-      const custProj = await page.evaluate((viewer) => {
-        return viewer.defineCustomProjection(template);
-      }, viewerHandle);
-      expect(custProj).toEqual('basic');
       await page.evaluate((viewer) => {
         viewer.projection = 'basic';
       }, viewerHandle);

test/e2e/api/domApi-web-map.test.js

@@ -1087,20 +1087,22 @@ test.describe('web-map DOM API Tests', () => {
         (viewer) => viewer.setAttribute('height', '600'),
         mapHandle
       );
+      
+      // Adding custom projection
+      const custProj = await page.evaluate((viewer) => {
+        return viewer.defineCustomProjection(template);
+      }, mapHandle);
+      expect(custProj).toEqual('basic');
+
       await page.evaluateHandle(
-        (viewer) => viewer.setAttribute('projection', 'other'),
+        (viewer) => viewer.setAttribute('projection', 'basic'),
         mapHandle
       );
       await page.evaluateHandle(
         (viewer) => document.body.appendChild(viewer),
         mapHandle
       );
 
-      // Adding custom projection
-      const custProj = await page.evaluate((viewer) => {
-        return viewer.defineCustomProjection(template);
-      }, mapHandle);
-      expect(custProj).toEqual('basic');
       await page.evaluate((viewer) => {
         viewer.projection = 'basic';
       }, mapHandle);