qwc2 2026.8.7 → 2026.8.13

package/components/map3d/Map3D.js

@@ -1261,14 +1261,16 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
             };
           });
           resolve({
-            objects: objects,
-            colorLayers: layers,
-            baseLayer: ((_this2$state$sceneCon6 = _this2.state.sceneContext.baseLayers.find(function (layer) {
-              return layer.visibility === true;
-            })) === null || _this2$state$sceneCon6 === void 0 ? void 0 : _this2$state$sceneCon6.name) || "",
-            personHeight: (_this2$state$sceneCon7 = _this2.state.sceneContext.scene.view.controls.personHeight) !== null && _this2$state$sceneCon7 !== void 0 ? _this2$state$sceneCon7 : 0,
-            camera: [camera.x, camera.y, camera.z],
-            target: [target.x, target.y, target.z]
+            state: {
+              objects: objects,
+              colorLayers: layers,
+              baseLayer: ((_this2$state$sceneCon6 = _this2.state.sceneContext.baseLayers.find(function (layer) {
+                return layer.visibility === true;
+              })) === null || _this2$state$sceneCon6 === void 0 ? void 0 : _this2$state$sceneCon6.name) || "",
+              personHeight: (_this2$state$sceneCon7 = _this2.state.sceneContext.scene.view.controls.personHeight) !== null && _this2$state$sceneCon7 !== void 0 ? _this2$state$sceneCon7 : 0,
+              camera: [camera.x, camera.y, camera.z],
+              target: [target.x, target.y, target.z]
+            }
           });
         });
       });

package/components/style/BookmarkPanel.css

@@ -37,6 +37,8 @@ div.bookmark-list-item {
 div.bookmark-list-item > div.input-container {
     flex: 1 1 auto;
     border: none;
+    color: var(--text-color);
+    border: 1px solid var(--color-active);
 }
 
 div.bookmark-list-item-empty {

package/components/style/Icon.css

@@ -25,3 +25,7 @@ span.icon_xlarge:before {
     cursor: default;
     color: var(--text-color-disabled);
 }
+
+.icon_inactive {
+    color: #ccc;
+}

package/components/widgets/InputContainer.js

@@ -32,40 +32,19 @@ var InputContainer = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, InputContainer, [].concat(args));
-    _defineProperty(_this, "state", {
-      focused: false
-    });
     _defineProperty(_this, "findChild", function (role) {
       return React.Children.toArray(_this.props.children).filter(function (child) {
         return child.props.role === role;
       });
     });
-    _defineProperty(_this, "onInputBlur", function (ev, origHandler) {
-      if (origHandler) {
-        origHandler(ev);
-      }
-      _this.setState({
-        focused: false
-      });
-    });
-    _defineProperty(_this, "onInputFocus", function (ev, origHandler) {
-      if (origHandler) {
-        origHandler(ev);
-      }
-      _this.setState({
-        focused: true
-      });
-    });
     return _this;
   }
   _inherits(InputContainer, _React$Component);
   return _createClass(InputContainer, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
       var containerClasses = classnames(_defineProperty({
-        "input-container": true,
-        "input-container-focus": this.state.focused
+        "input-container": true
       }, this.props.className, !!this.props.className));
       var prefix = this.findChild("prefix").map(function (el) {
         return /*#__PURE__*/React.cloneElement(el, {
@@ -74,13 +53,7 @@ var InputContainer = /*#__PURE__*/function (_React$Component) {
       });
       var input = this.findChild("input").map(function (el) {
         return /*#__PURE__*/React.cloneElement(el, {
-          className: "input-container-input " + (el.props.className || ""),
-          onBlur: function onBlur(ev) {
-            return _this2.onInputBlur(ev, el.props.onBlur);
-          },
-          onFocus: function onFocus(ev) {
-            return _this2.onInputFocus(ev, el.props.onFocus);
-          }
+          className: "input-container-input " + (el.props.className || "")
         });
       });
       var suffix = this.findChild("suffix").map(function (el) {

package/components/widgets/style/InputContainer.css

@@ -12,7 +12,7 @@ div.input-container div.input-container {
     height: calc(2em - 2px);
 }
 
-div.input-container-focus {
+div.input-container:focus-within {
     outline: var(--focus-outline);
 }
 
@@ -33,4 +33,5 @@ div.input-container .input-container-input {
 
 div.input-container .input-container-input {
     height: calc(2em - 2px)!important;
+    min-height: calc(2em - 2px)!important;
 }

package/package.json

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

package/plugins/Bookmark.js

@@ -15,13 +15,13 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { refreshBookmarks } from '../actions/bookmark';
+import { setBookmarks } from '../actions/bookmark';
 import { zoomToExtent, zoomToPoint } from "../actions/map";
 import BookmarkPanel from '../components/BookmarkPanel';
 import SideBar from '../components/SideBar';
 import LocaleUtils from "../utils/LocaleUtils";
 import MapUtils from "../utils/MapUtils";
-import { createBookmark, removeBookmark, renameBookmark, resolveBookmark, updateBookmark } from '../utils/PermaLinkUtils';
+import { BookmarksInterface } from '../utils/PermaLinkUtils';
 
 /**
  * Allows managing user bookmarks which are storing the current view, including the location and zoom level.
@@ -39,32 +39,30 @@ var Bookmark = /*#__PURE__*/function (_React$Component) {
     }
     _this = _callSuper(this, Bookmark, [].concat(args));
     _defineProperty(_this, "translations", {
-      add: LocaleUtils.tr("bookmark.add"),
       addfailed: LocaleUtils.tr("bookmark.addfailed"),
       lastUpdate: LocaleUtils.tr("bookmark.lastUpdate"),
-      manage: LocaleUtils.tr("bookmark.manage"),
-      newbookmark: LocaleUtils.tr("bookmark.newbookmark"),
-      nobookmarks: LocaleUtils.tr("bookmark.nobookmarks"),
-      notloggedin: LocaleUtils.tr("bookmark.notloggedin"),
+      title: LocaleUtils.tr("appmenu.items.Bookmark"),
+      "new": LocaleUtils.tr("bookmark.newbookmark"),
+      noitems: LocaleUtils.tr("bookmark.nobookmarks"),
       open: LocaleUtils.tr("bookmark.open"),
       openTab: LocaleUtils.tr("bookmark.openTab"),
       update: LocaleUtils.tr("bookmark.update"),
       zoomToExtent: LocaleUtils.tr("bookmark.zoomToExtent"),
       removefailed: LocaleUtils.tr("bookmark.removefailed"),
-      savefailed: LocaleUtils.tr("bookmark.savefailed")
+      savefailed: LocaleUtils.tr("bookmark.savefailed"),
+      togglePublic: LocaleUtils.tr("bookmark.togglePublic"),
+      "public": LocaleUtils.tr("bookmark.public"),
+      confirmOverwrite: LocaleUtils.tr("bookmark.confirmOverwrite"),
+      confirmDelete: LocaleUtils.tr("bookmark.confirmDelete")
     });
     _defineProperty(_this, "renderBody", function () {
       return /*#__PURE__*/React.createElement(BookmarkPanel, {
+        bookmarkIface: BookmarksInterface,
         bookmarks: _this.props.bookmarks,
-        onAdd: createBookmark,
         onOpen: _this.onOpen,
-        onRefresh: _this.props.refreshBookmarks,
-        onRemove: removeBookmark,
-        onRename: renameBookmark,
-        onUpdate: updateBookmark,
         onZoomToExtent: _this.zoomToBookmarkExtent,
         openOnClick: _this.props.openOnClick,
-        showZoomToExtent: _this.props.mapCrs && _this.props.mapScales,
+        setList: _this.props.setBookmarks,
         translations: _this.translations
       });
     });
@@ -77,7 +75,7 @@ var Bookmark = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this, "zoomToBookmarkExtent", function (key) {
-      resolveBookmark(key, function (params) {
+      BookmarksInterface.resolve(key, function (params) {
         if ('c' in params && 's' in params) {
           var _params$crs;
           var scale = parseFloat(params.s);
@@ -99,9 +97,17 @@ var Bookmark = /*#__PURE__*/function (_React$Component) {
   }
   _inherits(Bookmark, _React$Component);
   return _createClass(Bookmark, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      BookmarksInterface.getList(function (bookmarks) {
+        _this2.props.setBookmarks(bookmarks);
+      });
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       return /*#__PURE__*/React.createElement(SideBar, {
         icon: "bookmark",
         id: "Bookmark",
@@ -110,7 +116,7 @@ var Bookmark = /*#__PURE__*/function (_React$Component) {
         width: "20em"
       }, function () {
         return {
-          body: _this2.renderBody()
+          body: _this3.renderBody()
         };
       });
     }
@@ -123,7 +129,7 @@ _defineProperty(Bookmark, "propTypes", {
   mapScales: PropTypes.array,
   /** Whether to directly open the bookmark on click / middle click, instead of showing dedicated open buttons. */
   openOnClick: PropTypes.bool,
-  refreshBookmarks: PropTypes.func,
+  setBookmarks: PropTypes.func,
   /** The side of the application on which to display the sidebar. */
   side: PropTypes.string,
   zoomToExtent: PropTypes.func,
@@ -141,7 +147,7 @@ var selector = function selector(state) {
   };
 };
 export default connect(selector, {
-  refreshBookmarks: refreshBookmarks,
+  setBookmarks: setBookmarks,
   zoomToExtent: zoomToExtent,
   zoomToPoint: zoomToPoint
 })(Bookmark);

package/plugins/BottomBar.js

@@ -46,7 +46,7 @@ import NumberInput from '../components/widgets/NumberInput';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
-import { resolveVisibilityPreset } from "../utils/PermaLinkUtils";
+import { VisibilityPresetsInterface } from "../utils/PermaLinkUtils";
 import './style/BottomBar.css';
 
 /**
@@ -97,7 +97,7 @@ var BottomBar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "openBookmarkOrPreset", function (prefixedKey) {
       if (prefixedKey.startsWith("vp:")) {
         var key = prefixedKey.slice("vp:".length);
-        resolveVisibilityPreset(key, function (preset) {
+        VisibilityPresetsInterface.resolve(key, function (preset) {
           if (preset) {
             _this.props.setThemeLayersVisibilityPreset(preset);
           }

package/plugins/Identify.js

@@ -47,6 +47,7 @@ import NumberInput from '../components/widgets/NumberInput';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import IdentifyUtils from '../utils/IdentifyUtils';
+import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MeasureUtils from '../utils/MeasureUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
@@ -76,7 +77,8 @@ var Identify = /*#__PURE__*/function (_React$Component) {
       radiusUnits: _this.props.initialRadiusUnits,
       exitTaskOnResultsClose: null,
       filterGeom: null,
-      filterGeomModifiers: {}
+      filterGeomModifiers: {},
+      importErrors: null
     });
     _defineProperty(_this, "queryPoint", function (prevProps) {
       if (_this.props.click.button !== 0 || _this.props.click === prevProps.click || (_this.props.click.features || []).find(function (feature) {
@@ -103,10 +105,6 @@ var Identify = /*#__PURE__*/function (_React$Component) {
         var identifyResults = _this.props.click.modifiers.ctrl !== true && !appendResultsByDefault ? {} : (_state$identifyResult = state.identifyResults) !== null && _state$identifyResult !== void 0 ? _state$identifyResult : {};
         var params = _objectSpread({}, _this.props.params);
         var resultDisplayMode = _this.props.taskEnabled ? (_this$props$taskResul = _this.props.taskResultDisplayMode) !== null && _this$props$taskResul !== void 0 ? _this$props$taskResul : _this.props.resultDisplayMode : _this.props.resultDisplayMode;
-        if (resultDisplayMode === "table") {
-          params.with_htmlcontent = false;
-          params.with_maptip = false;
-        }
         var queryableLayers = [];
         queryableLayers = IdentifyUtils.getQueryLayers(_this.props.layers, _this.props.map);
         queryableLayers.forEach(function (l) {
@@ -171,10 +169,6 @@ var Identify = /*#__PURE__*/function (_React$Component) {
       var pendingRequests = 0;
       var params = _objectSpread({}, _this.props.params);
       var resultDisplayMode = _this.props.taskEnabled ? (_this$props$taskResul2 = _this.props.taskResultDisplayMode) !== null && _this$props$taskResul2 !== void 0 ? _this$props$taskResul2 : _this.props.resultDisplayMode : _this.props.resultDisplayMode;
-      if (resultDisplayMode === "table") {
-        params.with_htmlcontent = false;
-        params.with_maptip = false;
-      }
       if (_this.props.params.region_feature_count) {
         params.feature_count = _this.props.params.region_feature_count;
         delete params.region_feature_count;
@@ -254,6 +248,7 @@ var Identify = /*#__PURE__*/function (_React$Component) {
           identifyResults: identifyResults
         };
       });
+      return newResults;
     });
     _defineProperty(_this, "onShow", function (mode, data) {
       _this.setState({
@@ -384,10 +379,13 @@ var Identify = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this, "export", function () {
-      var data = JSON.stringify(_this.state.identifyResults, null, ' ');
-      FileSaver.saveAs(new Blob([data], {
-        type: 'application/json'
-      }), 'results.json');
+      if (_this.viewerRef) {
+        var results = _this.viewerRef.serializeResults();
+        var data = JSON.stringify(results, null, ' ');
+        FileSaver.saveAs(new Blob([data], {
+          type: 'application/json'
+        }), 'results.json');
+      }
     });
     _defineProperty(_this, "import", function () {
       _this.fileinput.click();
@@ -397,27 +395,94 @@ var Identify = /*#__PURE__*/function (_React$Component) {
       reader.readAsText(ev.target.files[0]);
       reader.onload = function () {
         try {
-          var identifyResults = JSON.parse(reader.result);
-          _this.setState({
-            identifyResults: identifyResults,
-            pendingRequests: 0
-          });
+          var _this$props$taskResul3;
+          var resultDisplayMode = _this.props.taskEnabled ? (_this$props$taskResul3 = _this.props.taskResultDisplayMode) !== null && _this$props$taskResul3 !== void 0 ? _this$props$taskResul3 : _this.props.resultDisplayMode : _this.props.resultDisplayMode;
+          _this.deserializeResults(JSON.parse(reader.result), resultDisplayMode);
         } catch (_unused2) {
           /* eslint-disable-next-line no-alert */
           alert(LocaleUtils.tr("common.dataloadfailed"));
         }
       };
     });
+    _defineProperty(_this, "deserializeResults", function (identifyResults, resultDisplayMode) {
+      var pendingRequests = 0;
+      var importErrors = {};
+      Object.entries(identifyResults).forEach(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          layerid = _ref6[0],
+          layerresults = _ref6[1];
+        if (layerresults.key && layerresults.values) {
+          delete identifyResults[layerid]; // Features will be re-queried
+          var _layerid$split = layerid.split("#", 2),
+            _layerid$split2 = _slicedToArray(_layerid$split, 2),
+            layerUrl = _layerid$split2[0],
+            layerName = _layerid$split2[1];
+          var match = LayerUtils.searchLayer(_this.props.layers, 'url', layerUrl, 'name', layerName);
+          if (match) {
+            var values = layerresults.values.map(function (x) {
+              return typeof x === "string" ? "\"".concat(x, "\"") : x;
+            }).join(" , ");
+            var filter = {
+              filter: "".concat(layerName, ":\"").concat(layerresults.key, "\" IN ( ").concat(values, " )")
+            };
+            var request = IdentifyUtils.buildFilterRequest(match.layer, layerName, undefined, _this.props.map, filter);
+            ++pendingRequests;
+            IdentifyUtils.sendRequest(request, function (response) {
+              _this.setState(function (state2) {
+                return {
+                  pendingRequests: state2.pendingRequests - 1
+                };
+              });
+              if (response) {
+                var results = _this.parseResult(response, match.layer, request.params.info_format, [0, 0], false);
+                var restoredkeys = new Set(results[layerName].map(function (f) {
+                  return String(f.id);
+                }));
+                var missing = layerresults.values.filter(function (x) {
+                  return !restoredkeys.has(String(x));
+                });
+                if (missing.length > 0) {
+                  _this.setState(function (state) {
+                    return {
+                      importErrors: _objectSpread(_objectSpread({}, state.importErrors), {}, _defineProperty({}, layerid, {
+                        key: layerresults.key,
+                        missing: missing
+                      }))
+                    };
+                  });
+                }
+              } else {
+                _this.setState(function (state) {
+                  return {
+                    importErrors: _objectSpread(_objectSpread({}, state.importErrors), {}, _defineProperty({}, layerid, true))
+                  };
+                });
+              }
+            });
+          } else {
+            importErrors[layerid] = true;
+          }
+        }
+      });
+      _this.setState({
+        identifyResults: identifyResults,
+        pendingRequests: pendingRequests,
+        importErrors: importErrors,
+        currentResultDisplayMode: resultDisplayMode
+      });
+    });
     _this.fileinput = document.createElement("input");
     _this.fileinput.type = "file";
     _this.fileinput.accept = "application/json";
     _this.fileinput.addEventListener("change", _this.fileSelected);
+    _this.viewerRef = null;
     return _this;
   }
   _inherits(Identify, _React$Component);
   return _createClass(Identify, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
       if (this.props.enabled && this.props.theme && !prevProps.theme) {
         var startupParams = this.props.startupParams;
         var haveIc = ["1", "true"].includes((startupParams.ic || "").toLowerCase());
@@ -428,7 +493,7 @@ var Identify = /*#__PURE__*/function (_React$Component) {
           var mapCrs = this.props.theme.mapCrs;
           this.identifyPoint(CoordinatesUtils.reproject(c, startupParams.crs || mapCrs, mapCrs));
         } else if (this.props.startupState.identifyresultstate) {
-          this.setState(_objectSpread({}, this.props.startupState.identifyresultstate));
+          this.deserializeResults(_objectSpread({}, this.props.startupState.identifyresultstate.identifyResults), this.props.startupState.identifyresultstate.currentResultDisplayMode);
         }
       } else if (this.props.theme !== prevProps.theme) {
         this.clearResults();
@@ -482,16 +547,38 @@ var Identify = /*#__PURE__*/function (_React$Component) {
         if (isEmpty(this.state.identifyResults) && this.props.onlyShowDialogWithResults) {
           this.clearResults();
         }
+        if (!isEmpty(this.state.importErrors)) {
+          var errMsg = Object.entries(this.state.importErrors).map(function (_ref7) {
+            var _match$sublayer$title, _match$sublayer;
+            var _ref8 = _slicedToArray(_ref7, 2),
+              layerid = _ref8[0],
+              errors = _ref8[1];
+            var _layerid$split3 = layerid.split("#", 2),
+              _layerid$split4 = _slicedToArray(_layerid$split3, 2),
+              layerUrl = _layerid$split4[0],
+              layerName = _layerid$split4[1];
+            var match = LayerUtils.searchLayer(_this2.props.layers, 'url', layerUrl, 'name', layerName);
+            var layertitle = (_match$sublayer$title = match === null || match === void 0 || (_match$sublayer = match.sublayer) === null || _match$sublayer === void 0 ? void 0 : _match$sublayer.title) !== null && _match$sublayer$title !== void 0 ? _match$sublayer$title : layerName;
+            if (errors === true) {
+              return "- ".concat(layertitle, ": ").concat(LocaleUtils.tr("identify.missinglayer"));
+            } else {
+              return "- ".concat(layertitle, ": ").concat(LocaleUtils.tr("identify.featuresmissing", errors.missing.length, "".concat(errors.key, " = {").concat(errors.missing.join(","), "}")));
+            }
+          }).join("\n");
+          // eslint-disable-next-line no-alert
+          alert(LocaleUtils.tr("identify.importerrors", errMsg));
+        }
         this.setState({
           filterGeom: null,
-          filterGeomModifiers: {}
+          filterGeomModifiers: {},
+          importErrors: null
         });
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       var resultWindow = null;
       if (this.props.onlyShowDialogWithResults && isEmpty(this.state.identifyResults)) {
         // pass
@@ -523,6 +610,9 @@ var Identify = /*#__PURE__*/function (_React$Component) {
             highlightAllResults: this.props.highlightAllResults,
             identifyResults: this.state.identifyResults,
             iframeDialogsInitiallyDocked: this.props.iframeDialogsInitiallyDocked,
+            innerRef: function innerRef(el) {
+              _this3.viewerRef = el;
+            },
             longAttributesDisplay: this.props.longAttributesDisplay,
             replaceImageUrls: this.props.replaceImageUrls,
             resultDisplayMode: this.state.currentResultDisplayMode,
@@ -561,14 +651,14 @@ var Identify = /*#__PURE__*/function (_React$Component) {
         task: "Identify"
       }, function () {
         return {
-          body: _this2.renderBody()
+          body: _this3.renderBody()
         };
       }), ["Region", "Rectangle", "Radius", "Circle"].includes(this.state.mode) ? /*#__PURE__*/React.createElement(MapSelection, {
         active: this.state.mode !== "Radius",
         geomType: geomTypeMap[this.state.mode],
         geometry: this.state.filterGeom,
         geometryChanged: function geometryChanged(geom, mod) {
-          return _this2.setState({
+          return _this3.setState({
             filterGeom: geom,
             filterGeomModifiers: mod
           });

package/plugins/MapFilter.js

@@ -41,7 +41,6 @@ import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { LayerRole, setFilter } from '../actions/layers';
-import { setPermalinkParameters } from '../actions/localConfig';
 import { setCurrentTask } from '../actions/task';
 import Icon from '../components/Icon';
 import MapButton from '../components/MapButton';
@@ -58,6 +57,7 @@ import DataServiceExprUtils from '../utils/DataServiceExprUtils';
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MiscUtils from '../utils/MiscUtils';
+import { registerPermalinkDataStoreHook, unregisterPermalinkDataStoreHook } from '../utils/PermaLinkUtils';
 import './style/MapFilter.css';
 
 /**
@@ -228,37 +228,43 @@ var MapFilter = /*#__PURE__*/function (_React$Component) {
           });
         });
       }
-      var permalinkState = Object.entries(_this.state.filters).reduce(function (res, _ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          key = _ref6[0],
-          value = _ref6[1];
-        if (value.active) {
-          return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, key, value.values));
-        } else {
-          return res;
-        }
-      }, {});
-      if (_this.state.geomFilter.geom) {
-        permalinkState.__geomfilter = _this.state.geomFilter.geom.coordinates;
-      }
-      permalinkState.__custom = Object.values(_this.state.customFilters).map(function (entry) {
-        if (!entry.active) {
-          return null;
-        }
-        var expr = null;
-        try {
-          expr = JSON.parse(entry.expr);
-        } catch (_unused2) {
-          return null;
+    });
+    _defineProperty(_this, "serializeMapFilter", function () {
+      return new Promise(function (resolve) {
+        var permalinkState = Object.entries(_this.state.filters).reduce(function (res, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            key = _ref6[0],
+            value = _ref6[1];
+          if (value.active) {
+            return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, key, value.values));
+          } else {
+            return res;
+          }
+        }, {});
+        if (_this.state.geomFilter.geom) {
+          permalinkState.__geomfilter = _this.state.geomFilter.geom.coordinates;
         }
-        return {
-          title: entry.title,
-          layer: entry.layer,
-          expr: expr
-        };
-      }).filter(Boolean);
-      _this.props.setPermalinkParameters({
-        f: JSON.stringify(permalinkState)
+        permalinkState.__custom = Object.values(_this.state.customFilters).map(function (entry) {
+          if (!entry.active) {
+            return null;
+          }
+          var expr = null;
+          try {
+            expr = JSON.parse(entry.expr);
+          } catch (_unused2) {
+            return null;
+          }
+          return {
+            title: entry.title,
+            layer: entry.layer,
+            expr: expr
+          };
+        }).filter(Boolean);
+        resolve({
+          query: {
+            f: JSON.stringify(permalinkState)
+          }
+        });
       });
     });
     _defineProperty(_this, "buildTimeFilter", function (layer, filters, wmsName) {
@@ -672,6 +678,16 @@ var MapFilter = /*#__PURE__*/function (_React$Component) {
   }
   _inherits(MapFilter, _React$Component);
   return _createClass(MapFilter, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      registerPermalinkDataStoreHook("mapfilter", this.serializeMapFilter);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      unregisterPermalinkDataStoreHook("mapfilter");
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
@@ -829,7 +845,6 @@ _defineProperty(MapFilter, "propTypes", {
   position: PropTypes.number,
   setCurrentTask: PropTypes.func,
   setFilter: PropTypes.func,
-  setPermalinkParameters: PropTypes.func,
   /** The side of the application on which to display the sidebar. */
   side: PropTypes.string,
   startupParams: PropTypes.object,
@@ -854,6 +869,5 @@ export default connect(function (state) {
   };
 }, {
   setFilter: setFilter,
-  setCurrentTask: setCurrentTask,
-  setPermalinkParameters: setPermalinkParameters
+  setCurrentTask: setCurrentTask
 })(MapFilter);