qwc2 2026.3.24 → 2026.3.30

package/README.md

@@ -1,4 +1,4 @@
-![Logo](https://raw.githubusercontent.com/qgis/qwc2/refs/heads/master/static/assets/img/qwc-logo.svg) QGIS Web Client
+![Logo](https://raw.githubusercontent.com/qgis/qwc2/refs/heads/master/static/assets/img/qwc-logo.svg) QGIS Web Client · [qwc.app](https://qwc.app)
 =================
 
 ## Introduction
@@ -10,28 +10,7 @@ The `qwc2` NPM package can be used as a dependency to build a custom QWC applica
 
 ### Main Features
 
-- Modular and easily configurable and extensible
-- Responsive, separately configurable for desktop and mobile devices
-- Theme switcher
-- Search with configurable search providers
-- Layer tree
-  * Toggle layers and groups
-  * Change layer order and opacity
-  * Import external WMS/WFS/WMTS/GeoJSON/KML layers
-  * Compare layers
-- Feature info
-- Printing using QGIS print layouts
-- Share permalinks
-- Bookmarks
-- Measuring tools
-- Height profile
-- Redlining
-- Editing and attribute table
-- Attribute table
-- Export map (raster images, DXF)
-- Time manager for temporal layers
-- Themeable with color schemes
-- [Additional plugins!](https://qwc-services.github.io/master/references/qwc2_plugins/)
+See [qwc.app/features](https://qwc.app/features).
 
 ## Quick start
 

package/components/AppMenu.js

@@ -72,8 +72,8 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         _this.props.setCurrentTask(null);
       }
       _this.props.onMenuToggled(!_this.state.menuVisible);
-      if (_this.props.menuCompact) {
-        _this.props.setMenuMargin(!_this.state.menuVisible ? MiscUtils.convertEmToPx(3.75) : 0, 0);
+      if (_this.props.menuDisplayMode !== "normal") {
+        _this.props.setMenuMargin(!_this.state.menuVisible ? MiscUtils.convertEmToPx(3.5) : 0, 0);
       }
       _this.setState(function (state) {
         return {
@@ -84,7 +84,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "checkCloseMenu", function (ev) {
-      if (_this.menuEl && !_this.menuEl.contains(ev.target) && !_this.props.keepMenuOpen) {
+      if (_this.menuEl && !_this.menuEl.contains(ev.target) && _this.props.menuDisplayMode === "normal") {
         _this.toggleMenu();
         MiscUtils.killEvent(ev);
       }
@@ -98,7 +98,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "onMenuitemClicked", function (item) {
-      if (!_this.props.keepMenuOpen && _this.state.menuVisible) {
+      if (_this.props.menuDisplayMode === "normal" && _this.state.menuVisible) {
         _this.toggleMenu();
       }
       if (item.url) {
@@ -111,6 +111,10 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderMenuItems", function (items, level, filter) {
       var submenu = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       return (items || []).map(function (item) {
+        var trargs = item.trargs || [];
+        var label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
+        var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
+        var labelclass = _this.props.menuDisplayMode === "icononly" ? "appmenu-menu-item-tooltip" : "appmenu-menu-item-label";
         if (item.subitems) {
           var _item$key;
           var expanded = filter || _this.state.submenusVisible[level] === item.key;
@@ -123,7 +127,6 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
             "appmenu-submenu": true,
             "appmenu-submenu-expanded": expanded
           });
-          var label = item.title ? LocaleUtils.tr(item.title) : LocaleUtils.tr("appmenu.items." + item.key);
           return [/*#__PURE__*/React.createElement("div", {
             className: className,
             key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.title,
@@ -137,14 +140,12 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
             tabIndex: 0
           }, /*#__PURE__*/React.createElement(Icon, {
             icon: item.icon,
-            size: "xlarge",
-            title: _this.props.menuIconOnly ? label : null
-          }), !_this.props.menuIconOnly ? label : null), subitems];
+            size: "xlarge"
+          }), /*#__PURE__*/React.createElement("span", {
+            className: labelclass
+          }, label)), subitems];
         } else {
-          var trargs = item.trargs || [];
-          var _label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
-          var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
-          if (!filter || removeDiacritics(_label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
+          if (!filter || removeDiacritics(label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
             var _className = classnames({
               "appmenu-menu-item": true,
               "appmenu-menu-item-nested": submenu
@@ -162,13 +163,10 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
               tabIndex: 0
             }, /*#__PURE__*/React.createElement(Icon, {
               icon: item.icon,
-              size: "xlarge",
-              title: _this.props.menuIconOnly ? _label : null
-            }), !_this.props.menuIconOnly ? /*#__PURE__*/React.createElement("span", {
-              className: "appmenu-menu-item-label"
-            }, _label, comment ? /*#__PURE__*/React.createElement("div", {
-              className: "appmenu-menu-item-comment"
-            }, comment) : null) : null);
+              size: "xlarge"
+            }), /*#__PURE__*/React.createElement("span", {
+              className: labelclass
+            }, label));
           }
           return null;
         }
@@ -215,7 +213,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         MiscUtils.killEvent(ev);
       } else if (ev.key === 'Escape') {
         var _this$menuBtn, _this$menuBtn$focus;
-        if (!_this.props.menuCompact) {
+        if (_this.props.menuDisplayMode === "normal") {
           _this.toggleMenu();
         }
         (_this$menuBtn = _this.menuBtn) === null || _this$menuBtn === void 0 || (_this$menuBtn$focus = _this$menuBtn.focus) === null || _this$menuBtn$focus === void 0 || _this$menuBtn$focus.call(_this$menuBtn);
@@ -237,7 +235,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
   return _createClass(AppMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.showOnStartup) {
+      if (this.props.showOnStartup || this.props.menuDisplayMode !== "normal") {
         this.toggleMenu();
       }
       this.addKeyBindings(this.props.menuItems);
@@ -249,7 +247,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
-      if (this.state.menuVisible && !prevState.menuVisible && !this.props.menuCompact) {
+      if (this.state.menuVisible && !prevState.menuVisible) {
         // Need to wait until slide in transition is over
         setTimeout(function () {
           var _this2$filterfield, _this2$filterfield$fo;
@@ -259,7 +257,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         setTimeout(function () {
           return document.addEventListener('click', _this2.checkCloseMenu);
         }, 0);
-      } else if (prevState.menuVisible && !this.state.menuVisible && !this.props.menuCompact) {
+      } else if (prevState.menuVisible && !this.state.menuVisible) {
         document.removeEventListener('click', this.checkCloseMenu);
       }
     }
@@ -281,13 +279,13 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         _this$props$buttonCon;
       var isMobile = ConfigUtils.isMobile();
       var visible = !this.props.currentTaskBlocked && this.state.menuVisible;
-      var showLabel = !this.props.menuCompact && !isMobile;
+      var showLabel = this.props.menuDisplayMode === "normal" && !isMobile;
       var className = classnames({
         "AppMenu": true,
         "appmenu-blocked": this.props.currentTaskBlocked,
         "appmenu-visible": visible,
-        "appmenu-compact": this.props.menuCompact,
-        "appmenu-icononly": this.props.menuIconOnly,
+        "appmenu-compact": this.props.menuDisplayMode === "compact",
+        "appmenu-icononly": this.props.menuDisplayMode === "icononly",
         "appmenu-nolabel": !showLabel
       });
       var filter = this.state.filter ? new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i") : null;
@@ -313,6 +311,8 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       }))]), /*#__PURE__*/React.createElement("div", {
         className: "appmenu-menu-container",
         tabIndex: -1
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "appmenu-menu-aligner"
       }, /*#__PURE__*/React.createElement("div", {
         className: "appmenu-menu",
         inert: !visible,
@@ -321,7 +321,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
           _this3.menuEl = el;
           MiscUtils.setupKillTouchEvents(el);
         }
-      }, this.props.showFilterField ? /*#__PURE__*/React.createElement("div", {
+      }, this.props.showFilterField && this.props.menuDisplayMode !== "icononly" ? /*#__PURE__*/React.createElement("div", {
         className: "appmenu-menu-item appmenu-menu-item-filter",
         onFocus: this.focusFilterField,
         onKeyDown: this.keyNav,
@@ -352,7 +352,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
           });
         },
         role: "suffix"
-      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter))));
+      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter)))));
     }
   }]);
 }(React.Component);
@@ -362,8 +362,7 @@ _defineProperty(AppMenu, "propTypes", {
   buttonContents: PropTypes.object,
   buttonLabel: PropTypes.string,
   currentTaskBlocked: PropTypes.bool,
-  keepMenuOpen: PropTypes.bool,
-  menuCompact: PropTypes.bool,
+  menuDisplayMode: PropTypes.string,
   menuIconOnly: PropTypes.bool,
   menuItems: PropTypes.array,
   onMenuToggled: PropTypes.func,

package/components/AttributeTableWidget.js

@@ -388,7 +388,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       };
       newState[stateField] = val;
       // Reset page if a reload is triggered (either filter changed with a set filter value, or filter value cleared)
-      if (newState.filterVal || _this.state.filterVal && !newState.filterVal) {
+      if (newState.filterField && (newState.filterVal || _this.state.filterVal && !newState.filterVal)) {
         newState.currentPage = 0;
         _this.reload(_this.state.selectedLayer, false, newState);
       } else {
@@ -814,6 +814,13 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       if (this.state.highlightedFeature !== prevState.highlightedFeature || this.state.features !== prevState.features || this.state.selectedFeatures !== prevState.selectedFeatures) {
         this.highlightFeatures();
       }
+      if (this.state.loadedLayer !== prevState.loadedLayer && this.props.showDisplayFieldOnly) {
+        this.setState(function (state) {
+          return {
+            filterField: state.curEditConfig.displayField
+          };
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",

package/components/SearchBox.js

@@ -1025,12 +1025,13 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         var text = LocaleUtils.tr("search.existinglayer") + ": " + existingLayerName;
         _this.props.showNotification("existinglayer", text);
       } else {
+        var _existingLayer$role;
         var existingLayer = _this.props.layers.find(function (l) {
           return l.type === layer.type && l.url === layer.url;
         });
         _this.props.addLayer(_objectSpread(_objectSpread({}, layer), {}, {
           srcid: existingLayer === null || existingLayer === void 0 ? void 0 : existingLayer.srcid,
-          role: LayerRole.USERLAYER
+          role: (_existingLayer$role = existingLayer === null || existingLayer === void 0 ? void 0 : existingLayer.role) !== null && _existingLayer$role !== void 0 ? _existingLayer$role : LayerRole.USERLAYER
         }));
       }
       if (_this.props.searchOptions.zoomToLayers && layer.bbox) {

package/components/map3d/utils/MiscUtils3D.js

@@ -101,9 +101,10 @@ export function computeOBBXY(mesh) {
   var zmin = Infinity;
   var zmax = -Infinity;
   for (var i = 0; i < n; i++) {
-    pointsxy[i] = [pos.getX(i), pos.getY(i)];
-    zmin = Math.min(zmin, pos.getZ(i));
-    zmax = Math.max(zmax, pos.getZ(i));
+    var p = new Vector3(pos.getX(i), pos.getY(i), pos.getZ(i)).applyMatrix4(mesh.matrixWorld);
+    pointsxy[i] = [p.x, p.y];
+    zmin = Math.min(zmin, p.z);
+    zmax = Math.max(zmax, p.z);
   }
 
   // Compute convex hull
@@ -125,9 +126,9 @@ export function computeOBBXY(mesh) {
     var _vmin = Infinity;
     var _vmax = -Infinity;
     for (var j = 0; j < hull.length; j++) {
-      var p = _construct(Vector2, _toConsumableArray(hull[j]));
-      var pu = p.dot(_u);
-      var pv = p.dot(_v);
+      var _p = _construct(Vector2, _toConsumableArray(hull[j]));
+      var pu = _p.dot(_u);
+      var pv = _p.dot(_v);
       if (pu < _umin) _umin = pu;
       if (pu > _umax) _umax = pu;
       if (pv < _vmin) _vmin = pv;
@@ -153,12 +154,11 @@ export function computeOBBXY(mesh) {
     umax = _best.umax,
     vmin = _best.vmin,
     vmax = _best.vmax;
-  var center = new Vector3(u.x * (umin + umax) / 2 + v.x * (vmin + vmax) / 2, u.y * (umin + umax) / 2 + v.y * (vmin + vmax) / 2, (zmin + zmax) / 2).applyMatrix4(mesh.matrixWorld);
-  var normalMatrix = new Matrix3().getNormalMatrix(mesh.matrixWorld);
+  var center = new Vector3(u.x * (umin + umax) / 2 + v.x * (vmin + vmax) / 2, u.y * (umin + umax) / 2 + v.y * (vmin + vmax) / 2, (zmin + zmax) / 2);
   return {
     center: center,
-    axes: [new Vector3(u.x, u.y, 0).applyMatrix3(normalMatrix).normalize(), new Vector3(v.x, v.y, 0).applyMatrix3(normalMatrix).normalize(), new Vector3(0, 0, 1)],
-    halfSizes: new Vector3((umax - umin) / 2 * Math.hypot(u.x * mesh.scale.x, u.y * mesh.scale.y), (vmax - vmin) / 2 * Math.hypot(v.x * mesh.scale.x, v.y * mesh.scale.y), (zmax - zmin) / 2 * mesh.scale.z)
+    axes: [new Vector3(u.x, u.y, 0), new Vector3(v.x, v.y, 0), new Vector3(0, 0, 1)],
+    halfSizes: new Vector3((umax - umin) / 2, (vmax - vmin) / 2, (zmax - zmin) / 2)
   };
 }
 export var TileMeshHelper = /*#__PURE__*/function () {

package/components/style/AppMenu.css

@@ -36,10 +36,16 @@ div.AppMenu.appmenu-visible .appmenu-label {
     color: var(--app-submenu-text-color-hover);
 }
 
+div.AppMenu .appmenu-icon {
+    width: 3.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 div.AppMenu .appmenu-icon > span.icon {
     color: var(--app-menu-text-color);
     padding: 0.25em;
-    margin: 0 1em;
     border: 2px solid var(--app-menu-text-color);
     transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
@@ -58,47 +64,52 @@ div.AppMenu div.appmenu-menu-container {
     position: absolute;
     top: 100%;
     right: 0;
-    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
-    width: 20em;
-    max-width: 100vw;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(var(--plugins-container-height) - var(--topbar-height) - var(--bottombar-height));
+    pointer-events: none;
     opacity: 0;
     transform-origin: top;
     transform: scaleY(0);
     transition: transform 0.25s, opacity 0.25s;
-    overflow-y: auto;
-    max-height: calc(var(--plugins-container-height) - var(--topbar-height) - var(--bottombar-height));
-    border-radius: 0px 0px 0px var(--border-radius);
 }
 
-div.AppMenu.appmenu-compact div.appmenu-menu-container {
-    right: -11.25em;
-    width: 15em;
-    height: calc(var(--plugins-container-height) - var(--topbar-height) - var(--bottombar-height));
-    transition: transform 0.25s, opacity 0.25s, right 0.5s;
-    background: var(--app-menu-bg-color);
-    box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.5);
-    top: 3.5em;
-}
-
-div.AppMenu.appmenu-icononly div.appmenu-menu-container {
-    right: 0;
-    width: auto;
+div.AppMenu.appmenu-visible div.appmenu-menu-container {
+    transform: scaleY(1);
+    opacity: 1;
 }
 
-div.AppMenu.appmenu-compact div.appmenu-menu-container:hover,
-div.AppMenu.appmenu-compact div.appmenu-menu-container:focus-within {
-    right: 0;
+div.AppMenu div.appmenu-menu-aligner {
+    display: flex;
+    justify-content: end;
 }
 
 div.AppMenu div.appmenu-menu {
+    position:  relative;
+    pointer-events: initial;
+    text-align: left;
     background-color: var(--app-menu-bg-color);
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
     text-align: left;
-    font-size: small;
+    width: 22.22em;
+    font-size: 90%;
+    border-radius: 0px 0px 0px var(--border-radius);
 }
 
-div.AppMenu.appmenu-visible div.appmenu-menu-container {
-    transform: scaleY(1);
-    opacity: 1;
+div.AppMenu.appmenu-compact div.appmenu-menu {
+    right: -18.33em;
+    transition: right 0.5s;
+}
+
+div.AppMenu.appmenu-compact div.appmenu-menu:hover,
+div.AppMenu.appmenu-compact div.appmenu-menu:focus-within {
+    right: 0;
+}
+
+div.AppMenu.appmenu-icononly div.appmenu-menu {
+    width: 3.89em;
+    right: 0;
 }
 
 div.appmenu-menu-item {
@@ -106,6 +117,7 @@ div.appmenu-menu-item {
     align-items: center;
     color: var(--app-menu-text-color);
     font-weight: bold;
+    position: relative;
 }
 
 div.appmenu-menu-item:not(:last-child) {
@@ -126,6 +138,25 @@ div.appmenu-menu-item-comment {
     font-size: 90%;
 }
 
+span.appmenu-menu-item-tooltip {
+    position: absolute;
+    display: none;
+    background-color: var(--tooltip-bg-color);
+    border: 1px solid var(--tooltip-border-color);
+    color: var(--tooltip-text-color);
+    font-size: 75%;
+    font-weight: normal;
+    padding: 0.5em;
+    border-radius: 0.5em;
+    white-space: nowrap;
+    right: calc(100% + 0.25em);
+    z-index: 2;
+}
+
+div.appmenu-menu-item:hover span.appmenu-menu-item-tooltip {
+    display: inline;
+}
+
 div.appmenu-submenu-active,
 div.appmenu-submenu-expanded {
     background-color: var(--app-menu-bg-color-hover);

package/components/style/AttributeTableWidget.css

@@ -42,10 +42,6 @@ div.attribtable-contents {
     position: relative;
 }
 
-table.attribtable-table {
-    min-width: 100%;
-}
-
 table.attribtable-table th {
     position: sticky;
     top: 0;
@@ -109,6 +105,10 @@ table.attribtable-table td:first-child {
     width: 2.5em;
 }
 
+table.attribtable-table td {
+    min-width: 2.5em;;
+}
+
 span.attribtable-table-ldraghandle,
 span.attribtable-table-rdraghandle {
     touch-action: none;
@@ -149,7 +149,7 @@ span.attribtable-table-bdraghandle {
 
 table.attribtable-table {
     table-layout: fixed;
-    width: 100%;
+    min-width: 100%;
 }
 
 table.attribtable-table td {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2026.03.24",
+    "version": "2026.03.30",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",

package/plugins/Bookmark.js

@@ -316,8 +316,9 @@ var Bookmark = /*#__PURE__*/function (_React$Component) {
         }) : null, _this2.state.renameBookmark !== bookmark.key ? /*#__PURE__*/React.createElement(Icon, {
           disabled: _this2.state.busy,
           icon: "trash",
-          onClick: function onClick() {
-            return _this2.removeBookmark(bookmark.key);
+          onClick: function onClick(ev) {
+            _this2.removeBookmark(bookmark.key);
+            MiscUtils.killEvent(ev);
           },
           title: LocaleUtils.tr("common.delete")
         }) : null);

package/plugins/LayerTree.js

@@ -484,6 +484,24 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(ev) {
           return _this.layerTransparencyChanged(layer, path, ev.target.value, !isEmpty(sublayer.sublayers) ? 'children' : null);
         },
+        onMouseDown: function onMouseDown(ev) {
+          return ev.stopPropagation();
+        },
+        onMouseMove: function onMouseMove(ev) {
+          return ev.stopPropagation();
+        },
+        onPointerDown: function onPointerDown(ev) {
+          return ev.stopPropagation();
+        },
+        onPointerMove: function onPointerMove(ev) {
+          return ev.stopPropagation();
+        },
+        onTouchMove: function onTouchMove(ev) {
+          return ev.stopPropagation();
+        },
+        onTouchStart: function onTouchStart(ev) {
+          return ev.stopPropagation();
+        },
         step: "1",
         type: "range",
         value: 255 - LayerUtils.computeLayerOpacity(sublayer)
@@ -544,12 +562,14 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         var usedGroupIds = new Set();
         if (isEmpty(layer.sublayers) && layer.role !== LayerRole.THEME) {
           return _this.renderLayer(layer, layer, [], layer.visibility, false, !haveGroups);
+        } else if (_this.props.showRootEntry && layer.role === LayerRole.THEME && isEmpty(layer.sublayers)) {
+          return null;
         } else if (_this.props.showRootEntry || layer.role !== LayerRole.THEME) {
           return _this.renderLayerGroup(layer, layer, [], layer.visibility, false, usedGroupIds);
         } else {
           return layer.sublayers.map(function (sublayer, idx) {
             var subpath = [idx];
-            if (sublayer.sublayers) {
+            if (!isEmpty(sublayer.sublayers)) {
               return _this.renderLayerGroup(layer, sublayer, subpath, layer.visibility, false, usedGroupIds);
             } else {
               return _this.renderLayer(layer, sublayer, subpath, layer.visibility, false, !haveGroups);

package/plugins/TopBar.js

@@ -166,12 +166,17 @@ var TopBar = /*#__PURE__*/function (_React$Component) {
       var searchOptions = _objectSpread(_objectSpread({}, TopBar.defaultProps.searchOptions), this.props.searchOptions);
       searchOptions.minScaleDenom = searchOptions.minScaleDenom || searchOptions.minScale;
       delete searchOptions.minScale;
-      // Menu compact only available for desktop client
-      var menuCompact = !isMobile ? this.props.appMenuCompact : false;
-      // Keep menu open when appMenu is in compact mode (Visible on Hover)
-      var keepMenuOpen = menuCompact;
+      // Validate appMenuDisplayMode
+      var appMenuDisplayMode = this.props.appMenuDisplayMode;
+      if (ConfigUtils.isMobile() || !["normal", "compact", "icononly"].includes(this.props.appMenuDisplayMode)) {
+        appMenuDisplayMode = "normal";
+        /* eslint-disable-next-line react/prop-types */
+      } else if (this.props.appMenuCompact) {
+        /* eslint-disable-next-line no-console */
+        console.warn("TopBar: the appMenuCompact prop is deprecated, use appMenuDisplayMode");
+        appMenuDisplayMode = "compact";
+      }
       // Menu should be visible on startup when appMenu is in compact mode (Visible on Hover)
-      var showOnStartup = this.props.appMenuVisibleOnStartup || menuCompact;
       var style = {
         marginLeft: this.props.mapMargins.outerLeft + 'px',
         marginRight: this.props.mapMargins.outerRight + 'px'
@@ -201,13 +206,11 @@ var TopBar = /*#__PURE__*/function (_React$Component) {
         appMenuClearsTask: this.props.appMenuClearsTask,
         appMenuShortcut: this.props.appMenuShortcut,
         buttonLabel: LocaleUtils.tr("appmenu.menulabel"),
-        keepMenuOpen: keepMenuOpen,
-        menuCompact: menuCompact,
-        menuIconOnly: this.props.appMenuIconOnly,
+        menuDisplayMode: appMenuDisplayMode,
         menuItems: this.state.allowedMenuItems,
         openExternalUrl: this.openUrl,
         showFilterField: this.props.appMenuFilterField,
-        showOnStartup: showOnStartup
+        showOnStartup: this.props.appMenuVisibleOnStartup
       }) : null, this.props.components.FullscreenSwitcher ? /*#__PURE__*/React.createElement(this.props.components.FullscreenSwitcher, null) : null));
     }
   }]);
@@ -215,8 +218,8 @@ var TopBar = /*#__PURE__*/function (_React$Component) {
 _defineProperty(TopBar, "propTypes", {
   /** Whether opening the app menu clears the active task. */
   appMenuClearsTask: PropTypes.bool,
-  /** Whether show an appMenu compact (menu visible on icons hover) - Only available for desktop client. */
-  appMenuCompact: PropTypes.bool,
+  /** App-Menu display mode. Only available for desktop client. */
+  appMenuDisplayMode: PropTypes.oneOf(["normal", "compact", "iconsonly"]),
   /** Whether to display the filter field in the app menu. */
   appMenuFilterField: PropTypes.bool,
   /** Whether to hide the app menu (useful primarely as a theme specific setting). */
@@ -296,6 +299,7 @@ _defineProperty(TopBar, "defaultProps", {
     showResultInSearchText: true,
     minScaleDenom: 1000
   },
+  appMenuDisplayMode: 'normal',
   menuItems: [],
   toolbarItems: [],
   logoFormat: "svg"

package/plugins/map3d/HideObjects3D.js

@@ -202,7 +202,7 @@ var HideObjects3D = /*#__PURE__*/function (_React$Component) {
       var index = pick.object.geometry.getIndex();
 
       // Create highlight geometry
-      _this.storeHiddenObject(pick, posAttr.array, norAttr.array, index);
+      _this.storeHiddenObject(pick, posAttr.array, norAttr === null || norAttr === void 0 ? void 0 : norAttr.array, index);
     });
     _defineProperty(_this, "storeHiddenObject", function (pick, position, normal) {
       var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -212,7 +212,9 @@ var HideObjects3D = /*#__PURE__*/function (_React$Component) {
       });
       var geometry = new BufferGeometry();
       geometry.setAttribute('position', new Float32BufferAttribute(position, 3));
-      geometry.setAttribute('normal', new Float32BufferAttribute(normal, 3));
+      if (normal) {
+        geometry.setAttribute('normal', new Float32BufferAttribute(normal, 3));
+      }
       geometry.setIndex(index);
       var mesh = new Mesh(geometry, material);
       mesh.receiveShadow = true;

package/plugins/map3d/MeasureObjects3D.js

@@ -173,16 +173,16 @@ var MeasureObjects3D = /*#__PURE__*/function (_React$Component) {
       _this.storeMeasuredObject(pick, pickPosition, pickNormal, null, pickFeatureId, pickUuid);
     });
     _defineProperty(_this, "measureObjectPick", function (pick) {
-      var posAttr = pick.object.geometry.getAttribute('position');
-      var norAttr = pick.object.geometry.getAttribute('normal');
-      var index = pick.object.geometry.getIndex();
       if (pick.object.uuid in _this.state.measuredObjects) {
         _this.removeMeasurement(_this.state.measuredObjects[pick.object.uuid]);
         return;
       }
+      var posAttr = pick.object.geometry.getAttribute('position');
+      var norAttr = pick.object.geometry.getAttribute('normal');
+      var index = pick.object.geometry.getIndex();
 
       // Create highlight geometry
-      _this.storeMeasuredObject(pick, posAttr.array, norAttr.array, index, null, pick.object.uuid);
+      _this.storeMeasuredObject(pick, posAttr.array, norAttr === null || norAttr === void 0 ? void 0 : norAttr.array, index, null, pick.object.uuid);
     });
     _defineProperty(_this, "storeMeasuredObject", function (pick, position, normal) {
       var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -193,7 +193,9 @@ var MeasureObjects3D = /*#__PURE__*/function (_React$Component) {
       });
       var geometry = new BufferGeometry();
       geometry.setAttribute('position', new Float32BufferAttribute(position, 3));
-      geometry.setAttribute('normal', new Float32BufferAttribute(normal, 3));
+      if (normal) {
+        geometry.setAttribute('normal', new Float32BufferAttribute(normal, 3));
+      }
       geometry.setIndex(index);
       var mesh = new Mesh(geometry, material);
       mesh.receiveShadow = true;
@@ -285,7 +287,7 @@ var MeasureObjects3D = /*#__PURE__*/function (_React$Component) {
       var dim2 = LocaleUtils.toLocaleFixed(2 * obox.halfSizes.y, decimals);
       var dim3 = LocaleUtils.toLocaleFixed(2 * obox.halfSizes.z, decimals);
       boxmesh.userData.label = "<span class=\"map3d-measure-label\"><span style=\"color: red\">".concat(dim1, "</span> \u26CC <span style=\"color: green\">").concat(dim2, "</span> \u26CC <span style=\"color: blue\">").concat(dim3, "</span></<span>");
-      boxmesh.userData.labelOffset = 15;
+      boxmesh.userData.labelOffset = 5 + obox.halfSizes.z;
       updateObjectLabel(boxmesh, _this.props.sceneContext);
       return boxmesh;
     });

package/plugins/map3d/TopBar3D.js

@@ -132,7 +132,14 @@ var TopBar3D = /*#__PURE__*/function (_React$Component) {
           target: "_blank"
         }, logoEl);
       }
-      var menuCompact = !isMobile ? config.appMenuCompact : false;
+
+      // Validate appMenuDisplayMode
+      var appMenuDisplayMode = config.appMenuDisplayMode;
+      if (!ConfigUtils.isMobile() || !["normal", "compact", "icononly"].includes(config.appMenuDisplayMode)) {
+        appMenuDisplayMode = "normal";
+      } else if (config.appMenuCompact) {
+        appMenuDisplayMode = "compact";
+      }
       var classes = classNames({
         TopBar: true,
         mobile: isMobile,
@@ -162,12 +169,11 @@ var TopBar3D = /*#__PURE__*/function (_React$Component) {
         appMenuClearsTask: config.appMenuClearsTask,
         appMenuShortcut: config.appMenuShortcut,
         buttonLabel: LocaleUtils.tr("appmenu.menulabel"),
-        keepMenuOpen: menuCompact,
-        menuCompact: menuCompact,
-        menuIconOnly: config.appMenuIconOnly,
+        menuDisplayMode: appMenuDisplayMode,
         menuItems: this.state.allowedMenuItems,
         openExternalUrl: this.openUrl,
-        showFilterField: config.appMenuFilterField
+        showFilterField: config.appMenuFilterField,
+        showOnStartup: config.appMenuVisibleOnStartup
       }), this.props.viewMode === ViewMode._3DFullscreen ? /*#__PURE__*/React.createElement(FullscreenSwitcher, null) : null));
     }
   }]);

package/plugins/style/Portal.css

@@ -31,11 +31,6 @@ span.portal-topbar-spacer {
     flex: 1 1 auto;
 }
 
-div.portal-topbar div.AppMenu div.appmenu-menu-container {
-    height: calc(var(--plugins-container-height) - var(--topbar-height) - var(--bottombar-height));
-    background-color: var(--app-menu-bg-color);
-}
-
 div.portal-topbar div.AppMenu ul.appmenu-menu li:last-child {
     border-bottom: 1px solid var(--app-menu-text-color);
 }

package/reducers/layers.js

@@ -282,6 +282,23 @@ export default function layers() {
             }
           });
         }
+        // Ensure (empty) theme layer is present
+        if (!_newLayers5.find(function (l) {
+          return l.role === LayerRole.THEME;
+        })) {
+          var prevThemeLayer = state.flat.find(function (l) {
+            return l.role === LayerRole.THEME;
+          });
+          if (prevThemeLayer) {
+            var themeLayer = _objectSpread(_objectSpread({}, prevThemeLayer), {}, {
+              sublayers: []
+            });
+            var pos = _newLayers5.findIndex(function (l) {
+              return l.role === LayerRole.BACKGROUND;
+            });
+            _newLayers5.splice(pos === -1 ? _newLayers5.length : pos, 0, _objectSpread(_objectSpread({}, themeLayer), LayerUtils.buildWMSLayerParams(themeLayer, state.filter)));
+          }
+        }
         UrlParams.updateParams({
           l: LayerUtils.buildWMSLayerUrlParam(_newLayers5)
         });

package/utils/LayerUtils.js

@@ -92,6 +92,7 @@ var LayerUtils = {
   restoreOrderedLayerParams: function restoreOrderedLayerParams(themeLayer, layerConfigs, permalinkLayers, externalLayers) {
     var exploded = LayerUtils.explodeLayers([themeLayer]);
     var reordered = [];
+    var haveThemeLayer = false;
     // Iterate over layer configs and reorder items accordingly, create external layer placeholders as neccessary
     var _iterator3 = _createForOfIteratorHelper(layerConfigs),
       _step3;
@@ -99,6 +100,7 @@ var LayerUtils = {
       var _loop2 = function _loop2() {
         var layerConfig = _step3.value;
         if (layerConfig.type === 'theme') {
+          haveThemeLayer = true;
           var entry = exploded.find(function (e) {
             return e.sublayer.name === layerConfig.name;
           });
@@ -125,6 +127,12 @@ var LayerUtils = {
     }
     LayerUtils.insertPermalinkLayers(reordered, permalinkLayers);
     var layers = LayerUtils.implodeLayers(reordered);
+    if (!haveThemeLayer) {
+      // Ensure empty theme layer container is present
+      layers.unshift(_objectSpread(_objectSpread({}, themeLayer), {}, {
+        sublayers: []
+      }));
+    }
     LayerUtils.setGroupVisiblities(layers);
     return layers;
   },
@@ -682,28 +690,32 @@ var LayerUtils = {
   implodeLayers: function implodeLayers(exploded) {
     var newlayers = [];
     var usedIds = new Set();
+    var prevlayer = null;
 
     // Merge all possible items of an exploded layer array
     var _iterator1 = _createForOfIteratorHelper(exploded),
       _step1;
     try {
       for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
+        var _prevlayer;
         var entry = _step1.value;
         var _layer2 = entry.layer;
 
         // Attempt to merge with previous if possible
-        var target = newlayers.length > 0 ? newlayers[newlayers.length - 1] : null;
-        var source = _layer2;
-        if (target && target.sublayers && target.srcid === _layer2.srcid) {
-          var innertarget = target.sublayers[target.sublayers.length - 1];
-          var innersource = source.sublayers[0]; // Exploded entries have only one entry per sublayer level
-          while (innertarget && innertarget.sublayers && innertarget.name === innersource.name) {
-            target = innertarget;
-            source = innersource;
-            innertarget = target.sublayers[target.sublayers.length - 1];
-            innersource = source.sublayers[0]; // Exploded entries have only one entry per sublayer level
+        if (((_prevlayer = prevlayer) === null || _prevlayer === void 0 ? void 0 : _prevlayer.srcid) === _layer2.srcid) {
+          if (isEmpty(prevlayer.sublayers)) {
+            prevlayer.sublayers = _layer2.sublayers;
+          } else if (!isEmpty(_layer2.sublayers)) {
+            // Find deepest nested matching group
+            var group = _layer2;
+            var prevgroup = prevlayer;
+            while (!isEmpty(group.sublayers) && !isEmpty(prevgroup.sublayers) && ((_group$sublayers$ = group.sublayers[0]) === null || _group$sublayers$ === void 0 ? void 0 : _group$sublayers$.name) === ((_prevgroup$sublayers = prevgroup.sublayers[prevgroup.sublayers.length - 1]) === null || _prevgroup$sublayers === void 0 ? void 0 : _prevgroup$sublayers.name)) {
+              var _group$sublayers$, _prevgroup$sublayers;
+              group = group.sublayers[0]; // Exploded layers have one layer per sublayer level
+              prevgroup = prevgroup.sublayers[prevgroup.sublayers.length - 1];
+            }
+            prevgroup.sublayers.push(group.sublayers[0]);
           }
-          target.sublayers.push(source.sublayers[0]);
         } else {
           if (usedIds.has(_layer2.id)) {
             newlayers.push(_objectSpread(_objectSpread({}, _layer2), {}, {
@@ -712,6 +724,7 @@ var LayerUtils = {
           } else {
             newlayers.push(_layer2);
           }
+          prevlayer = newlayers[newlayers.length - 1];
           usedIds.add(_layer2.id);
         }
       }