Add comments, function for link behaviour, projection changes. Re-order

prushfor · prushforth · commit 7052b3762987 · 2023-09-26T15:43:00.000-04:00
post-projection change sequence so that history is correctly initialized,
hopefully.

Update to do list
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -349,6 +349,11 @@ export class MapViewer extends HTMLElement {
             let lat = this.lat;
             let lon = this.lon;
             let zoom = this.zoom;
+            // saving the lat, lon and zoom is necessary because Leaflet seems
+            // to try to compensate for the change in the scales for each zoom
+            // level in the crs by changing the zoom level of the map when
+            // you set the map crs.  So, we save the current view for use below
+            // when all the layers' reconnections have settled.
             this._map.options.crs = M[newValue];
             this._map.options.projection = newValue;
             let layersReady = [];
@@ -360,12 +365,11 @@ export class MapViewer extends HTMLElement {
               layersReady.push(reAttach.whenReady());
             }
             Promise.allSettled(layersReady).then(() => {
-              // if don't do a zoomTo, the BNG experiment ends up at zoom=5 (incorrectly)
-              // BUT the feature link from Canada/BC to BCTILE layer works
-              // can have one but not both tbd
-              //
-              this._resetHistory();
+              // use the saved map location to ensure it is correct after
+              // changing the map CRS.  Specifically affects projection
+              // upgrades, e.g. https://maps4html.org/experiments/custom-projections/BNG/
               this.zoomTo(lat, lon, zoom);
+              this._resetHistory();
               this._map.announceMovement.enable();
             });
           }
diff --git a/src/mapml/utils/Util.js b/src/mapml/utils/Util.js
@@ -496,7 +496,6 @@ export var Util = {
       if (['/', '.', '#'].includes(link.url[0])) link.target = '_self';
     }
     if (!justPan) {
-      let newLayer = false;
       layer = document.createElement('layer-');
       layer.setAttribute('src', link.url);
       layer.setAttribute('checked', '');
@@ -505,18 +504,12 @@ export var Util = {
           if (link.type === 'text/html') {
             window.open(link.url);
           } else {
-            newLayer = true;
-            if (!link.inPlace && zoomTo) {
-              updateMapZoomTo(zoomTo);
-            }
+            postTraversalSetup();
             map.options.mapEl.appendChild(layer);
           }
           break;
         case '_parent':
-          newLayer = true;
-          if (!link.inPlace && zoomTo) {
-            updateMapZoomTo(zoomTo);
-          }
+          postTraversalSetup();
           for (let l of map.options.mapEl.querySelectorAll('layer-'))
             if (l._layer !== leafletLayer) map.options.mapEl.removeChild(l);
           map.options.mapEl.appendChild(layer);
@@ -526,25 +519,11 @@ export var Util = {
           window.location.href = link.url;
           break;
         default:
-          newLayer = true;
-          if (!link.inPlace && zoomTo) {
-            updateMapZoomTo(zoomTo);
-          }
+          postTraversalSetup();
           opacity = leafletLayer._layerEl.opacity;
           leafletLayer._layerEl.insertAdjacentElement('beforebegin', layer);
           map.options.mapEl.removeChild(leafletLayer._layerEl);
       }
-      if (!link.inPlace && newLayer)
-        layer.whenReady().then(() => {
-          if (!layer.extent) {
-            layer._layer._setLayerElExtent();
-          }
-          if (zoomTo)
-            layer.parentElement.zoomTo(+zoomTo.lat, +zoomTo.lng, +zoomTo.z);
-          else layer.zoomTo();
-          if (opacity) layer.opacity = opacity;
-          map.getContainer().focus();
-        });
     } else if (zoomTo && !link.inPlace && justPan) {
       leafletLayer._map.options.mapEl.zoomTo(
         +zoomTo.lat,
@@ -554,7 +533,38 @@ export var Util = {
       if (opacity) layer.opacity = opacity;
     }
 
+    function postTraversalSetup() {
+      // when the projection is changed as part of the link traversal process,
+      // it's necessary to set the map viewer's lat, lon and zoom NOW, so that
+      // the promises that are created when the viewer's projection is changed
+      // can use the viewer's lat, lon and zoom properties that were in effect
+      // before the projection change i.e. in the closure for that code
+      // see mapml-viewer / map is=web-map projection attributeChangedCallback
+      // specifically required for use cases like changing projection after
+      // link traversal, e.g. BC link here https://maps4html.org/experiments/linking/features/
+      if (!link.inPlace && zoomTo) updateMapZoomTo(zoomTo);
+      // the layer is newly created, so have to wait until it's fully init'd
+      // before setting properties.
+      layer.whenReady().then(() => {
+        // TODO refactor _setLayerElExtent so that it's invoked automatically
+        // by layer.extent getter TBD.
+        if (!layer.extent) {
+          layer._layer._setLayerElExtent();
+        }
+        // if the map projection isnt' changed by link traversal, it's necessary
+        // to perform pan/zoom operations after the layer is ready
+        if (!link.inPlace && zoomTo)
+          layer.parentElement.zoomTo(+zoomTo.lat, +zoomTo.lng, +zoomTo.z);
+        else if (!link.inPlace) layer.zoomTo();
+        // not sure if this is necessary
+        if (opacity) layer.opacity = opacity;
+        // this is necessary to display the FeatureIndexOverlay, I believe
+        map.getContainer().focus();
+      });
+    }
+
     function updateMapZoomTo(zoomTo) {
+      // can't use mapEl.zoomTo(...) here, it's too slow!
       map.options.mapEl.lat = +zoomTo.lat;
       map.options.mapEl.lon = +zoomTo.lng;
       map.options.mapEl.zoom = +zoomTo.z;
diff --git a/src/web-map.js b/src/web-map.js
@@ -394,18 +394,28 @@ export class WebMap extends HTMLMapElement {
             let lat = this.lat;
             let lon = this.lon;
             let zoom = this.zoom;
+            // saving the lat, lon and zoom is necessary because Leaflet seems
+            // to try to compensate for the change in the scales for each zoom
+            // level in the crs by changing the zoom level of the map when
+            // you set the map crs.  So, we save the current view for use below
+            // when all the layers' reconnections have settled.
             this._map.options.crs = M[newValue];
             this._map.options.projection = newValue;
             let layersReady = [];
+            this._map.announceMovement.disable();
             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(() => {
+              // use the saved map location to ensure it is correct after
+              // changing the map CRS.  Specifically affects projection
+              // upgrades, e.g. https://maps4html.org/experiments/custom-projections/BNG/
               this.zoomTo(lat, lon, zoom);
               this._resetHistory();
+              this._map.announceMovement.enable();
             });
           }
         };
diff --git a/todo-tests b/todo-tests
@@ -1,10 +1,5 @@
 TODO
 
-
-experiments/linking/features - clicking on BC does not work, Ontario link not working
-experiments/vector tiles - not working
-experiments/custom-projections/Arctic-SDI/ Canada  link not working
-
 deal with flaky tests???
 
 core/featureIndexOverlay test is broken, integrate other PR
