diff --git a/assets/src/legacy/map.js b/assets/src/legacy/map.js index 6d72a44744..b6350e0fe9 100644 --- a/assets/src/legacy/map.js +++ b/assets/src/legacy/map.js @@ -2282,31 +2282,38 @@ window.lizMap = function() { } } else{ - if (!text || text == null || text == '') + if (!text || text == null || text == ''){ return false; - // Use openlayers map popup anchored - popupContainerId = "liz_layer_popup"; - popup = new OpenLayers.Popup.LizmapAnchored( - popupContainerId, - eventLonLatInfo, - null, - text, - null, - true, - function() { - map.removePopup(this); - if(mCheckMobile()){ - $('#navbar').show(); - $('#overview-box').show(); - } + } - // clean locate layer - clearDrawLayer('locatelayer'); - return false; - } - ); - popup.panMapIfOutOfView = true; - map.addPopup(popup); + if (lizMap.mainLizmap.newOlMap) { + document.getElementById('popup-content').innerHTML = text; + } else { + // Use openlayers map popup anchored + popupContainerId = "liz_layer_popup"; + popup = new OpenLayers.Popup.LizmapAnchored( + popupContainerId, + eventLonLatInfo, + null, + text, + null, + true, + function() { + map.removePopup(this); + if(mCheckMobile()){ + $('#navbar').show(); + $('#overview-box').show(); + } + + // clean locate layer + clearDrawLayer('locatelayer'); + return false; + } + ); + popup.panMapIfOutOfView = true; + map.addPopup(popup); + popup.verifySize(); + } // Activate Boostrap 2 tabs here as they are not // automatically activated when created in popup anchored @@ -2315,7 +2322,6 @@ window.lizMap = function() { $(this).tab('show'); }); - popup.verifySize(); // Hide navbar and overview in mobile mode if(mCheckMobile()){ $('#navbar').hide(); diff --git a/assets/src/modules/Digitizing.js b/assets/src/modules/Digitizing.js index b5fb7b346b..b9583ab79b 100644 --- a/assets/src/modules/Digitizing.js +++ b/assets/src/modules/Digitizing.js @@ -491,6 +491,18 @@ export default class Digitizing { return null; } + /** + * Is digitizing tool active or not + * @todo active state should be set on UI's events + * @readonly + * @memberof Digitizing + * @returns {boolean} + */ + get isActive() { + const isActive = document.getElementById('button-draw')?.parentElement?.classList?.contains('active'); + return isActive ? true : false; + } + get isEdited() { return this._isEdited; } diff --git a/assets/src/modules/Lizmap.js b/assets/src/modules/Lizmap.js index 148d652d68..50816e344c 100644 --- a/assets/src/modules/Lizmap.js +++ b/assets/src/modules/Lizmap.js @@ -95,6 +95,10 @@ export default class Lizmap { }); } + get newOlMap() { + return this.map._newOlMap; + } + /** * @param {boolean} mode - switch new OL map on top of OL2 one */ diff --git a/assets/src/modules/Popup.js b/assets/src/modules/Popup.js index 09c6f28001..603b20bcf5 100644 --- a/assets/src/modules/Popup.js +++ b/assets/src/modules/Popup.js @@ -1,14 +1,10 @@ import { mainLizmap } from '../modules/Globals.js'; +import Overlay from 'ol/Overlay.js'; import WMS from '../modules/WMS.js'; export default class Popup { - constructor() { - - this._pointTolerance = mainLizmap.config.options?.pointTolerance || 25; - this._lineTolerance = mainLizmap.config.options?.lineTolerance || 10; - this._polygonTolerance = mainLizmap.config.options?.polygonTolerance || 5; - + // OL2 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, @@ -31,83 +27,119 @@ export default class Popup { ); }, trigger: evt => { - if(lizMap.editionPending){ - return; - } - - let candidateLayers = mainLizmap.state.rootMapGroup.findMapLayers().reverse(); - - // Only request visible layers - candidateLayers = candidateLayers.filter(layer => layer.visibility); - - // Only request layers with 'popup' checked in plugin - // Or some edition capabilities - candidateLayers = candidateLayers.filter(layer => { - const layerCfg = layer.layerConfig; - - let editionLayerCapabilities; - - if (mainLizmap.initialConfig?.editionLayers?.layerNames.includes(layer.name)) { - editionLayerCapabilities = mainLizmap.initialConfig?.editionLayers?.getLayerConfigByLayerName(layer.name)?.capabilities; - } - return layerCfg.popup || editionLayerCapabilities?.modifyAttribute || editionLayerCapabilities?.modifyGeometry || editionLayerCapabilities?.deleteFeature; - }); - - if(!candidateLayers.length){ - return; - } - - const layersWMS = candidateLayers.map(layer => layer.wmsName).join(); - - const wms = new WMS(); - - const [width, height] = lizMap.mainLizmap.map.getSize(); - - let bbox = mainLizmap.map.getView().calculateExtent(); - - if (mainLizmap.map.getView().getProjection().getAxisOrientation().substring(0, 2) === 'ne') { - bbox = [bbox[1], bbox[0], bbox[3], bbox[2]]; - } - - const wmsParams = { - QUERY_LAYERS: layersWMS, - LAYERS: layersWMS, - CRS: mainLizmap.projection, - BBOX: bbox, - FEATURE_COUNT: 10, - WIDTH: width, - HEIGHT: height, - I: Math.round(evt.xy.x), - J: Math.round(evt.xy.y), - FI_POINT_TOLERANCE: this._pointTolerance, - FI_LINE_TOLERANCE: this._lineTolerance, - FI_POLYGON_TOLERANCE: this._polygonTolerance - }; - - const filterTokens = []; - candidateLayers.forEach(layer => { - let filterToken = layer.wmsParameters?.FILTERTOKEN; - if (filterToken) { - filterTokens.push(filterToken); - } - }); - - if (filterTokens.length) { - wmsParams['FILTERTOKEN'] = filterTokens.join(';'); - } - - document.getElementById('map').style.cursor = 'wait'; - - wms.getFeatureInfo(wmsParams).then(response => { - lizMap.displayGetFeatureInfo(response, evt.xy); - }).finally(() => { - document.getElementById('map').style.cursor = 'auto'; - }); + this.handleClickOnMap(evt); } }); var click = new OpenLayers.Control.Click(); lizMap.map.addControl(click); click.activate(); + + // OL8 + /** + * Create an overlay to anchor the popup to the map. + */ + document.getElementById('popup-closer').onclick = () => { + this._overlay.setPosition(undefined); + return false; + }; + this._overlay = new Overlay({ + element: document.getElementById('popup'), + autoPan: { + animation: { + duration: 250, + }, + }, + }); + + mainLizmap.map.addOverlay(this._overlay); + mainLizmap.map.on('singleclick', evt => this.handleClickOnMap(evt)); + } + + get mapPopup() { + return this._overlay; + } + + handleClickOnMap(evt) { + const pointTolerance = mainLizmap.config.options?.pointTolerance || 25; + const lineTolerance = mainLizmap.config.options?.lineTolerance || 10; + const polygonTolerance = mainLizmap.config.options?.polygonTolerance || 5; + + if (lizMap.editionPending || mainLizmap.selectionTool.isActive || mainLizmap.digitizing.isActive) { + return; + } + + const xCoord = evt?.xy?.x || evt?.pixel?.[0]; + const yCoord = evt?.xy?.y || evt?.pixel?.[1]; + + let candidateLayers = mainLizmap.state.rootMapGroup.findMapLayers().reverse(); + + // Only request visible layers + candidateLayers = candidateLayers.filter(layer => layer.visibility); + + // Only request layers with 'popup' checked in plugin + // Or some edition capabilities + candidateLayers = candidateLayers.filter(layer => { + const layerCfg = layer.layerConfig; + + let editionLayerCapabilities; + + if (mainLizmap.initialConfig?.editionLayers?.layerNames.includes(layer.name)) { + editionLayerCapabilities = mainLizmap.initialConfig?.editionLayers?.getLayerConfigByLayerName(layer.name)?.capabilities; + } + return layerCfg.popup || editionLayerCapabilities?.modifyAttribute || editionLayerCapabilities?.modifyGeometry || editionLayerCapabilities?.deleteFeature; + }); + + if(!candidateLayers.length){ + return; + } + + const layersWMS = candidateLayers.map(layer => layer.wmsName).join(); + + const wms = new WMS(); + + const [width, height] = lizMap.mainLizmap.map.getSize(); + + let bbox = mainLizmap.map.getView().calculateExtent(); + + if (mainLizmap.map.getView().getProjection().getAxisOrientation().substring(0, 2) === 'ne') { + bbox = [bbox[1], bbox[0], bbox[3], bbox[2]]; + } + + const wmsParams = { + QUERY_LAYERS: layersWMS, + LAYERS: layersWMS, + CRS: mainLizmap.projection, + BBOX: bbox, + FEATURE_COUNT: 10, + WIDTH: width, + HEIGHT: height, + I: Math.round(xCoord), + J: Math.round(yCoord), + FI_POINT_TOLERANCE: pointTolerance, + FI_LINE_TOLERANCE: lineTolerance, + FI_POLYGON_TOLERANCE: polygonTolerance + }; + + const filterTokens = []; + candidateLayers.forEach(layer => { + let filterToken = layer.wmsParameters?.FILTERTOKEN; + if (filterToken) { + filterTokens.push(filterToken); + } + }); + + if (filterTokens.length) { + wmsParams['FILTERTOKEN'] = filterTokens.join(';'); + } + + document.getElementById('map').style.cursor = 'wait'; + + wms.getFeatureInfo(wmsParams).then(response => { + this._overlay.setPosition(evt.coordinate); + lizMap.displayGetFeatureInfo(response, {x: xCoord, y: yCoord}); + }).finally(() => { + document.getElementById('map').style.cursor = 'auto'; + }); } } \ No newline at end of file diff --git a/assets/src/modules/SelectionTool.js b/assets/src/modules/SelectionTool.js index e75235aa93..6b01cdb9c3 100644 --- a/assets/src/modules/SelectionTool.js +++ b/assets/src/modules/SelectionTool.js @@ -259,7 +259,6 @@ export default class SelectionTool { }); } - /** * Is selection tool active or not * @todo active state should be set on UI's events @@ -268,7 +267,8 @@ export default class SelectionTool { * @returns {boolean} */ get isActive() { - return document.getElementById('button-selectiontool').parentElement.classList.contains('active') + const isActive = document.getElementById('button-selectiontool')?.parentElement?.classList?.contains('active'); + return isActive ? true : false; } get layers() { diff --git a/lizmap/modules/view/templates/map.tpl b/lizmap/modules/view/templates/map.tpl index 8cadb347d9..81609a7bc6 100644 --- a/lizmap/modules/view/templates/map.tpl +++ b/lizmap/modules/view/templates/map.tpl @@ -47,6 +47,10 @@
+
diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css index 112331bb79..2a4300264c 100644 --- a/lizmap/www/assets/css/map.css +++ b/lizmap/www/assets/css/map.css @@ -2248,6 +2248,52 @@ lizmap-mouse-position > div.coords-unit > select{ word-break: normal; } +/* Map's popup OL8 */ + +.ol-popup { + position: absolute; + background-color: white; + box-shadow: 0 1px 4px rgba(0,0,0,0.2); + padding: 15px; + border-radius: 10px; + border: 1px solid #cccccc; + bottom: 12px; + left: -50px; + min-width: 280px; +} +.ol-popup:after, .ol-popup:before { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.ol-popup:after { + border-top-color: white; + border-width: 10px; + left: 48px; + margin-left: -10px; +} +.ol-popup:before { + border-top-color: #cccccc; + border-width: 11px; + left: 48px; + margin-left: -11px; +} +.ol-popup-closer { + text-decoration: none; + position: absolute; + top: 2px; + right: 8px; +} +.ol-popup-closer:after { + content: "✖"; +} + +/* Tooltip */ + #tooltipPopupContent { background-color:#F0F0F0 !important; border: rgba(0,0,0,0.7) solid 4px;