Make map-properties popup size dynamic (Maps4HTML#1017)

* Modified popup maxHeight
* Updated for clarity

Author: yushan-mu

src/mapml.css

@@ -592,6 +592,11 @@ summary {
   line-height: 44px;
 }
 
+.mapml-zoom-link {
+  display: block;
+  text-align: center;
+}
+
 .mapml-focus-buttons {
   white-space: nowrap;
 }
@@ -614,6 +619,7 @@ summary {
 .leaflet-popup-content {
   margin: 0;
   min-width: min-content;
+  scrollbar-width: thin;
 }
 .mapml-popup-content {
   padding-top: 44px;

src/mapml/handlers/QueryHandler.js

@@ -66,7 +66,8 @@ export var QueryHandler = Handler.extend({
       popupOptions = {
         autoClose: false,
         autoPan: true,
-        maxHeight: map.getSize().y * 0.5 - 50
+        maxHeight: map.getSize().y * 0.5 - 50,
+        maxWidth: map.getSize().x * 0.7
       },
       tcrs2pcrs = function (c) {
         return crs.transformation.untransform(c, crs.scale(zoom));

src/mapml/layers/MapMLLayer.js

@@ -312,10 +312,18 @@ export var MapMLLayer = LayerGroup.extend({
         onEachFeature: function (properties, geometry) {
           // need to parse as HTML to preserve semantics and styles
           if (properties) {
+            const map = layer._map;
+            const popupOptions = {
+              autoClose: false,
+              autoPan: true,
+              maxHeight: map.getSize().y * 0.5 - 50,
+              maxWidth: map.getSize().x * 0.7,
+              minWidth: 165
+            };
             var c = document.createElement('div');
             c.classList.add('mapml-popup-content');
             c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-            geometry.bindPopup(c, { autoClose: false, minWidth: 165 });
+            geometry.bindPopup(c, popupOptions);
           }
         }
       }).addTo(layer);
@@ -527,8 +535,8 @@ export var MapMLLayer = LayerGroup.extend({
     let divider = DomUtil.create('hr', 'mapml-popup-divider');
 
     popup._navigationBar = div;
-    popup._content.appendChild(divider);
-    popup._content.appendChild(div);
+    popup._content.parentElement.parentElement.appendChild(divider);
+    popup._content.parentElement.parentElement.appendChild(div);
 
     content.focus();
 
@@ -631,31 +639,40 @@ export var MapMLLayer = LayerGroup.extend({
 
     function attachZoomLink(e) {
       // this === popup
-      let content = this._content,
+      let popupWrapper = this._wrapper,
         featureEl = e ? e.currFeature : this._source._groupLayer._featureEl;
-      if (content.querySelector('a.mapml-zoom-link')) {
-        content.querySelector('a.mapml-zoom-link').remove();
+      if (popupWrapper.querySelector('a.mapml-zoom-link')) {
+        popupWrapper.querySelector('a.mapml-zoom-link').remove();
       }
+
+      // return early if feature doesn't have map-geometry
       if (!featureEl.querySelector('map-geometry')) return;
+
+      // calculate zoom parameters
       let tL = featureEl.extent.topLeft.gcrs,
         bR = featureEl.extent.bottomRight.gcrs,
         center = latLngBounds(
           latLng(tL.horizontal, tL.vertical),
           latLng(bR.horizontal, bR.vertical)
         ).getCenter(true);
+
+      // construct zoom link
       let zoomLink = document.createElement('a');
       zoomLink.href = `#${featureEl.getZoomToZoom()},${center.lng},${
         center.lat
       }`;
       zoomLink.innerHTML = `${map.options.mapEl.locale.popupZoom}`;
       zoomLink.className = 'mapml-zoom-link';
+
+      // handle zoom link interactions
       zoomLink.onclick = zoomLink.onkeydown = function (e) {
         if (!(e instanceof MouseEvent) && e.keyCode !== 13) return;
         e.preventDefault();
         featureEl.zoomTo();
         map.closePopup();
         map.getContainer().focus();
       };
+
       // we found that the popupopen event is fired as many times as there
       // are layers on the map (<map-layer> elements / MapMLLayers that is).
       // In each case the target layer is always this layer, so we can't
@@ -665,11 +682,13 @@ export var MapMLLayer = LayerGroup.extend({
       // feature navigation buttons); obviously he dealt with this leaflet bug
       // this way some time ago, and we can't figure out how to get around it
       // apart from this slightly non-optimal method. Revisit sometime!
-      let link = content.querySelector('.mapml-zoom-link');
+      let link = popupWrapper.querySelector('.mapml-zoom-link');
       if (link) link.remove();
-      content.insertBefore(
+
+      // attach link to popup
+      popupWrapper.insertBefore(
         zoomLink,
-        content.querySelector('hr.mapml-popup-divider')
+        popupWrapper.querySelector('hr.mapml-popup-divider')
       );
     }
 

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -70,11 +70,18 @@ export var TemplatedFeaturesLayer = Layer.extend({
         projection: map.options.projection,
         mapEl: this._linkEl.getMapEl(),
         onEachFeature: function (properties, geometry) {
+          const popupOptions = {
+            autoClose: false,
+            autoPan: true,
+            maxHeight: map.getSize().y * 0.5 - 50,
+            maxWidth: map.getSize().x * 0.7,
+            minWidth: 108
+          };
           // need to parse as HTML to preserve semantics and styles
           var c = document.createElement('div');
           c.classList.add('mapml-popup-content');
           c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-          geometry.bindPopup(c, { autoClose: false, minWidth: 108 });
+          geometry.bindPopup(c, popupOptions);
         }
       });
       extend(this._features.options, { _leafletLayer: this._features });

test/e2e/layers/queryLink.test.js

@@ -108,7 +108,7 @@ test.describe('Playwright Query Link Tests', () => {
         (iframe) => iframe.contentWindow.document.querySelector('h1').innerText
       );
       const href = await page.$eval(
-        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > a.mapml-zoom-link',
+        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > a.mapml-zoom-link',
         (link) => link.getAttribute('href')
       );
 
@@ -141,7 +141,7 @@ test.describe('Playwright Query Link Tests', () => {
         (iframe) => iframe.contentWindow.document.querySelector('h1').innerText
       );
       const href = await page.$eval(
-        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > a.mapml-zoom-link',
+        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > a.mapml-zoom-link',
         (link) => link.getAttribute('href')
       );
 
@@ -176,7 +176,7 @@ test.describe('Playwright Query Link Tests', () => {
         (iframe) => iframe.contentWindow.document.querySelector('h1').innerText
       );
       const href = await page.$eval(
-        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > a.mapml-zoom-link',
+        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > a.mapml-zoom-link',
         (link) => link.getAttribute('href')
       );
 
@@ -254,7 +254,7 @@ test.describe('Playwright Query Link Tests', () => {
         (iframe) => iframe.contentWindow.document.querySelector('h1').innerText
       );
       const link = await page.$eval(
-        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div',
+        'div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper',
         (popup) => popup.querySelector('a.mapml-zoom-link')
       );