Add "Zoom to here" link in popup (#831)

* create shadow for MapExtent, add zoomTo link to query / templated features, make minor fix for MapFeature

* small fix

* fix bug that features cannot be seen when they are added to an empty layer

* add zoomTo link tests for templated features and query

* Add queryableMapExtent.test.js to verify that remote queryable mapml has
'Zoom to here' link, no errors.

* Image Map-extent - Custom Projection test

* update custom projection tests to include map-feature along with map-extent

* fix bugs: custom projection, no shadowroot attaches

* Finalize custom projection test to ensure compatibility with map-extent and map-feature

* re-define fallback (native) zoom and cs for templated features and query

---------

Co-authored-by: Peter Rushforth <peter.rushforth@gmail.com>
Co-authored-by: AliyanH <aliyanulhaq@gmail.com>

Author: 3 people

Gruntfile.js

@@ -28,6 +28,7 @@ module.exports = function(grunt) {
           'dist/DOMTokenList.js': ['src/mapml/utils/DOMTokenList.js'],
           'dist/map-caption.js':  ['src/map-caption.js'],
           'dist/map-feature.js':  ['src/map-feature.js'],
+          'dist/map-extent.js':   ['src/map-extent.js'],
           'dist/map-area.js':     ['src/map-area.js'],
           'dist/layer.js':        ['src/layer.js'],
           'dist/leaflet.js':      ['dist/leaflet-src.js',

src/layer.js

@@ -87,8 +87,6 @@ export class MapLayer extends HTMLElement {
   }
 
   connectedCallback() {
-    //creates listener that waits for createmap event, this allows for delayed builds of maps
-    //this allows a safeguard for the case where loading a custom TCRS takes longer than loading mapml-viewer.js/web-map.js
     if(this.hasAttribute("data-moving")) return;
     this._onAdd();
   }
@@ -97,6 +95,8 @@ export class MapLayer extends HTMLElement {
     if(this.getAttribute('src') && !this.shadowRoot) {
       this.attachShadow({mode: 'open'});
     }
+    //creates listener that waits for createmap event, this allows for delayed builds of maps
+    //this allows a safeguard for the case where loading a custom TCRS takes longer than loading mapml-viewer.js/web-map.js
     this.parentNode.addEventListener('createmap', ()=>{
       this._ready();
       // if the map has been attached, set this layer up wrt Leaflet map

src/map-extent.js

@@ -1,6 +1,3 @@
-import { MapInput } from './map-input.js';
-import { MapLink } from './map-link.js';
-
 export class MapExtent extends HTMLElement {
   static get observedAttributes() {
     return ['units','checked','label','opacity'];
@@ -71,10 +68,23 @@ export class MapExtent extends HTMLElement {
     super();    
   }
   connectedCallback() {
-    
+    if(this.querySelector('map-link[rel=query], map-link[rel=features]') && !this.shadowRoot) {
+      this.attachShadow({mode: 'open'});
+    }
+    let parentLayer = this.parentNode.nodeName.toUpperCase() === "LAYER-" ? this.parentNode : this.parentNode.host;
+    if (!parentLayer._layer) {
+      // for custom projection cases, the MapMLLayer has not yet created and binded with the layer- at this point,
+      // because the "createMap" event of mapml-viewer has not yet been dispatched, the map has not yet been created 
+      // the event will be dispatched after defineCustomProjection > projection setter
+      // should wait until MapMLLayer is built
+      parentLayer.parentNode.addEventListener('createmap', (e) => {
+        this._layer = parentLayer._layer;
+      });
+    } else {
+      this._layer = parentLayer._layer;
+    }
   }
   disconnectedCallback() {
 
   }
-}
-window.customElements.define('map-extent', MapExtent);
+}

src/map-feature.js

@@ -4,6 +4,7 @@ import DOMTokenList from './DOMTokenList.js';
 import { MapLayer } from './layer.js';
 import { MapCaption } from './map-caption.js';
 import { MapFeature } from './map-feature.js';
+import { MapExtent } from './map-extent.js';
 
 export class MapViewer extends HTMLElement {
   static get observedAttributes() {
@@ -1049,3 +1050,4 @@ window.customElements.define('mapml-viewer', MapViewer);
 window.customElements.define('layer-', MapLayer);
 window.customElements.define('map-caption',MapCaption);
 window.customElements.define('map-feature', MapFeature);
+window.customElements.define('map-extent', MapExtent);

src/mapml-viewer.js

@@ -88,12 +88,18 @@ export var QueryHandler = L.Handler.extend({
           if(features.length) layer._mapmlFeatures = layer._mapmlFeatures.concat(features);
         } else {
           // synthesize a single feature from text or html content
-          let geom = "<map-geometry cs='gcrs'>"+e.latlng.lng+" "+e.latlng.lat+"</map-geometry>",
+          let geom = "<map-geometry cs='gcrs'><map-point><map-coordinates>"+e.latlng.lng+" "+e.latlng.lat+"</map-coordinates></map-point></map-geometry>",
               feature = parser.parseFromString("<map-feature><map-properties>"+
                 response.text+"</map-properties>"+geom+"</map-feature>", "text/html").querySelector("map-feature");
           layer._mapmlFeatures.push(feature);
         }
-        if(lastOne) return displayFeaturesPopup(layer._mapmlFeatures, e.latlng);
+        if(lastOne) {
+          // create connection between queried <map-feature> and its parent <map-extent>
+          for (let feature of layer._mapmlFeatures) {
+            feature._extentEl = template._extentEl;
+          }
+          displayFeaturesPopup(layer._mapmlFeatures, e.latlng);
+        }
       }).catch((err) => {
         console.log('Looks like there was a problem. Status: ' + err.message);
       });

src/mapml/handlers/QueryHandler.js

@@ -5,7 +5,12 @@ export var FeatureLayer = L.FeatureGroup.extend({
    * M.MapML turns any MapML feature data into a Leaflet layer. Based on L.GeoJSON.
    */
     initialize: function (mapml, options) {
-
+      /*
+        mapml:
+        1. for query: an array of map-feature elements that it fetches
+        2. for static templated feature: null
+        3. for non-templated feature: layer- (with no src) or mapml file (with src)
+      */
       L.setOptions(this, options);
       if(this.options.static) {
         this._container = L.DomUtil.create('div', 'leaflet-layer', this.options.pane);
@@ -68,15 +73,23 @@ export var FeatureLayer = L.FeatureGroup.extend({
       };
     },
 
-
+    // for query
     showPaginationFeature: function(e){
       if(this.options.query && this._mapmlFeatures[e.i]){
         let feature = this._mapmlFeatures[e.i];
+        // remove the prev / next one <map-feature> from shadow if there is any
+        feature._extentEl.shadowRoot.firstChild?.remove();
         this.clearLayers();
-        this.addData(feature, this.options.nativeCS, this.options.nativeZoom);
+        feature._featureGroup = this.addData(feature, this.options.nativeCS, this.options.nativeZoom);
+        feature._extentEl.shadowRoot.appendChild(feature);
         e.popup._navigationBar.querySelector("p").innerText = (e.i + 1) + "/" + this.options._leafletLayer._totalFeatureCount;
         e.popup._content.querySelector("iframe").setAttribute("sandbox", "allow-same-origin allow-forms");
         e.popup._content.querySelector("iframe").srcdoc = feature.querySelector("map-properties").innerHTML;
+        // "zoom to here" link need to be re-set for every pagination
+        this._map.fire("attachZoomLink", {i:e.i, currFeature: feature});
+        this._map.once("popupclose", function (e) {
+          this.shadowRoot.innerHTML = '';
+        }, feature._extentEl);
       }
     },
 
@@ -217,9 +230,10 @@ export var FeatureLayer = L.FeatureGroup.extend({
         feature = features[i];
         var geometriesExist = feature.getElementsByTagName("map-geometry").length && feature.getElementsByTagName("map-coordinates").length;
         if (geometriesExist) {
-          if (mapml.nodeType === Node.DOCUMENT_NODE && feature._DOMnode) {
+          if (mapml.nodeType === Node.DOCUMENT_NODE) {
            // if the <map-feature> element has migrated from mapml file, 
            // the featureGroup object should bind with the **CLONED** map-feature element in DOM instead of the feature in mapml
+          if (!feature._DOMnode) feature._DOMnode = feature.cloneNode(true);
           feature._DOMnode._featureGroup = this.addData(feature._DOMnode, nativeCS, nativeZoom);
          } else {
           feature._featureGroup = this.addData(feature, nativeCS, nativeZoom);

src/mapml/layers/FeatureLayer.js

@@ -108,7 +108,8 @@ export var MapMLLayer = L.Layer.extend({
                   opacity: extentEl._templateVars.opacity,
                   _leafletLayer: this,
                   crs: extentEl.crs,
-                  extentZIndex: extentEl.extentZIndex
+                  extentZIndex: extentEl.extentZIndex,
+                  extentEl: extentEl._DOMnode || extentEl
                 }).addTo(this._map);
                 extentEl.templatedLayer.setZIndex();
                 this._setLayerElExtent();  
@@ -147,14 +148,6 @@ export var MapMLLayer = L.Layer.extend({
                   var c = document.createElement('div');
                   c.classList.add("mapml-popup-content");
                   c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                  c.insertAdjacentHTML('beforeend', `<a href="" class="zoomLink">${M.options.locale.popupZoom}</a>`);
-                  let zoomLink = c.querySelector('a.zoomLink');
-                  zoomLink.onclick = zoomLink.onkeydown = function (e) {
-                    if (!(e instanceof MouseEvent) && e.keyCode !== 13) return;
-                    e.preventDefault();
-                    let mapmlFeature = geometry._featureEl ? geometry._featureEl : geometry._groupLayer._featureEl;
-                    mapmlFeature.zoomTo();
-                  };
                   geometry.bindPopup(c, {autoClose: false, minWidth: 165});
                 }
               }
@@ -187,14 +180,6 @@ export var MapMLLayer = L.Layer.extend({
                       var c = document.createElement('div');
                       c.classList.add("mapml-popup-content");
                       c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                      c.insertAdjacentHTML('beforeend', `<a href="" class="zoomLink">${M.options.locale.popupZoom}</a>`);
-                      let zoomLink = c.querySelector('a.zoomLink');
-                      zoomLink.onclick = zoomLink.onkeydown = function (e) {
-                        if (!(e instanceof MouseEvent) && e.keyCode !== 13) return;
-                        e.preventDefault();
-                        let mapmlFeature = geometry._featureEl ? geometry._featureEl : geometry._groupLayer._featureEl;
-                        mapmlFeature.zoomTo();
-                      };
                       geometry.bindPopup(c, {autoClose: false, minWidth: 165});
                     }
                   },
@@ -261,6 +246,9 @@ export var MapMLLayer = L.Layer.extend({
                     _leafletLayer: this,
                     crs: this._extent.crs,
                     extentZIndex: this._extent._mapExtents[i].extentZIndex,
+                    // when a <map-extent> migrates from a remote mapml file and attaches to the shadow of <layer- >
+                    // this._extent._mapExtents[i] refers to the <map-extent> in remote mapml
+                    extentEl: this._extent._mapExtents[i]._DOMnode || this._extent._mapExtents[i],
                     }).addTo(map);   
                     this._extent._mapExtents[i].templatedLayer = this._templatedLayer;
                     if(this._templatedLayer._queries){
@@ -278,7 +266,6 @@ export var MapMLLayer = L.Layer.extend({
         }
     },
 
-
     _validProjection : function(map){
       let noLayer = false;
       if(this._extent && this._extent._mapExtents){
@@ -1324,8 +1311,12 @@ export var MapMLLayer = L.Layer.extend({
       if(popup._source._eventParents){ // check if the popup is for a feature or query
         layer = popup._source._eventParents[Object.keys(popup._source._eventParents)[0]]; // get first parent of feature, there should only be one
         group = popup._source.group;
+        // if the popup is for a static / templated feature, the "zoom to here" link can be attached once the popup opens
+        attachZoomLink.call(popup);
       } else {
         layer = popup._source._templatedLayer;
+        // if the popup is for a query, the "zoom to here" link should be re-attached every time new pagination features are displayed
+        map.on("attachZoomLink", attachZoomLink, popup);
       }
 
       if(popup._container.querySelector('nav[class="mapml-focus-buttons"]')){
@@ -1381,7 +1372,7 @@ export var MapMLLayer = L.Layer.extend({
         map._controlContainer.querySelector("A:not([hidden])").focus();
       }, popup);
 
-      let divider = L.DomUtil.create("hr");
+      let divider = L.DomUtil.create("hr", "mapml-popup-divider");
 
       popup._navigationBar = div;
       popup._content.appendChild(divider);
@@ -1452,12 +1443,36 @@ export var MapMLLayer = L.Layer.extend({
         }
       }
 
+      function attachZoomLink (e) {
+        // this === popup
+        let content = this._content,
+            featureEl = e ? e.currFeature : this._source._groupLayer._featureEl;
+        if (content.querySelector('a.mapml-zoom-link')) {
+          content.querySelector('a.mapml-zoom-link').remove();
+        }
+        if (!featureEl.querySelector('map-geometry')) return;
+        let tL = featureEl.extent.topLeft.gcrs,
+            bR = featureEl.extent.bottomRight.gcrs,
+            center = L.latLngBounds(L.latLng(tL.horizontal, tL.vertical), L.latLng(bR.horizontal, bR.vertical)).getCenter(true);
+        let zoomLink = document.createElement('a');
+        zoomLink.href = `#${featureEl.getMaxZoom()},${center.lng},${center.lat}`;
+        zoomLink.innerHTML = `${M.options.locale.popupZoom}`;
+        zoomLink.className = "mapml-zoom-link";
+        zoomLink.onclick = zoomLink.onkeydown = function (e) {
+          if (!(e instanceof MouseEvent) && e.keyCode !== 13) return;
+          e.preventDefault();
+          featureEl.zoomTo();
+        };
+        content.insertBefore(zoomLink, content.querySelector('hr.mapml-popup-divider'));
+      }
+
       // if popup closes then the focusFeature handler can be removed
       map.on("popupclose", removeHandlers);
       function removeHandlers(removeEvent){
         if (removeEvent.popup === popup){
           map.off("keydown", focusFeature);
           map.off("keydown", focusMap);
+          map.off("popupopen", attachZoomLink);
           map.off('popupclose', removeHandlers);
           if(group) group.setAttribute("aria-expanded", "false");
         }

src/mapml/layers/MapMLLayer.js

@@ -6,6 +6,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
       this.extentBounds=inputData.bounds;
       this.isVisible = true;
       this._template = template;
+      this._extentEl = options.extentEl;
       this._container = L.DomUtil.create('div', 'leaflet-layer', options.pane);
       L.extend(options, this.zoomBounds);
       L.DomUtil.addClass(this._container, 'mapml-features-container');
@@ -39,7 +40,6 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
             var c = document.createElement('div');
             c.classList.add("mapml-popup-content");
             c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-            c.insertAdjacentHTML('beforeend', `<a href="" class="zoomLink">${M.options.locale.popupZoom}</a>`);
             geometry.bindPopup(c, {autoClose: false, minWidth: 108});
           }
         });
@@ -85,6 +85,10 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
                         this.extentBounds.overlaps(mapBounds);
 
       this._features.clearLayers();
+      // shadow may has not yet attached to <map-extent> for the first-time rendering
+      if (this._extentEl.shadowRoot) {
+        this._extentEl.shadowRoot.innerHTML = "";
+      }
       this._removeCSS();
       //Leave the layers cleared if the layer is not visible
       if(!(this.isVisible) && steppedZoom === mapZoom){
@@ -96,6 +100,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
       var mapml, headers = new Headers({'Accept': 'text/mapml;q=0.9,application/geo+json;q=0.8'}),
           parser = new DOMParser(),
           features = this._features,
+          extentEl = this._extentEl,
           map = this._map,
           context = this,
           MAX_PAGES = 10,
@@ -109,17 +114,23 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
               url = mapml.querySelector('map-link[rel=next]')? mapml.querySelector('map-link[rel=next]').getAttribute('href') : null;
               url =  url ? (new URL(url, base)).href: null;
               // TODO if the xml parser barfed but the response is application/geo+json, use the parent addData method
-            let nativeZoom = mapml.querySelector("map-meta[name=zoom]") &&
+            let nativeZoom = extentEl._nativeZoom = mapml.querySelector("map-meta[name=zoom]") &&
                               +M._metaContentToObject(mapml.querySelector("map-meta[name=zoom]").getAttribute("content")).value || 0;
-            let nativeCS = mapml.querySelector("map-meta[name=cs]") &&
-                              M._metaContentToObject(mapml.querySelector("map-meta[name=cs]").getAttribute("content")).content || "GCRS";
+            let nativeCS = extentEl._nativeCS = mapml.querySelector("map-meta[name=cs]") &&
+                              M._metaContentToObject(mapml.querySelector("map-meta[name=cs]").getAttribute("content")).content || "PCRS";
             features.addData(mapml, nativeCS, nativeZoom);
+            // "migrate" to extent's shadow
+            // make a clone, prevent the elements from being removed from mapml file
+            // same as _attachToLayer() in MapMLLayer.js
+            for (let el of mapml.querySelector('map-body').children) {
+              extentEl.shadowRoot.append(el._DOMnode);
+              el._DOMnode._extentEl = extentEl;
+            }
             if (url && --limit) {
               return _pullFeatureFeed(url, limit);
             }
           }));
         };
-
       this._url = url;
       _pullFeatureFeed(url, MAX_PAGES)
         .then(function() { 

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -27,6 +27,7 @@ export var TemplatedLayer = L.Layer.extend({
           let inputData = M._extractInputBounds(templates[i]);
           templates[i].extentBounds = inputData.bounds;
           templates[i].zoomBounds = inputData.zoomBounds;
+          templates[i]._extentEl = this.options.extentEl;
           this._queries.push(L.extend(templates[i], this._setupQueryVars(templates[i])));
       }
     }