From cb315380b1f5cfb1c8c0ad8b92d5072c4b9ac419 Mon Sep 17 00:00:00 2001 From: Yushan Mu Date: Thu, 5 Dec 2024 11:40:51 -0500 Subject: [PATCH] Modified popup maxHeight --- src/mapml.css | 6 +++++ src/mapml/handlers/QueryHandler.js | 3 ++- src/mapml/layers/MapMLLayer.js | 27 ++++++++++++++++++---- src/mapml/layers/TemplatedFeaturesLayer.js | 9 +++++++- test/e2e/layers/queryLink.test.js | 8 +++---- 5 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index fef54a174..c53cb020f 100644 --- a/src/mapml.css +++ b/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; diff --git a/src/mapml/handlers/QueryHandler.js b/src/mapml/handlers/QueryHandler.js index 27bd727f4..0e12ef14e 100644 --- a/src/mapml/handlers/QueryHandler.js +++ b/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)); diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js index e27ccb2f4..54d4c9346 100644 --- a/src/mapml/layers/MapMLLayer.js +++ b/src/mapml/layers/MapMLLayer.js @@ -310,12 +310,20 @@ export var MapMLLayer = LayerGroup.extend({ _leafletLayer: layer, mapEl: layer._layerEl.parentElement, onEachFeature: function (properties, geometry) { + const map = layer._layerEl.parentElement._map; + const popupOptions = { + autoClose: false, + autoPan: true, + maxHeight: map.getSize().y * 0.5 - 50, + maxWidth: map.getSize().x * 0.7, + minWidth: 165 + }; // need to parse as HTML to preserve semantics and styles if (properties) { 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,24 +639,32 @@ export var MapMLLayer = LayerGroup.extend({ function attachZoomLink(e) { // this === popup - let content = this._content, + let content = this._content.parentElement.parentElement, featureEl = e ? e.currFeature : this._source._groupLayer._featureEl; if (content.querySelector('a.mapml-zoom-link')) { content.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(); @@ -656,6 +672,7 @@ export var MapMLLayer = LayerGroup.extend({ map.closePopup(); map.getContainer().focus(); }; + // we found that the popupopen event is fired as many times as there // are layers on the map ( elements / MapMLLayers that is). // In each case the target layer is always this layer, so we can't @@ -667,6 +684,8 @@ export var MapMLLayer = LayerGroup.extend({ // apart from this slightly non-optimal method. Revisit sometime! let link = content.querySelector('.mapml-zoom-link'); if (link) link.remove(); + + // attach link to popup content.insertBefore( zoomLink, content.querySelector('hr.mapml-popup-divider') diff --git a/src/mapml/layers/TemplatedFeaturesLayer.js b/src/mapml/layers/TemplatedFeaturesLayer.js index 9babfda46..b6de511ae 100644 --- a/src/mapml/layers/TemplatedFeaturesLayer.js +++ b/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 }); diff --git a/test/e2e/layers/queryLink.test.js b/test/e2e/layers/queryLink.test.js index 79c758e4f..7c5b70d2e 100644 --- a/test/e2e/layers/queryLink.test.js +++ b/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') );