qwc2 2025.10.9 → 2025.10.14

package/plugins/LayerTree.js

@@ -1,15 +1,1203 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var _n=0,F=function F(){};return{s:F,n:function n(){return _n>=r.length?{done:!0}:{done:!1,value:r[_n++]}},e:function e(r){throw r},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function s(){t=t.call(r)},n:function n(){var r=t.next();return a=r.done,r},e:function e(r){u=!0,o=r},f:function f(){try{a||null==t["return"]||t["return"]()}finally{if(u)throw o}}}}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import Sortable from"react-sortablejs";import classnames from"classnames";import FileSaver from"file-saver";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{setActiveLayerInfo}from"../actions/layerinfo";import{LayerRole,changeLayerProperty,removeLayer,reorderLayer,setSwipe,addLayerSeparator,setThemeLayersVisibilityPreset}from"../actions/layers";import{toggleMapTips,zoomToExtent}from"../actions/map";import{setActiveServiceInfo}from"../actions/serviceinfo";import{setCurrentTask}from"../actions/task";import Icon from"../components/Icon";import ImportLayer from"../components/ImportLayer";import LayerInfoWindow from"../components/LayerInfoWindow";import ResizeableWindow from"../components/ResizeableWindow";import ServiceInfoWindow from"../components/ServiceInfoWindow";import SideBar from"../components/SideBar";import{Image}from"../components/widgets/Primitives";import Spinner from"../components/widgets/Spinner";import ConfigUtils from"../utils/ConfigUtils";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import MiscUtils from"../utils/MiscUtils";import VectorLayerUtils from"../utils/VectorLayerUtils";import"./style/LayerTree.css";/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Sortable from 'react-sortablejs';
+import classnames from 'classnames';
+import FileSaver from 'file-saver';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+import { setActiveLayerInfo } from '../actions/layerinfo';
+import { LayerRole, changeLayerProperty, removeLayer, reorderLayer, setSwipe, addLayerSeparator, setThemeLayersVisibilityPreset } from '../actions/layers';
+import { toggleMapTips, zoomToExtent } from '../actions/map';
+import { setActiveServiceInfo } from '../actions/serviceinfo';
+import { setCurrentTask } from '../actions/task';
+import Icon from '../components/Icon';
+import ImportLayer from '../components/ImportLayer';
+import LayerInfoWindow from '../components/LayerInfoWindow';
+import ResizeableWindow from '../components/ResizeableWindow';
+import ServiceInfoWindow from '../components/ServiceInfoWindow';
+import SideBar from '../components/SideBar';
+import { Image } from '../components/widgets/Primitives';
+import Spinner from '../components/widgets/Spinner';
+import ConfigUtils from '../utils/ConfigUtils';
+import LayerUtils from '../utils/LayerUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MapUtils from '../utils/MapUtils';
+import MiscUtils from '../utils/MiscUtils';
+import VectorLayerUtils from '../utils/VectorLayerUtils';
+import './style/LayerTree.css';
+
+/**
  * Displays the map layer tree in a sidebar.
  *
  * The print legend functionality requires a template located by default at assets/templates/legendprint.html
  * with containing a container element with id=legendcontainer.
- */var LayerTree=/*#__PURE__*/function(_React$Component){function LayerTree(props){var _this;_classCallCheck(this,LayerTree);_this=_callSuper(this,LayerTree,[props]);_defineProperty(_this,"state",{activemenu:null,activestylemenu:null,legendTooltip:null,sidebarwidth:null,importvisible:false,filterinvisiblelayers:false,legendPrintVisible:false,visibilityMenu:false,activePreset:null});_defineProperty(_this,"renderSubLayers",function(layer,group,path,enabled,inMutuallyExclusiveGroup,usedGroupIds){return(group.sublayers||[]).map(function(sublayer,idx){var subpath=[].concat(_toConsumableArray(path),[idx]);if(sublayer.sublayers){return _this.renderLayerGroup(layer,sublayer,subpath,enabled,inMutuallyExclusiveGroup,usedGroupIds)}else{return _this.renderLayer(layer,sublayer,subpath,enabled,inMutuallyExclusiveGroup)}})});_defineProperty(_this,"renderLayerGroup",function(layer,group,path,enabled,inMutuallyExclusiveGroup,usedGroupIds){var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;if(flattenGroups){return _this.renderSubLayers(layer,group,path,enabled,false,usedGroupIds)}var subtreevisibility=LayerUtils.computeLayerVisibility(group);if(subtreevisibility===0&&_this.state.filterinvisiblelayers){return null}var groupId=layer.id+":"+group.name;for(var i=0;usedGroupIds.has(groupId);++i){groupId=layer.id+":"+group.name+":"+i}usedGroupIds.add(groupId);var visibility=true;var checkboxstate="";if(_this.props.groupTogglesSublayers&&!inMutuallyExclusiveGroup){visibility=subtreevisibility>0;if(subtreevisibility===1){checkboxstate="checked"}else if(subtreevisibility===0){checkboxstate="unchecked"}else{checkboxstate="tristate"}}else{visibility=group.visibility===undefined?subtreevisibility>0:group.visibility;if(visibility){checkboxstate=subtreevisibility===1?"checked":"tristate"}else{checkboxstate="unchecked"}}var omitqueryable;var identifyableClassName="";var subtreequeryable=LayerUtils.computeLayerQueryable(group);if(subtreequeryable===1){identifyableClassName="layertree-item-identifyable-checked";omitqueryable=false}else if(subtreequeryable===0){identifyableClassName="layertree-item-identifyable-unchecked";omitqueryable=true}else{identifyableClassName="layertree-item-identifyable-tristate";omitqueryable=true}if(inMutuallyExclusiveGroup){checkboxstate="radio_"+checkboxstate}var expanderstate=group.expanded?"tree_minus":"tree_plus";var showExpander=(!_this.props.onlyGroups||(group.sublayers||[]).some(function(sublayer){return sublayer.sublayers}))&&group.sublayers.some(function(sublayer){var _layer$layerTreeHidde;return!((_layer$layerTreeHidde=layer.layerTreeHiddenSublayers)!==null&&_layer$layerTreeHidde!==void 0?_layer$layerTreeHidde:[]).includes(sublayer.name)});var itemclasses={"layertree-item":true,"layertree-item-disabled":!_this.props.groupTogglesSublayers&&!enabled||_this.props.grayUnchecked&&!visibility};var sublayersContent=null;if(group.expanded){sublayersContent=_this.renderSubLayers(layer,group,path,enabled&&visibility,group.mutuallyExclusive===true,usedGroupIds)}var optMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activemenu===groupId});var styleMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activestylemenu===groupId});var allowRemove=ConfigUtils.getConfigProp("allowRemovingThemeLayers",_this.props.theme)===true||layer.role!==LayerRole.THEME;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true&&!_this.state.filterinvisiblelayers;var sortable=allowReordering&&ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering",_this.props.theme)===true;var styles=layer.type==="wms"&&path.length===0?_this.getLayerStyles(layer):null;return/*#__PURE__*/React.createElement("div",{className:"layertree-item-container","data-id":JSON.stringify({layer:layer.id,path:path}),key:groupId},/*#__PURE__*/React.createElement("div",{className:classnames(itemclasses)},showExpander?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-expander",icon:expanderstate,onClick:function onClick(){return _this.groupExpandedToggled(layer,path,group.expanded)}}):/*#__PURE__*/React.createElement("span",{className:"layertree-item-expander"}),/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-checkbox",icon:checkboxstate,onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,visibility)}}),/*#__PURE__*/React.createElement("span",{className:"layertree-item-title",onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,visibility)},title:group.title},group.title),LayerUtils.hasQueryableSublayers(group)&&_this.props.allowSelectIdentifyableLayers?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-identifyable "+identifyableClassName,icon:"info-sign",onClick:function onClick(){return _this.itemOmitQueryableToggled(layer,path,omitqueryable)}}):null,/*#__PURE__*/React.createElement("span",{className:"layertree-item-spacer"}),Object.keys(styles||{}).length>1?/*#__PURE__*/React.createElement(Icon,{className:styleMenuClasses,icon:"paint",onClick:function onClick(){return _this.layerStyleMenuToggled(groupId)}}):null,/*#__PURE__*/React.createElement(Icon,{className:optMenuClasses,icon:"cog",onClick:function onClick(){return _this.layerMenuToggled(groupId)}}),allowRemove?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-remove",icon:"trash",onClick:function onClick(){return _this.props.removeLayer(layer.id,path)}}):null),_this.state.activemenu===groupId?_this.renderOptionsMenu(layer,group,path,allowRemove,subtreevisibility):null,_this.state.activestylemenu===groupId?_this.renderStyleMenu(styles,_this.getSelectedStyles(layer),function(style){return _this.applyLayerStyle(style,layer)}):null,/*#__PURE__*/React.createElement(Sortable,{onChange:_this.onSortChange,options:{disabled:sortable===false,ghostClass:"drop-ghost",delay:200,forceFallback:_this.props.fallbackDrag}},sublayersContent))});_defineProperty(_this,"renderLayer",function(layer,sublayer,path){var _layer$layerTreeHidde2;var enabled=arguments.length>3&&arguments[3]!==undefined?arguments[3]:true;var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;var skipExpanderPlaceholder=arguments.length>5&&arguments[5]!==undefined?arguments[5]:false;if(_this.props.onlyGroups){return null}if(_this.state.filterinvisiblelayers&&!sublayer.visibility){return null}if(((_layer$layerTreeHidde2=layer.layerTreeHiddenSublayers)!==null&&_layer$layerTreeHidde2!==void 0?_layer$layerTreeHidde2:[]).includes(sublayer.name)){return null}var sublayerId=layer.id+":"+sublayer.name;var allowRemove=ConfigUtils.getConfigProp("allowRemovingThemeLayers",_this.props.theme)===true||layer.role!==LayerRole.THEME;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true;var checkboxstate=sublayer.visibility===true?"checked":"unchecked";if(inMutuallyExclusiveGroup){checkboxstate="radio_"+checkboxstate}var optMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activemenu===sublayerId});var styleMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activestylemenu===sublayerId});var itemclasses={"layertree-item":true,"layertree-item-disabled":layer.type!=="separator"&&(!_this.props.groupTogglesSublayers&&!enabled||_this.props.grayUnchecked&&!sublayer.visibility),"layertree-item-separator":layer.type==="separator","layertree-item-outsidescalerange":sublayer.minScale!==undefined&&_this.props.mapScale<sublayer.minScale||sublayer.maxScale!==undefined&&_this.props.mapScale>sublayer.maxScale};var infoButton=null;if(layer.type==="wms"||layer.type==="wfs"||layer.type==="wmts"){infoButton=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-metadata",icon:"info-sign",onClick:function onClick(){return _this.props.setActiveLayerInfo(layer,sublayer)}})}var legendicon=null;if(_this.props.showLegendIcons){var legendUrl=LayerUtils.getLegendUrl(layer,sublayer,_this.props.mapScale,_this.props.map,_this.props.bboxDependentLegend,_this.props.scaleDependentLegend,_this.props.extraLegendParameters);if(legendUrl){legendicon=/*#__PURE__*/React.createElement(Image,{className:"layertree-item-legend-thumbnail",onMouseOut:_this.hideLegendTooltip,onMouseOver:function onMouseOver(ev){return _this.showLegendTooltip(ev,legendUrl)},onTouchStart:function onTouchStart(ev){return _this.showLegendTooltip(ev,legendUrl)},src:legendUrl+"&TYPE=thumbnail"})}else if(layer.color){legendicon=/*#__PURE__*/React.createElement("span",{className:"layertree-item-legend-coloricon",style:{backgroundColor:layer.color}})}}var checkbox=null;if(layer.type==="placeholder"){checkbox=/*#__PURE__*/React.createElement(Spinner,null)}else if(layer.type==="separator"){checkbox=null}else{checkbox=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-checkbox",icon:checkboxstate,onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,sublayer.visibility)}})}var title=null;if(layer.type==="separator"){title=/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return _this.props.changeLayerProperty(layer.id,"title",ev.target.value)},value:sublayer.title})}else{title=/*#__PURE__*/React.createElement("span",{className:"layertree-item-title",onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,sublayer.visibility)},title:sublayer.title},sublayer.title)}var queryableicon=null;if(_this.props.allowSelectIdentifyableLayers){var identifyableClassName=!sublayer.omitFromQueryLayers?"layertree-item-identifyable-checked":"layertree-item-identifyable-unchecked";queryableicon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-identifyable "+identifyableClassName,icon:"info-sign",onClick:function onClick(){return _this.itemOmitQueryableToggled(layer,path,sublayer.omitFromQueryLayers)}})}else{queryableicon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-queryable",icon:"info-sign"})}var allowOptions=layer.type!=="placeholder"&&layer.type!=="separator";var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var allowSeparators=flattenGroups&&allowReordering&&ConfigUtils.getConfigProp("allowLayerTreeSeparators",_this.props.theme);var separatorTitle=LocaleUtils.tr("layertree.separator");var separatorTooltip=LocaleUtils.tr("layertree.separatortooltip");return/*#__PURE__*/React.createElement("div",{className:"layertree-item-container","data-id":JSON.stringify({layer:layer.id,path:path}),key:sublayerId},allowSeparators?/*#__PURE__*/React.createElement("div",{className:"layertree-item-addsep",onClick:function onClick(){return _this.props.addLayerSeparator(separatorTitle,layer.id,path)},title:separatorTooltip}):null,/*#__PURE__*/React.createElement("div",{className:classnames(itemclasses)},flattenGroups||skipExpanderPlaceholder?null:/*#__PURE__*/React.createElement("span",{className:"layertree-item-expander"}),checkbox,legendicon,title,sublayer.queryable&&_this.props.showQueryableIcon?queryableicon:null,sublayer.name in(_this.props.filter.filterParams||{})||_this.props.filter.filterGeom?/*#__PURE__*/React.createElement(Icon,{icon:"filter"}):null,_this.props.loadingLayers.includes(layer.id)?/*#__PURE__*/React.createElement(Spinner,null):null,/*#__PURE__*/React.createElement("span",{className:"layertree-item-spacer"}),allowOptions&&!_this.props.infoInSettings?infoButton:null,Object.keys(sublayer.styles||{}).length>1?/*#__PURE__*/React.createElement(Icon,{className:styleMenuClasses,icon:"paint",onClick:function onClick(){return _this.layerStyleMenuToggled(sublayerId)}}):null,allowOptions?/*#__PURE__*/React.createElement(Icon,{className:optMenuClasses,icon:"cog",onClick:function onClick(){return _this.layerMenuToggled(sublayerId)}}):null,allowRemove?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-remove",icon:"trash",onClick:function onClick(){return _this.props.removeLayer(layer.id,path)}}):null),_this.state.activemenu===sublayerId?_this.renderOptionsMenu(layer,sublayer,path,allowRemove):null,_this.state.activestylemenu===sublayerId?_this.renderStyleMenu(sublayer.styles,[sublayer.style],function(style){return _this.layerStyleChanged(layer,path,style)}):null)});_defineProperty(_this,"renderOptionsMenu",function(layer,sublayer,path,marginRight){var subtreevisibility=arguments.length>4&&arguments[4]!==undefined?arguments[4]:0;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true;var zoomToLayerButton=null;if(sublayer.bbox&&sublayer.bbox.bounds){var zoomToLayerTooltip=LocaleUtils.tr("layertree.zoomtolayer");var crs=sublayer.bbox.crs||_this.props.map.projection;zoomToLayerButton=/*#__PURE__*/React.createElement(Icon,{icon:"zoom",onClick:function onClick(){return _this.props.zoomToExtent(sublayer.bbox.bounds,crs)},title:zoomToLayerTooltip})}var reorderButtons=null;if(allowReordering&&!_this.state.filterinvisiblelayers){reorderButtons=[/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-move",icon:"arrow-down",key:"layertree-item-move-down",onClick:function onClick(){return _this.props.reorderLayer(layer,path,+1)}}),/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-move",icon:"arrow-up",key:"layertree-item-move-up",onClick:function onClick(){return _this.props.reorderLayer(layer,path,-1)}})]}var toggleGroupButton=null;if(sublayer.sublayers&&!_this.props.groupTogglesSublayers){toggleGroupButton=/*#__PURE__*/React.createElement(Icon,{icon:"tree",onClick:function onClick(){return _this.props.changeLayerProperty(layer.id,"visibility",subtreevisibility!==1,path,"children")}})}var infoButton=null;if(_this.props.infoInSettings&&(layer.type==="wms"||layer.type==="wfs"||layer.type==="wmts")){infoButton=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-metadata",icon:"info-sign",onClick:function onClick(){return _this.props.setActiveLayerInfo(layer,sublayer)}})}var attrTableButton=null;if(_this.props.showAttributeTableLink&&ConfigUtils.havePlugin("AttributeTable")&&layer.role===LayerRole.THEME&&_this.props.theme.editConfig[sublayer.name]){attrTableButton=/*#__PURE__*/React.createElement(Icon,{icon:"editing",onClick:function onClick(){return _this.props.setCurrentTask("AttributeTable",null,null,{layer:sublayer.name})}})}return/*#__PURE__*/React.createElement("div",{className:"layertree-item-optionsmenu",onPointerDown:_this.preventLayerTreeItemDrag,style:{marginRight:marginRight*1.75+"em"}},zoomToLayerButton,_this.props.transparencyIcon?/*#__PURE__*/React.createElement(Icon,{icon:"transparency"}):LocaleUtils.tr("layertree.transparency"),/*#__PURE__*/React.createElement("input",{className:"layertree-item-transparency-slider",max:"255",min:"0",onChange:function onChange(ev){return _this.layerTransparencyChanged(layer,path,ev.target.value,!isEmpty(sublayer.sublayers)?"children":null)},step:"1",type:"range",value:255-LayerUtils.computeLayerOpacity(sublayer)}),reorderButtons,toggleGroupButton,infoButton,attrTableButton,layer.type==="vector"?/*#__PURE__*/React.createElement(Icon,{icon:"export",onClick:function onClick(){return _this.exportRedliningLayer(layer)}}):null)});_defineProperty(_this,"renderStyleMenu",function(styles,selectedStyles,onStyleChange){var marginRight=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;var checkedIcon=selectedStyles.length===1?"radio_checked":"radio_tristate";return/*#__PURE__*/React.createElement("div",{className:"layertree-item-stylemenu",style:{marginRight:marginRight*1.75+"em"}},Object.entries(styles).map(function(_ref){var _ref2=_slicedToArray(_ref,2),name=_ref2[0],title=_ref2[1];return/*#__PURE__*/React.createElement("div",{key:name,onClick:function onClick(){return onStyleChange(name)}},/*#__PURE__*/React.createElement(Icon,{icon:selectedStyles.includes(name)?checkedIcon:"radio_unchecked"}),/*#__PURE__*/React.createElement("div",null,title))}))});_defineProperty(_this,"preventLayerTreeItemDrag",function(ev){var draggableEl=ev.currentTarget.parentNode;if(draggableEl.draggable){draggableEl.draggable=false;document.addEventListener("pointerup",function(){draggableEl.draggable=true},{once:true})}});_defineProperty(_this,"renderLayerTree",function(layers){var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var haveGroups=!flattenGroups&&layers.find(function(layer){if(layer.role===LayerRole.THEME&&!_this.props.showRootEntry){return(layer.sublayers||[]).find(function(sublayer){return!isEmpty(sublayer.sublayers)})}else{return!isEmpty(layer.sublayers)}});return layers.map(function(layer){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){return _this.renderLayerGroup(layer,layer,[],layer.visibility,false,usedGroupIds)}else{return layer.sublayers.map(function(sublayer,idx){var subpath=[idx];if(sublayer.sublayers){return _this.renderLayerGroup(layer,sublayer,subpath,layer.visibility,false,usedGroupIds)}else{return _this.renderLayer(layer,sublayer,subpath,layer.visibility,false,!haveGroups)}})}})});_defineProperty(_this,"renderBody",function(){var maptipcheckboxstate=_this.props.mapTipsEnabled===true?"checked":"unchecked";var maptipCheckbox=null;var maptipsEnabled=false;if(_this.props.theme.mapTips!==undefined){maptipsEnabled=_this.props.theme.mapTips!==null&&_this.props.allowMapTips}else{maptipsEnabled=_this.props.allowMapTips}if(!ConfigUtils.isMobile()&&maptipsEnabled){maptipCheckbox=/*#__PURE__*/React.createElement("div",{className:"layertree-option"},/*#__PURE__*/React.createElement(Icon,{icon:maptipcheckboxstate,onClick:_this.toggleMapTips}),/*#__PURE__*/React.createElement("span",{onClick:_this.toggleMapTips},LocaleUtils.tr("layertree.maptip")))}var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true&&!_this.state.filterinvisiblelayers;var haveMapCompare=ConfigUtils.havePlugin("MapCompare");var compareCheckbox=null;if(haveMapCompare&&_this.props.allowCompare&&allowReordering){var swipecheckboxstate=_this.props.swipe||_this.props.swipe===0?"checked":"unchecked";compareCheckbox=/*#__PURE__*/React.createElement("div",{className:"layertree-option"},/*#__PURE__*/React.createElement(Icon,{icon:swipecheckboxstate,onClick:_this.toggleSwipe}),/*#__PURE__*/React.createElement("span",{onClick:_this.toggleSwipe},LocaleUtils.tr("layertree.compare")))}var layerImportExpander=null;if(_this.props.allowImport){layerImportExpander=/*#__PURE__*/React.createElement("div",{className:"layertree-option",onClick:_this.toggleImportLayers},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.importvisible?"collapse":"expand"})," ",LocaleUtils.tr("layertree.importlayer"))}var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var sortable=allowReordering&&(ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering",_this.props.theme)===true||flattenGroups===true);var treelayers=_this.props.layers.filter(function(layer){return layer.role!==LayerRole.BACKGROUND&&!layer.layertreehidden});return/*#__PURE__*/React.createElement("div",{className:"layertree-container",role:"body"},/*#__PURE__*/React.createElement("div",{className:"layertree-tree",onContextMenuCapture:function onContextMenuCapture(ev){// Prevent context menu on drag-sort
-ev.stopPropagation();ev.preventDefault();return false},onTouchEnd:function onTouchEnd(ev){var target=ev.currentTarget;clearTimeout(target.preventScrollTimeout);target.preventScrollTimeout=null;target.removeEventListener("touchmove",MiscUtils.killEvent)},onTouchStart:function onTouchStart(ev){// Prevent touch-scroll after sortable trigger delay
-var target=ev.currentTarget;target.preventScrollTimeout=setTimeout(function(){target.addEventListener("touchmove",MiscUtils.killEvent,{passive:false})},200)},ref:MiscUtils.setupKillTouchEvents},/*#__PURE__*/React.createElement(Sortable,{onChange:_this.onSortChange,options:{disabled:sortable===false,ghostClass:"drop-ghost",delay:200,forceFallback:_this.props.fallbackDrag}},_this.renderLayerTree(treelayers))),maptipCheckbox,compareCheckbox,layerImportExpander,_this.state.importvisible?/*#__PURE__*/React.createElement(ImportLayer,{theme:_this.props.theme}):null)});_defineProperty(_this,"renderVisibilityButton",function(){if(!_this.props.showToggleAllLayersCheckbox&&!_this.props.enableVisibleFilter&&isEmpty(_this.props.theme.visibilityPresets)){return null}var vis=0;var count=0;var _iterator=_createForOfIteratorHelper(_this.props.layers),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var layer=_step.value;if(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER){count+=1;vis+=layer.visibility}}}catch(err){_iterator.e(err)}finally{_iterator.f()}vis/=Math.min(1,count);var buttonClasses=classnames({"layertree-visibility-button":true,"layertree-visibility-button-active":_this.state.visibilityMenu});var style={};if(_this.props.side==="left"){style.left=0}else{style.right=0}return/*#__PURE__*/React.createElement("span",{className:buttonClasses,onClick:function onClick(){return _this.setState(function(state){return{visibilityMenu:!state.visibilityMenu}})}},/*#__PURE__*/React.createElement(Icon,{icon:"eye"}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down"}),_this.state.visibilityMenu?/*#__PURE__*/React.createElement("div",{className:"layertree-visibility-menu",style:style},_this.props.showToggleAllLayersCheckbox?/*#__PURE__*/React.createElement("div",{onClick:function onClick(){return _this.toggleLayerTreeVisibility(vis===0)}},/*#__PURE__*/React.createElement(Icon,{icon:vis===0?"checked":"unchecked"})," ",LocaleUtils.tr("layertree.hidealllayers")):null,_this.props.enableVisibleFilter?/*#__PURE__*/React.createElement("div",{onClick:function onClick(){return _this.setState(function(state){return{filterinvisiblelayers:!state.filterinvisiblelayers}})}},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.filterinvisiblelayers?"checked":"unchecked"})," ",LocaleUtils.tr("layertree.visiblefilter")):null,Object.entries(_this.props.theme.visibilityPresets||{}).map(function(_ref3,idx){var _ref4=_slicedToArray(_ref3,2),name=_ref4[0],preset=_ref4[1];return/*#__PURE__*/React.createElement("div",{className:idx===0?"layertree-visibility-menu-sep":"",key:name,onClick:function onClick(){return _this.props.setThemeLayersVisibilityPreset(preset)}},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.activePreset===name?"radio_checked":"radio_unchecked"})," ",name)})):null)});_defineProperty(_this,"renderLegendPrintWindow",function(){if(!_this.state.legendPrintVisible){return null}var setLegendPrintContents=function setLegendPrintContents(el){if(!el){return}el.addEventListener("load",function(){var container=el.contentWindow.document.getElementById("legendcontainer");if(container){var body="<p id=\"legendcontainerbody\">";body+=_this.props.layers.map(function(layer){if(!layer.visibility){return""}else if(layer.legendUrl){return _this.printLayerLegend(layer,layer)}else if(layer.color){return"<div class=\"legend-entry\"><span style=\"display: inline-block; width: 1em; height: 1em; box-shadow: inset 0 0 0 1000px "+layer.color+"; margin: 0.25em; border: 1px solid black;\">&nbsp;</span>"+(layer.title||layer.name)+"</div>"}else{return""}}).join("");body+="</p>";container.innerHTML=body}else{_this.legendPrintWindow.document.body.innerHTML="Broken template. An element with id=legendcontainer must exist."}})};var printLegend=function printLegend(ev){ev.target.parentElement.parentElement.getElementsByTagName("iframe")[0].contentWindow.print()};return/*#__PURE__*/React.createElement(ResizeableWindow,{icon:"print",initialHeight:0.75*window.innerHeight,initialWidth:0.5*window.innerWidth,onClose:function onClose(){return _this.setState({legendPrintVisible:false})},title:LocaleUtils.tr("layertree.printlegend")},/*#__PURE__*/React.createElement("div",{className:"layertree-legend-print-body",role:"body"},/*#__PURE__*/React.createElement("iframe",{ref:setLegendPrintContents,src:MiscUtils.resolveAssetsPath(_this.props.templatePath)}),/*#__PURE__*/React.createElement("div",{className:"layertree-legend-print-body-buttonbar"},/*#__PURE__*/React.createElement("button",{onClick:printLegend},LocaleUtils.tr("layertree.printlegend")))))});_defineProperty(_this,"legendTooltipLoaded",function(ev){if(ev.target.naturalWidth>1){ev.target.style.visibility="visible"}});_defineProperty(_this,"onSortChange",function(order,sortable,ev){var moved=JSON.parse(order[ev.newIndex]);var layer=_this.props.layers.find(function(l){return l.id===moved.layer});if(layer){_this.props.reorderLayer(layer,moved.path,ev.newIndex-ev.oldIndex)}});_defineProperty(_this,"toggleImportLayers",function(){_this.setState(function(state){var visible=!state.importvisible;return{importvisible:visible,sidebarwidth:visible?"40em":null}})});_defineProperty(_this,"propagateOptions",function(layer,options){var path=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;if(layer.sublayers){layer.sublayers=layer.sublayers.map(function(sublayer,idx){if(path===null||!isEmpty(path)&&path[0]===idx){var newsublayer=_objectSpread(_objectSpread({},sublayer),options);_this.propagateOptions(newsublayer,options,path?path.slice(1):null);return newsublayer}else{return sublayer}})}});_defineProperty(_this,"groupExpandedToggled",function(layer,grouppath,oldexpanded){_this.props.changeLayerProperty(layer.id,"expanded",!oldexpanded,grouppath)});_defineProperty(_this,"itemVisibilityToggled",function(layer,grouppath,oldvisibility){var recurseDirection=null;// If item becomes visible, also make parents visible
-if(_this.props.groupTogglesSublayers){recurseDirection=!oldvisibility?"both":"children"}else{recurseDirection=!oldvisibility?"parents":null}_this.props.changeLayerProperty(layer.id,"visibility",!oldvisibility,grouppath,recurseDirection)});_defineProperty(_this,"itemOmitQueryableToggled",function(layer,grouppath,oldomitqueryable){_this.props.changeLayerProperty(layer.id,"omitFromQueryLayers",!oldomitqueryable,grouppath,"children")});_defineProperty(_this,"layerTransparencyChanged",function(layer,sublayerpath,value){var recurse=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;_this.props.changeLayerProperty(layer.id,"opacity",Math.max(1,255-value),sublayerpath,recurse)});_defineProperty(_this,"layerStyleChanged",function(layer,sublayerpath,value){var recurseDirection=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;_this.props.changeLayerProperty(layer.id,"style",value,sublayerpath,recurseDirection)});_defineProperty(_this,"layerMenuToggled",function(sublayerid){_this.setState(function(state){return{activemenu:state.activemenu===sublayerid?null:sublayerid,activestylemenu:null}})});_defineProperty(_this,"layerStyleMenuToggled",function(sublayerid){_this.setState(function(state){return{activestylemenu:state.activestylemenu===sublayerid?null:sublayerid,activemenu:null}})});_defineProperty(_this,"showLegendTooltip",function(ev,request){_this.setState({legendTooltip:{x:ev.target.getBoundingClientRect().right,y:ev.target.getBoundingClientRect().top,img:request+"&TYPE=tooltip"}})});_defineProperty(_this,"onHide",function(){_this.setState({legendTooltip:undefined,visibilityMenu:false})});_defineProperty(_this,"hideLegendTooltip",function(){_this.setState({legendTooltip:undefined})});_defineProperty(_this,"toggleMapTips",function(){_this.props.toggleMapTips(!_this.props.mapTipsEnabled)});_defineProperty(_this,"toggleSwipe",function(){_this.props.setSwipe(_this.props.swipe!==null?null:50)});_defineProperty(_this,"printLayerLegend",function(layer,sublayer){var body="";if(sublayer.sublayers){if(sublayer.visibility){body="<div class=\"legend-group\">"+"<h3 class=\"legend-group-title\">"+(sublayer.title||sublayer.name)+"</h3>"+"<div class=\"legend-group-body\">"+sublayer.sublayers.map(function(subsublayer){return _this.printLayerLegend(layer,subsublayer)}).join("\n")+"</div>"+"</div>"}}else{if(sublayer.visibility&&LayerUtils.layerScaleInRange(sublayer,_this.props.mapScale)){var request=LayerUtils.getLegendUrl(layer,{name:sublayer.name},_this.props.mapScale,_this.props.map,_this.props.bboxDependentLegend,_this.props.scaleDependentLegend,_this.props.extraLegendParameters);body=request?"<div class=\"legend-entry\"><img src=\""+request+"\" style=\"max-width: 100%\"/></div>":""}}return body});_defineProperty(_this,"deleteAllLayers",function(){var _iterator2=_createForOfIteratorHelper(_this.props.layers),_step2;try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var layer=_step2.value;if(layer.role===LayerRole.THEME){var sublayers=layer.sublayers||[];for(var i=sublayers.length-1;i>=0;--i){_this.props.removeLayer(layer.id,[i])}}else if(layer.role===LayerRole.USERLAYER){_this.props.removeLayer(layer.id)}}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}});_defineProperty(_this,"toggleLayerTreeVisibility",function(visibile){var _iterator3=_createForOfIteratorHelper(_this.props.layers),_step3;try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var layer=_step3.value;if(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER){_this.props.changeLayerProperty(layer.id,"visibility",visibile,[],null)}}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}});_defineProperty(_this,"exportRedliningLayer",function(layer){var data=JSON.stringify({type:"FeatureCollection",features:layer.features.map(function(feature){var newFeature=_objectSpread(_objectSpread({},feature),{},{geometry:VectorLayerUtils.reprojectGeometry(feature.geometry,feature.crs||_this.props.map.projection,"EPSG:4326")});delete newFeature.crs;return newFeature})},null," ");FileSaver.saveAs(new Blob([data],{type:"text/plain;charset=utf-8"}),layer.title+".json")});_defineProperty(_this,"getSelectedStyles",function(layer){var _layer$params;return _toConsumableArray(new Set((((_layer$params=layer.params)===null||_layer$params===void 0?void 0:_layer$params.STYLES)||"").split(",").filter(Boolean)))});_defineProperty(_this,"getLayerStyles",function(layer){var _layer$sublayers;return layer===null||layer===void 0||(_layer$sublayers=layer.sublayers)===null||_layer$sublayers===void 0?void 0:_layer$sublayers.reduce(function(styleList,sublayer){Object.assign(styleList,_this.getLayerStyles(sublayer.sublayers));return Object.assign(styleList,sublayer.styles)},{})});_defineProperty(_this,"applyLayerStyle",function(style,layer){var path=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];var layerId=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;layerId=layerId!==null&&layerId!==void 0?layerId:layer.id;(layer.sublayers||[]).forEach(function(sublayer,idx){_this.applyLayerStyle(style,sublayer,[].concat(_toConsumableArray(path),[idx]),layerId);if(style in(sublayer.styles||{})){_this.props.changeLayerProperty(layerId,"style",style,[].concat(_toConsumableArray(path),[idx]))}})});_this.legendPrintWindow=null;window.addEventListener("beforeunload",function(){if(_this.legendPrintWindow&&!_this.legendPrintWindow.closed){_this.legendPrintWindow.close()}});return _this}_inherits(LayerTree,_React$Component);return _createClass(LayerTree,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.theme.mapTips!==undefined&&this.props.theme.mapTips!==prevProps.theme.mapTips){this.props.toggleMapTips(this.props.theme.mapTips&&!ConfigUtils.isMobile())}if(this.props.layers!==prevProps.layers){this.setState({activePreset:LayerUtils.getActiveVisibilityPreset(this.props.layers,this.props.theme.visibilityPresets)})}}},{key:"render",value:function render(){var _this2=this;var legendTooltip=null;if(this.state.legendTooltip){var style={left:this.state.legendTooltip.x,top:this.state.legendTooltip.y,maxWidth:window.innerWidth-this.state.legendTooltip.x-2,maxHeight:window.innerHeight-this.state.legendTooltip.y-2,visibility:"hidden"};legendTooltip=/*#__PURE__*/React.createElement(Image,{className:"layertree-item-legend-tooltip",onLoad:this.legendTooltipLoaded,onTouchStart:this.hideLegendTooltip,src:this.state.legendTooltip.img,style:style})}var legendPrintIcon=null;if(this.props.enableLegendPrint){legendPrintIcon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-print-legend",icon:"print",onClick:function onClick(){return _this2.setState({legendPrintVisible:true})},title:LocaleUtils.tr("layertree.printlegend")})}var deleteAllLayersIcon=null;if(ConfigUtils.getConfigProp("allowRemovingThemeLayers")===true){var deleteAllLayersTooltip=LocaleUtils.tr("layertree.deletealllayers");deleteAllLayersIcon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-delete-legend",icon:"trash",onClick:this.deleteAllLayers,title:deleteAllLayersTooltip})}var serviceInfoIcon=null;if(this.props.enableServiceInfo){var serviceInfoTooltip=LocaleUtils.tr("serviceinfo.title");serviceInfoIcon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-theme-metadata",icon:"info-sign",onClick:function onClick(){return _this2.props.setActiveServiceInfo(_this2.props.theme)},title:serviceInfoTooltip})}var extraTitlebarContent=/*#__PURE__*/React.createElement("span",null,this.renderVisibilityButton(),legendPrintIcon,deleteAllLayersIcon,serviceInfoIcon);return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(SideBar,{extraTitlebarContent:extraTitlebarContent,icon:"layers",id:"LayerTree",onHide:this.onHide,side:this.props.side,title:LocaleUtils.tr("appmenu.items.LayerTree"),width:this.state.sidebarwidth||this.props.width},function(){return{body:_this2.renderBody()}}),legendTooltip,this.renderLegendPrintWindow(),/*#__PURE__*/React.createElement(LayerInfoWindow,{bboxDependentLegend:this.props.bboxDependentLegend,layerInfoGeometry:this.props.layerInfoGeometry,scaleDependentLegend:this.props.scaleDependentLegend}),/*#__PURE__*/React.createElement(ServiceInfoWindow,{layerInfoGeometry:this.props.layerInfoGeometry}))}}])}(React.Component);_defineProperty(LayerTree,"propTypes",{/** Whether to allow adding separator entries in the layer tree, useful for organizing the tree. */addLayerSeparator:PropTypes.func,/** Whether to enable the compare function. Requires the `MapCompare` plugin. */allowCompare:PropTypes.bool,/** Whether to allow importing external layers. */allowImport:PropTypes.bool,/** Whether to allow enabling map tips. */allowMapTips:PropTypes.bool,/** Whether to allow selection of identifyable layers. The `showQueryableIcon` property should be `true` to be able to select identifyable layers. */allowSelectIdentifyableLayers:PropTypes.bool,/** Whether to display a BBOX dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */bboxDependentLegend:PropTypes.oneOfType([PropTypes.bool,PropTypes.string]),changeLayerProperty:PropTypes.func,/** Whether to enable the legend print functionality. */enableLegendPrint:PropTypes.bool,/** Whether to display a service info button to display the WMS service metadata. */enableServiceInfo:PropTypes.bool,/** Whether to display a button to filter invisible layers from the layertree. */enableVisibleFilter:PropTypes.bool,/** Additional parameters to pass to the GetLegendGraphics request. */extraLegendParameters:PropTypes.string,/** Whether to use the fallback logic for drag-and-drop. */fallbackDrag:PropTypes.bool,filter:PropTypes.object,/** Whether to display a flat layer tree, omitting any groups. */flattenGroups:PropTypes.bool,/** Whether to display unchecked layers gray in the layertree. */grayUnchecked:PropTypes.bool,/** Whether toggling a group also toggles all sublayers. */groupTogglesSublayers:PropTypes.bool,/** Whether to display the layer info button inside the layer settings menu rather than next to the layer title. */infoInSettings:PropTypes.bool,/** Default layer info window geometry with size, position and docking status. */layerInfoGeometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool}),layers:PropTypes.array,loadingLayers:PropTypes.array,map:PropTypes.object,mapScale:PropTypes.number,mapTipsEnabled:PropTypes.bool,mobile:PropTypes.bool,/** Whether to only display layer groups but not individual layers in layertree. */onlyGroups:PropTypes.bool,removeLayer:PropTypes.func,reorderLayer:PropTypes.func,/** Whether to display a scale dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */scaleDependentLegend:PropTypes.oneOfType([PropTypes.bool,PropTypes.string]),setActiveLayerInfo:PropTypes.func,setActiveServiceInfo:PropTypes.func,setCurrentTask:PropTypes.func,setSwipe:PropTypes.func,setThemeLayersVisibilityPreset:PropTypes.func,/** Whether to display an icon linking to the layer attribute table in the layer options menu.  */showAttributeTableLink:PropTypes.bool,/** Whether to display legend icons. */showLegendIcons:PropTypes.bool,/** Whether to display the queryable icon to indicate that a layer is identifyable. */showQueryableIcon:PropTypes.bool,/** Whether to display the root entry of the layertree. */showRootEntry:PropTypes.bool,/** Whether to display a checkbox to toggle all layers. */showToggleAllLayersCheckbox:PropTypes.bool,/** The side of the application on which to display the sidebar. */side:PropTypes.string,swipe:PropTypes.number,/** Template location for the legend print functionality */templatePath:PropTypes.string,theme:PropTypes.object,toggleMapTips:PropTypes.func,transparencyIcon:PropTypes.bool,/** The initial width of the layertree, as a CSS width string. */width:PropTypes.string,zoomToExtent:PropTypes.func});_defineProperty(LayerTree,"defaultProps",{layers:[],showLegendIcons:true,showRootEntry:true,showQueryableIcon:true,allowMapTips:true,allowCompare:true,allowImport:true,allowSelectIdentifyableLayers:false,groupTogglesSublayers:false,grayUnchecked:true,layerInfoGeometry:{initialWidth:480,initialHeight:480,initialX:null,initialY:null,initiallyDocked:false},bboxDependentLegend:false,flattenGroups:false,onlyGroups:false,width:"25em",enableLegendPrint:true,enableVisibleFilter:true,enableServiceInfo:true,infoInSettings:true,showToggleAllLayersCheckbox:true,transparencyIcon:true,side:"right",templatePath:":/templates/legendprint.html"});var selector=function selector(state){return{layers:state.layers.flat,filter:state.layers.filter,loadingLayers:state.layers.loading,map:state.map,mapScale:MapUtils.computeForZoom(state.map.scales,state.map.zoom),swipe:state.layers.swipe,theme:state.theme.current||{},mapTipsEnabled:state.map.maptips}};export default connect(selector,{addLayerSeparator:addLayerSeparator,changeLayerProperty:changeLayerProperty,removeLayer:removeLayer,reorderLayer:reorderLayer,toggleMapTips:toggleMapTips,setSwipe:setSwipe,setActiveLayerInfo:setActiveLayerInfo,setActiveServiceInfo:setActiveServiceInfo,setCurrentTask:setCurrentTask,setThemeLayersVisibilityPreset:setThemeLayersVisibilityPreset,zoomToExtent:zoomToExtent})(LayerTree);
+ */
+var LayerTree = /*#__PURE__*/function (_React$Component) {
+  function LayerTree(props) {
+    var _this;
+    _classCallCheck(this, LayerTree);
+    _this = _callSuper(this, LayerTree, [props]);
+    _defineProperty(_this, "state", {
+      activemenu: null,
+      activestylemenu: null,
+      legendTooltip: null,
+      sidebarwidth: null,
+      importvisible: false,
+      filterinvisiblelayers: false,
+      legendPrintVisible: false,
+      visibilityMenu: false,
+      activePreset: null
+    });
+    _defineProperty(_this, "renderSubLayers", function (layer, group, path, enabled, inMutuallyExclusiveGroup, usedGroupIds) {
+      return (group.sublayers || []).map(function (sublayer, idx) {
+        var subpath = [].concat(_toConsumableArray(path), [idx]);
+        if (sublayer.sublayers) {
+          return _this.renderLayerGroup(layer, sublayer, subpath, enabled, inMutuallyExclusiveGroup, usedGroupIds);
+        } else {
+          return _this.renderLayer(layer, sublayer, subpath, enabled, inMutuallyExclusiveGroup);
+        }
+      });
+    });
+    _defineProperty(_this, "renderLayerGroup", function (layer, group, path, enabled, inMutuallyExclusiveGroup, usedGroupIds) {
+      var flattenGroups = ConfigUtils.getConfigProp("flattenLayerTreeGroups", _this.props.theme) || _this.props.flattenGroups;
+      if (flattenGroups) {
+        return _this.renderSubLayers(layer, group, path, enabled, false, usedGroupIds);
+      }
+      var subtreevisibility = LayerUtils.computeLayerVisibility(group);
+      if (subtreevisibility === 0 && _this.state.filterinvisiblelayers) {
+        return null;
+      }
+      var groupId = layer.id + ":" + group.name;
+      for (var i = 0; usedGroupIds.has(groupId); ++i) {
+        groupId = layer.id + ":" + group.name + ":" + i;
+      }
+      usedGroupIds.add(groupId);
+      var visibility = true;
+      var checkboxstate = "";
+      if (_this.props.groupTogglesSublayers && !inMutuallyExclusiveGroup) {
+        visibility = subtreevisibility > 0;
+        if (subtreevisibility === 1) {
+          checkboxstate = "checked";
+        } else if (subtreevisibility === 0) {
+          checkboxstate = "unchecked";
+        } else {
+          checkboxstate = "tristate";
+        }
+      } else {
+        visibility = group.visibility === undefined ? subtreevisibility > 0 : group.visibility;
+        if (visibility) {
+          checkboxstate = subtreevisibility === 1 ? 'checked' : 'tristate';
+        } else {
+          checkboxstate = 'unchecked';
+        }
+      }
+      var omitqueryable;
+      var identifyableClassName = "";
+      var subtreequeryable = LayerUtils.computeLayerQueryable(group);
+      if (subtreequeryable === 1) {
+        identifyableClassName = "layertree-item-identifyable-checked";
+        omitqueryable = false;
+      } else if (subtreequeryable === 0) {
+        identifyableClassName = "layertree-item-identifyable-unchecked";
+        omitqueryable = true;
+      } else {
+        identifyableClassName = "layertree-item-identifyable-tristate";
+        omitqueryable = true;
+      }
+      if (inMutuallyExclusiveGroup) {
+        checkboxstate = 'radio_' + checkboxstate;
+      }
+      var expanderstate = group.expanded ? 'tree_minus' : 'tree_plus';
+      var showExpander = (!_this.props.onlyGroups || (group.sublayers || []).some(function (sublayer) {
+        return sublayer.sublayers;
+      })) && group.sublayers.some(function (sublayer) {
+        var _layer$layerTreeHidde;
+        return !((_layer$layerTreeHidde = layer.layerTreeHiddenSublayers) !== null && _layer$layerTreeHidde !== void 0 ? _layer$layerTreeHidde : []).includes(sublayer.name);
+      });
+      var itemclasses = {
+        "layertree-item": true,
+        "layertree-item-disabled": !_this.props.groupTogglesSublayers && !enabled || _this.props.grayUnchecked && !visibility
+      };
+      var sublayersContent = null;
+      if (group.expanded) {
+        sublayersContent = _this.renderSubLayers(layer, group, path, enabled && visibility, group.mutuallyExclusive === true, usedGroupIds);
+      }
+      var optMenuClasses = classnames({
+        "layertree-item-menubutton": true,
+        "layertree-item-menubutton-active": _this.state.activemenu === groupId
+      });
+      var styleMenuClasses = classnames({
+        "layertree-item-menubutton": true,
+        "layertree-item-menubutton-active": _this.state.activestylemenu === groupId
+      });
+      var allowRemove = ConfigUtils.getConfigProp("allowRemovingThemeLayers", _this.props.theme) === true || layer.role !== LayerRole.THEME;
+      var allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", _this.props.theme) === true && !_this.state.filterinvisiblelayers;
+      var sortable = allowReordering && ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering", _this.props.theme) === true;
+      var styles = layer.type === "wms" && path.length === 0 ? _this.getLayerStyles(layer) : null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "layertree-item-container",
+        "data-id": JSON.stringify({
+          layer: layer.id,
+          path: path
+        }),
+        key: groupId
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames(itemclasses)
+      }, showExpander ? /*#__PURE__*/React.createElement(Icon, {
+        className: "layertree-item-expander",
+        icon: expanderstate,
+        onClick: function onClick() {
+          return _this.groupExpandedToggled(layer, path, group.expanded);
+        }
+      }) : /*#__PURE__*/React.createElement("span", {
+        className: "layertree-item-expander"
+      }), /*#__PURE__*/React.createElement(Icon, {
+        className: "layertree-item-checkbox",
+        icon: checkboxstate,
+        onClick: function onClick() {
+          return _this.itemVisibilityToggled(layer, path, visibility);
+        }
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "layertree-item-title",
+        onClick: function onClick() {
+          return _this.itemVisibilityToggled(layer, path, visibility);
+        },
+        title: group.title
+      }, group.title), LayerUtils.hasQueryableSublayers(group) && _this.props.allowSelectIdentifyableLayers ? /*#__PURE__*/React.createElement(Icon, {
+        className: "layertree-item-identifyable " + identifyableClassName,
+        icon: "info-sign",
+        onClick: function onClick() {
+          return _this.itemOmitQueryableToggled(layer, path, omitqueryable);
+        }
+      }) : null, /*#__PURE__*/React.createElement("span", {
+        className: "layertree-item-spacer"
+      }), Object.keys(styles || {}).length > 1 ? /*#__PURE__*/React.createElement(Icon, {
+        className: styleMenuClasses,
+        icon: "paint",
+        onClick: function onClick() {
+          return _this.layerStyleMenuToggled(groupId);
+        }
+      }) : null, /*#__PURE__*/React.createElement(Icon, {
+        className: optMenuClasses,
+        icon: "cog",
+        onClick: function onClick() {
+          return _this.layerMenuToggled(groupId);
+        }
+      }), allowRemove ? /*#__PURE__*/React.createElement(Icon, {
+        className: "layertree-item-remove",
+        icon: "trash",
+        onClick: function onClick() {
+          return _this.props.removeLayer(layer.id, path);
+        }
+      }) : null), _this.state.activemenu === groupId ? _this.renderOptionsMenu(layer, group, path, allowRemove, subtreevisibility) : null, _this.state.activestylemenu === groupId ? _this.renderStyleMenu(styles, _this.getSelectedStyles(layer), function (style) {
+        return _this.applyLayerStyle(style, layer);
+      }) : null, /*#__PURE__*/React.createElement(Sortable, {
+        onChange: _this.onSortChange,
+        options: {
+          disabled: sortable === false,
+          ghostClass: 'drop-ghost',
+          delay: 200,
+          forceFallback: _this.props.fallbackDrag
+        }
+      }, sublayersContent));
+    });
+    _defineProperty(_this, "renderLayer", function (layer, sublayer, path) {
+      var _layer$layerTreeHidde2;
+      var enabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+      var inMutuallyExclusiveGroup = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      var skipExpanderPlaceholder = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+      if (_this.props.onlyGroups) {
+        return null;
+      }
+      if (_this.state.filterinvisiblelayers && !sublayer.visibility) {
+        return null;
+      }
+      if (((_layer$layerTreeHidde2 = layer.layerTreeHiddenSublayers) !== null && _layer$layerTreeHidde2 !== void 0 ? _layer$layerTreeHidde2 : []).includes(sublayer.name)) {
+        return null;
+      }
+      var sublayerId = layer.id + ":" + sublayer.name;
+      var allowRemove = ConfigUtils.getConfigProp("allowRemovingThemeLayers", _this.props.theme) === true || layer.role !== LayerRole.THEME;
+      var allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", _this.props.theme) === true;
+      var checkboxstate = sublayer.visibility === true ? 'checked' : 'unchecked';
+      if (inMutuallyExclusiveGroup) {
+        checkboxstate = 'radio_' + checkboxstate;
+      }
+      var optMenuClasses = classnames({
+        "layertree-item-menubutton": true,
+        "layertree-item-menubutton-active": _this.state.activemenu === sublayerId
+      });
+      var styleMenuClasses = classnames({
+        "layertree-item-menubutton": true,
+        "layertree-item-menubutton-active": _this.state.activestylemenu === sublayerId
+      });
+      var itemclasses = {
+        "layertree-item": true,
+        "layertree-item-disabled": layer.type !== "separator" && (!_this.props.groupTogglesSublayers && !enabled || _this.props.grayUnchecked && !sublayer.visibility),
+        "layertree-item-separator": layer.type === "separator",
+        "layertree-item-outsidescalerange": sublayer.minScale !== undefined && _this.props.mapScale < sublayer.minScale || sublayer.maxScale !== undefined && _this.props.mapScale > sublayer.maxScale
+      };
+      var infoButton = null;
+      if (layer.type === "wms" || layer.type === "wfs" || layer.type === "wmts") {
+        infoButton = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-metadata",
+          icon: "info-sign",
+          onClick: function onClick() {
+            return _this.props.setActiveLayerInfo(layer, sublayer);
+          }
+        });
+      }
+      var legendicon = null;
+      if (_this.props.showLegendIcons) {
+        var legendUrl = LayerUtils.getLegendUrl(layer, sublayer, _this.props.mapScale, _this.props.map, _this.props.bboxDependentLegend, _this.props.scaleDependentLegend, _this.props.extraLegendParameters);
+        if (legendUrl) {
+          legendicon = /*#__PURE__*/React.createElement(Image, {
+            className: "layertree-item-legend-thumbnail",
+            onMouseOut: _this.hideLegendTooltip,
+            onMouseOver: function onMouseOver(ev) {
+              return _this.showLegendTooltip(ev, legendUrl);
+            },
+            onTouchStart: function onTouchStart(ev) {
+              return _this.showLegendTooltip(ev, legendUrl);
+            },
+            src: legendUrl + "&TYPE=thumbnail"
+          });
+        } else if (layer.color) {
+          legendicon = /*#__PURE__*/React.createElement("span", {
+            className: "layertree-item-legend-coloricon",
+            style: {
+              backgroundColor: layer.color
+            }
+          });
+        }
+      }
+      var checkbox = null;
+      if (layer.type === "placeholder") {
+        checkbox = /*#__PURE__*/React.createElement(Spinner, null);
+      } else if (layer.type === "separator") {
+        checkbox = null;
+      } else {
+        checkbox = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-checkbox",
+          icon: checkboxstate,
+          onClick: function onClick() {
+            return _this.itemVisibilityToggled(layer, path, sublayer.visibility);
+          }
+        });
+      }
+      var title = null;
+      if (layer.type === "separator") {
+        title = /*#__PURE__*/React.createElement("input", {
+          onChange: function onChange(ev) {
+            return _this.props.changeLayerProperty(layer.id, "title", ev.target.value);
+          },
+          value: sublayer.title
+        });
+      } else {
+        title = /*#__PURE__*/React.createElement("span", {
+          className: "layertree-item-title",
+          onClick: function onClick() {
+            return _this.itemVisibilityToggled(layer, path, sublayer.visibility);
+          },
+          title: sublayer.title
+        }, sublayer.title);
+      }
+      var queryableicon = null;
+      if (_this.props.allowSelectIdentifyableLayers) {
+        var identifyableClassName = !sublayer.omitFromQueryLayers ? "layertree-item-identifyable-checked" : "layertree-item-identifyable-unchecked";
+        queryableicon = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-identifyable " + identifyableClassName,
+          icon: "info-sign",
+          onClick: function onClick() {
+            return _this.itemOmitQueryableToggled(layer, path, sublayer.omitFromQueryLayers);
+          }
+        });
+      } else {
+        queryableicon = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-queryable",
+          icon: "info-sign"
+        });
+      }
+      var allowOptions = layer.type !== "placeholder" && layer.type !== "separator";
+      var flattenGroups = ConfigUtils.getConfigProp("flattenLayerTreeGroups", _this.props.theme) || _this.props.flattenGroups;
+      var allowSeparators = flattenGroups && allowReordering && ConfigUtils.getConfigProp("allowLayerTreeSeparators", _this.props.theme);
+      var separatorTitle = LocaleUtils.tr("layertree.separator");
+      var separatorTooltip = LocaleUtils.tr("layertree.separatortooltip");
+      return /*#__PURE__*/React.createElement("div", {
+        className: "layertree-item-container",
+        "data-id": JSON.stringify({
+          layer: layer.id,
+          path: path
+        }),
+        key: sublayerId
+      }, allowSeparators ? /*#__PURE__*/React.createElement("div", {
+        className: "layertree-item-addsep",
+        onClick: function onClick() {
+          return _this.props.addLayerSeparator(separatorTitle, layer.id, path);
+        },
+        title: separatorTooltip
+      }) : null, /*#__PURE__*/React.createElement("div", {
+        className: classnames(itemclasses)
+      }, flattenGroups || skipExpanderPlaceholder ? null : /*#__PURE__*/React.createElement("span", {
+        className: "layertree-item-expander"
+      }), checkbox, legendicon, title, sublayer.queryable && _this.props.showQueryableIcon ? queryableicon : null, sublayer.name in (_this.props.filter.filterParams || {}) || _this.props.filter.filterGeom ? /*#__PURE__*/React.createElement(Icon, {
+        icon: "filter"
+      }) : null, _this.props.loadingLayers.includes(layer.id) ? /*#__PURE__*/React.createElement(Spinner, null) : null, /*#__PURE__*/React.createElement("span", {
+        className: "layertree-item-spacer"
+      }), allowOptions && !_this.props.infoInSettings ? infoButton : null, Object.keys(sublayer.styles || {}).length > 1 ? /*#__PURE__*/React.createElement(Icon, {
+        className: styleMenuClasses,
+        icon: "paint",
+        onClick: function onClick() {
+          return _this.layerStyleMenuToggled(sublayerId);
+        }
+      }) : null, allowOptions ? /*#__PURE__*/React.createElement(Icon, {
+        className: optMenuClasses,
+        icon: "cog",
+        onClick: function onClick() {
+          return _this.layerMenuToggled(sublayerId);
+        }
+      }) : null, allowRemove ? /*#__PURE__*/React.createElement(Icon, {
+        className: "layertree-item-remove",
+        icon: "trash",
+        onClick: function onClick() {
+          return _this.props.removeLayer(layer.id, path);
+        }
+      }) : null), _this.state.activemenu === sublayerId ? _this.renderOptionsMenu(layer, sublayer, path, allowRemove) : null, _this.state.activestylemenu === sublayerId ? _this.renderStyleMenu(sublayer.styles, [sublayer.style], function (style) {
+        return _this.layerStyleChanged(layer, path, style);
+      }) : null);
+    });
+    _defineProperty(_this, "renderOptionsMenu", function (layer, sublayer, path, marginRight) {
+      var subtreevisibility = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      var allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", _this.props.theme) === true;
+      var zoomToLayerButton = null;
+      if (sublayer.bbox && sublayer.bbox.bounds) {
+        var zoomToLayerTooltip = LocaleUtils.tr("layertree.zoomtolayer");
+        var crs = sublayer.bbox.crs || _this.props.map.projection;
+        zoomToLayerButton = /*#__PURE__*/React.createElement(Icon, {
+          icon: "zoom",
+          onClick: function onClick() {
+            return _this.props.zoomToExtent(sublayer.bbox.bounds, crs);
+          },
+          title: zoomToLayerTooltip
+        });
+      }
+      var reorderButtons = null;
+      if (allowReordering && !_this.state.filterinvisiblelayers) {
+        reorderButtons = [/*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-move",
+          icon: "arrow-down",
+          key: "layertree-item-move-down",
+          onClick: function onClick() {
+            return _this.props.reorderLayer(layer, path, +1);
+          }
+        }), /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-move",
+          icon: "arrow-up",
+          key: "layertree-item-move-up",
+          onClick: function onClick() {
+            return _this.props.reorderLayer(layer, path, -1);
+          }
+        })];
+      }
+      var toggleGroupButton = null;
+      if (sublayer.sublayers && !_this.props.groupTogglesSublayers) {
+        toggleGroupButton = /*#__PURE__*/React.createElement(Icon, {
+          icon: "tree",
+          onClick: function onClick() {
+            return _this.props.changeLayerProperty(layer.id, "visibility", subtreevisibility !== 1, path, "children");
+          }
+        });
+      }
+      var infoButton = null;
+      if (_this.props.infoInSettings && (layer.type === "wms" || layer.type === "wfs" || layer.type === "wmts")) {
+        infoButton = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-item-metadata",
+          icon: "info-sign",
+          onClick: function onClick() {
+            return _this.props.setActiveLayerInfo(layer, sublayer);
+          }
+        });
+      }
+      var attrTableButton = null;
+      if (_this.props.showAttributeTableLink && ConfigUtils.havePlugin("AttributeTable") && layer.role === LayerRole.THEME && _this.props.theme.editConfig[sublayer.name]) {
+        attrTableButton = /*#__PURE__*/React.createElement(Icon, {
+          icon: "editing",
+          onClick: function onClick() {
+            return _this.props.setCurrentTask("AttributeTable", null, null, {
+              layer: sublayer.name
+            });
+          }
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "layertree-item-optionsmenu",
+        onPointerDown: _this.preventLayerTreeItemDrag,
+        style: {
+          marginRight: marginRight * 1.75 + 'em'
+        }
+      }, zoomToLayerButton, _this.props.transparencyIcon ? /*#__PURE__*/React.createElement(Icon, {
+        icon: "transparency"
+      }) : LocaleUtils.tr("layertree.transparency"), /*#__PURE__*/React.createElement("input", {
+        className: "layertree-item-transparency-slider",
+        max: "255",
+        min: "0",
+        onChange: function onChange(ev) {
+          return _this.layerTransparencyChanged(layer, path, ev.target.value, !isEmpty(sublayer.sublayers) ? 'children' : null);
+        },
+        step: "1",
+        type: "range",
+        value: 255 - LayerUtils.computeLayerOpacity(sublayer)
+      }), reorderButtons, toggleGroupButton, infoButton, attrTableButton, layer.type === 'vector' ? /*#__PURE__*/React.createElement(Icon, {
+        icon: "export",
+        onClick: function onClick() {
+          return _this.exportRedliningLayer(layer);
+        }
+      }) : null);
+    });
+    _defineProperty(_this, "renderStyleMenu", function (styles, selectedStyles, onStyleChange) {
+      var marginRight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      var checkedIcon = selectedStyles.length === 1 ? "radio_checked" : "radio_tristate";
+      return /*#__PURE__*/React.createElement("div", {
+        className: "layertree-item-stylemenu",
+        style: {
+          marginRight: marginRight * 1.75 + 'em'
+        }
+      }, Object.entries(styles).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          name = _ref2[0],
+          title = _ref2[1];
+        return /*#__PURE__*/React.createElement("div", {
+          key: name,
+          onClick: function onClick() {
+            return onStyleChange(name);
+          }
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: selectedStyles.includes(name) ? checkedIcon : "radio_unchecked"
+        }), /*#__PURE__*/React.createElement("div", null, title));
+      }));
+    });
+    _defineProperty(_this, "preventLayerTreeItemDrag", function (ev) {
+      var draggableEl = ev.currentTarget.parentNode;
+      if (draggableEl.draggable) {
+        draggableEl.draggable = false;
+        document.addEventListener('pointerup', function () {
+          draggableEl.draggable = true;
+        }, {
+          once: true
+        });
+      }
+    });
+    _defineProperty(_this, "renderLayerTree", function (layers) {
+      var flattenGroups = ConfigUtils.getConfigProp("flattenLayerTreeGroups", _this.props.theme) || _this.props.flattenGroups;
+      var haveGroups = !flattenGroups && layers.find(function (layer) {
+        if (layer.role === LayerRole.THEME && !_this.props.showRootEntry) {
+          return (layer.sublayers || []).find(function (sublayer) {
+            return !isEmpty(sublayer.sublayers);
+          });
+        } else {
+          return !isEmpty(layer.sublayers);
+        }
+      });
+      return layers.map(function (layer) {
+        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) {
+          return _this.renderLayerGroup(layer, layer, [], layer.visibility, false, usedGroupIds);
+        } else {
+          return layer.sublayers.map(function (sublayer, idx) {
+            var subpath = [idx];
+            if (sublayer.sublayers) {
+              return _this.renderLayerGroup(layer, sublayer, subpath, layer.visibility, false, usedGroupIds);
+            } else {
+              return _this.renderLayer(layer, sublayer, subpath, layer.visibility, false, !haveGroups);
+            }
+          });
+        }
+      });
+    });
+    _defineProperty(_this, "renderBody", function () {
+      var maptipcheckboxstate = _this.props.mapTipsEnabled === true ? 'checked' : 'unchecked';
+      var maptipCheckbox = null;
+      var maptipsEnabled = false;
+      if (_this.props.theme.mapTips !== undefined) {
+        maptipsEnabled = _this.props.theme.mapTips !== null && _this.props.allowMapTips;
+      } else {
+        maptipsEnabled = _this.props.allowMapTips;
+      }
+      if (!ConfigUtils.isMobile() && maptipsEnabled) {
+        maptipCheckbox = /*#__PURE__*/React.createElement("div", {
+          className: "layertree-option"
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: maptipcheckboxstate,
+          onClick: _this.toggleMapTips
+        }), /*#__PURE__*/React.createElement("span", {
+          onClick: _this.toggleMapTips
+        }, LocaleUtils.tr("layertree.maptip")));
+      }
+      var allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", _this.props.theme) === true && !_this.state.filterinvisiblelayers;
+      var haveMapCompare = ConfigUtils.havePlugin("MapCompare");
+      var compareCheckbox = null;
+      if (haveMapCompare && _this.props.allowCompare && allowReordering) {
+        var swipecheckboxstate = _this.props.swipe || _this.props.swipe === 0 ? 'checked' : 'unchecked';
+        compareCheckbox = /*#__PURE__*/React.createElement("div", {
+          className: "layertree-option"
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: swipecheckboxstate,
+          onClick: _this.toggleSwipe
+        }), /*#__PURE__*/React.createElement("span", {
+          onClick: _this.toggleSwipe
+        }, LocaleUtils.tr("layertree.compare")));
+      }
+      var layerImportExpander = null;
+      if (_this.props.allowImport) {
+        layerImportExpander = /*#__PURE__*/React.createElement("div", {
+          className: "layertree-option",
+          onClick: _this.toggleImportLayers
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: _this.state.importvisible ? 'collapse' : 'expand'
+        }), " ", LocaleUtils.tr("layertree.importlayer"));
+      }
+      var flattenGroups = ConfigUtils.getConfigProp("flattenLayerTreeGroups", _this.props.theme) || _this.props.flattenGroups;
+      var sortable = allowReordering && (ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering", _this.props.theme) === true || flattenGroups === true);
+      var treelayers = _this.props.layers.filter(function (layer) {
+        return layer.role !== LayerRole.BACKGROUND && !layer.layertreehidden;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "layertree-container",
+        role: "body"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "layertree-tree",
+        onContextMenuCapture: function onContextMenuCapture(ev) {
+          // Prevent context menu on drag-sort
+          ev.stopPropagation();
+          ev.preventDefault();
+          return false;
+        },
+        onTouchEnd: function onTouchEnd(ev) {
+          var target = ev.currentTarget;
+          clearTimeout(target.preventScrollTimeout);
+          target.preventScrollTimeout = null;
+          target.removeEventListener("touchmove", MiscUtils.killEvent);
+        },
+        onTouchStart: function onTouchStart(ev) {
+          // Prevent touch-scroll after sortable trigger delay
+          var target = ev.currentTarget;
+          target.preventScrollTimeout = setTimeout(function () {
+            target.addEventListener("touchmove", MiscUtils.killEvent, {
+              passive: false
+            });
+          }, 200);
+        },
+        ref: MiscUtils.setupKillTouchEvents
+      }, /*#__PURE__*/React.createElement(Sortable, {
+        onChange: _this.onSortChange,
+        options: {
+          disabled: sortable === false,
+          ghostClass: 'drop-ghost',
+          delay: 200,
+          forceFallback: _this.props.fallbackDrag
+        }
+      }, _this.renderLayerTree(treelayers))), maptipCheckbox, compareCheckbox, layerImportExpander, _this.state.importvisible ? /*#__PURE__*/React.createElement(ImportLayer, {
+        theme: _this.props.theme
+      }) : null);
+    });
+    _defineProperty(_this, "renderVisibilityButton", function () {
+      if (!_this.props.showToggleAllLayersCheckbox && !_this.props.enableVisibleFilter && isEmpty(_this.props.theme.visibilityPresets)) {
+        return null;
+      }
+      var vis = 0;
+      var count = 0;
+      var _iterator = _createForOfIteratorHelper(_this.props.layers),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var layer = _step.value;
+          if (layer.role === LayerRole.THEME || layer.role === LayerRole.USERLAYER) {
+            count += 1;
+            vis += layer.visibility;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      vis /= Math.min(1, count);
+      var buttonClasses = classnames({
+        "layertree-visibility-button": true,
+        "layertree-visibility-button-active": _this.state.visibilityMenu
+      });
+      var style = {};
+      if (_this.props.side === 'left') {
+        style.left = 0;
+      } else {
+        style.right = 0;
+      }
+      return /*#__PURE__*/React.createElement("span", {
+        className: buttonClasses,
+        onClick: function onClick() {
+          return _this.setState(function (state) {
+            return {
+              visibilityMenu: !state.visibilityMenu
+            };
+          });
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "eye"
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "chevron-down"
+      }), _this.state.visibilityMenu ? /*#__PURE__*/React.createElement("div", {
+        className: "layertree-visibility-menu",
+        style: style
+      }, _this.props.showToggleAllLayersCheckbox ? /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          return _this.toggleLayerTreeVisibility(vis === 0);
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: vis === 0 ? "checked" : "unchecked"
+      }), " ", LocaleUtils.tr("layertree.hidealllayers")) : null, _this.props.enableVisibleFilter ? /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          return _this.setState(function (state) {
+            return {
+              filterinvisiblelayers: !state.filterinvisiblelayers
+            };
+          });
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: _this.state.filterinvisiblelayers ? "checked" : "unchecked"
+      }), " ", LocaleUtils.tr("layertree.visiblefilter")) : null, Object.entries(_this.props.theme.visibilityPresets || {}).map(function (_ref3, idx) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          name = _ref4[0],
+          preset = _ref4[1];
+        return /*#__PURE__*/React.createElement("div", {
+          className: idx === 0 ? "layertree-visibility-menu-sep" : "",
+          key: name,
+          onClick: function onClick() {
+            return _this.props.setThemeLayersVisibilityPreset(preset);
+          }
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: _this.state.activePreset === name ? "radio_checked" : "radio_unchecked"
+        }), " ", name);
+      })) : null);
+    });
+    _defineProperty(_this, "renderLegendPrintWindow", function () {
+      if (!_this.state.legendPrintVisible) {
+        return null;
+      }
+      var setLegendPrintContents = function setLegendPrintContents(el) {
+        if (!el) {
+          return;
+        }
+        el.addEventListener('load', function () {
+          var container = el.contentWindow.document.getElementById("legendcontainer");
+          if (container) {
+            var body = '<p id="legendcontainerbody">';
+            body += _this.props.layers.map(function (layer) {
+              if (!layer.visibility) {
+                return "";
+              } else if (layer.legendUrl) {
+                return _this.printLayerLegend(layer, layer);
+              } else if (layer.color) {
+                return '<div class="legend-entry"><span style="display: inline-block; width: 1em; height: 1em; box-shadow: inset 0 0 0 1000px ' + layer.color + '; margin: 0.25em; border: 1px solid black;">&nbsp;</span>' + (layer.title || layer.name) + '</div>';
+              } else {
+                return "";
+              }
+            }).join("");
+            body += "</p>";
+            container.innerHTML = body;
+          } else {
+            _this.legendPrintWindow.document.body.innerHTML = "Broken template. An element with id=legendcontainer must exist.";
+          }
+        });
+      };
+      var printLegend = function printLegend(ev) {
+        ev.target.parentElement.parentElement.getElementsByTagName('iframe')[0].contentWindow.print();
+      };
+      return /*#__PURE__*/React.createElement(ResizeableWindow, {
+        icon: "print",
+        initialHeight: 0.75 * window.innerHeight,
+        initialWidth: 0.5 * window.innerWidth,
+        onClose: function onClose() {
+          return _this.setState({
+            legendPrintVisible: false
+          });
+        },
+        title: LocaleUtils.tr("layertree.printlegend")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "layertree-legend-print-body",
+        role: "body"
+      }, /*#__PURE__*/React.createElement("iframe", {
+        ref: setLegendPrintContents,
+        src: MiscUtils.resolveAssetsPath(_this.props.templatePath)
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "layertree-legend-print-body-buttonbar"
+      }, /*#__PURE__*/React.createElement("button", {
+        onClick: printLegend
+      }, LocaleUtils.tr("layertree.printlegend")))));
+    });
+    _defineProperty(_this, "legendTooltipLoaded", function (ev) {
+      if (ev.target.naturalWidth > 1) {
+        ev.target.style.visibility = 'visible';
+      }
+    });
+    _defineProperty(_this, "onSortChange", function (order, sortable, ev) {
+      var moved = JSON.parse(order[ev.newIndex]);
+      var layer = _this.props.layers.find(function (l) {
+        return l.id === moved.layer;
+      });
+      if (layer) {
+        _this.props.reorderLayer(layer, moved.path, ev.newIndex - ev.oldIndex);
+      }
+    });
+    _defineProperty(_this, "toggleImportLayers", function () {
+      _this.setState(function (state) {
+        var visible = !state.importvisible;
+        return {
+          importvisible: visible,
+          sidebarwidth: visible ? '40em' : null
+        };
+      });
+    });
+    _defineProperty(_this, "propagateOptions", function (layer, options) {
+      var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (layer.sublayers) {
+        layer.sublayers = layer.sublayers.map(function (sublayer, idx) {
+          if (path === null || !isEmpty(path) && path[0] === idx) {
+            var newsublayer = _objectSpread(_objectSpread({}, sublayer), options);
+            _this.propagateOptions(newsublayer, options, path ? path.slice(1) : null);
+            return newsublayer;
+          } else {
+            return sublayer;
+          }
+        });
+      }
+    });
+    _defineProperty(_this, "groupExpandedToggled", function (layer, grouppath, oldexpanded) {
+      _this.props.changeLayerProperty(layer.id, "expanded", !oldexpanded, grouppath);
+    });
+    _defineProperty(_this, "itemVisibilityToggled", function (layer, grouppath, oldvisibility) {
+      var recurseDirection = null;
+      // If item becomes visible, also make parents visible
+      if (_this.props.groupTogglesSublayers) {
+        recurseDirection = !oldvisibility ? "both" : "children";
+      } else {
+        recurseDirection = !oldvisibility ? "parents" : null;
+      }
+      _this.props.changeLayerProperty(layer.id, "visibility", !oldvisibility, grouppath, recurseDirection);
+    });
+    _defineProperty(_this, "itemOmitQueryableToggled", function (layer, grouppath, oldomitqueryable) {
+      _this.props.changeLayerProperty(layer.id, "omitFromQueryLayers", !oldomitqueryable, grouppath, "children");
+    });
+    _defineProperty(_this, "layerTransparencyChanged", function (layer, sublayerpath, value) {
+      var recurse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      _this.props.changeLayerProperty(layer.id, "opacity", Math.max(1, 255 - value), sublayerpath, recurse);
+    });
+    _defineProperty(_this, "layerStyleChanged", function (layer, sublayerpath, value) {
+      var recurseDirection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      _this.props.changeLayerProperty(layer.id, "style", value, sublayerpath, recurseDirection);
+    });
+    _defineProperty(_this, "layerMenuToggled", function (sublayerid) {
+      _this.setState(function (state) {
+        return {
+          activemenu: state.activemenu === sublayerid ? null : sublayerid,
+          activestylemenu: null
+        };
+      });
+    });
+    _defineProperty(_this, "layerStyleMenuToggled", function (sublayerid) {
+      _this.setState(function (state) {
+        return {
+          activestylemenu: state.activestylemenu === sublayerid ? null : sublayerid,
+          activemenu: null
+        };
+      });
+    });
+    _defineProperty(_this, "showLegendTooltip", function (ev, request) {
+      _this.setState({
+        legendTooltip: {
+          x: ev.target.getBoundingClientRect().right,
+          y: ev.target.getBoundingClientRect().top,
+          img: request + "&TYPE=tooltip"
+        }
+      });
+    });
+    _defineProperty(_this, "onHide", function () {
+      _this.setState({
+        legendTooltip: undefined,
+        visibilityMenu: false
+      });
+    });
+    _defineProperty(_this, "hideLegendTooltip", function () {
+      _this.setState({
+        legendTooltip: undefined
+      });
+    });
+    _defineProperty(_this, "toggleMapTips", function () {
+      _this.props.toggleMapTips(!_this.props.mapTipsEnabled);
+    });
+    _defineProperty(_this, "toggleSwipe", function () {
+      _this.props.setSwipe(_this.props.swipe !== null ? null : 50);
+    });
+    _defineProperty(_this, "printLayerLegend", function (layer, sublayer) {
+      var body = "";
+      if (sublayer.sublayers) {
+        if (sublayer.visibility) {
+          body = '<div class="legend-group">' + '<h3 class="legend-group-title">' + (sublayer.title || sublayer.name) + '</h3>' + '<div class="legend-group-body">' + sublayer.sublayers.map(function (subsublayer) {
+            return _this.printLayerLegend(layer, subsublayer);
+          }).join("\n") + '</div>' + '</div>';
+        }
+      } else {
+        if (sublayer.visibility && LayerUtils.layerScaleInRange(sublayer, _this.props.mapScale)) {
+          var request = LayerUtils.getLegendUrl(layer, {
+            name: sublayer.name
+          }, _this.props.mapScale, _this.props.map, _this.props.bboxDependentLegend, _this.props.scaleDependentLegend, _this.props.extraLegendParameters);
+          body = request ? '<div class="legend-entry"><img src="' + request + '" style="max-width: 100%"/></div>' : "";
+        }
+      }
+      return body;
+    });
+    _defineProperty(_this, "deleteAllLayers", function () {
+      var _iterator2 = _createForOfIteratorHelper(_this.props.layers),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var layer = _step2.value;
+          if (layer.role === LayerRole.THEME) {
+            var sublayers = layer.sublayers || [];
+            for (var i = sublayers.length - 1; i >= 0; --i) {
+              _this.props.removeLayer(layer.id, [i]);
+            }
+          } else if (layer.role === LayerRole.USERLAYER) {
+            _this.props.removeLayer(layer.id);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    });
+    _defineProperty(_this, "toggleLayerTreeVisibility", function (visibile) {
+      var _iterator3 = _createForOfIteratorHelper(_this.props.layers),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var layer = _step3.value;
+          if (layer.role === LayerRole.THEME || layer.role === LayerRole.USERLAYER) {
+            _this.props.changeLayerProperty(layer.id, "visibility", visibile, [], null);
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    });
+    _defineProperty(_this, "exportRedliningLayer", function (layer) {
+      var data = JSON.stringify({
+        type: "FeatureCollection",
+        features: layer.features.map(function (feature) {
+          var newFeature = _objectSpread(_objectSpread({}, feature), {}, {
+            geometry: VectorLayerUtils.reprojectGeometry(feature.geometry, feature.crs || _this.props.map.projection, 'EPSG:4326')
+          });
+          delete newFeature.crs;
+          return newFeature;
+        })
+      }, null, ' ');
+      FileSaver.saveAs(new Blob([data], {
+        type: "text/plain;charset=utf-8"
+      }), layer.title + ".json");
+    });
+    _defineProperty(_this, "getSelectedStyles", function (layer) {
+      var _layer$params;
+      return _toConsumableArray(new Set((((_layer$params = layer.params) === null || _layer$params === void 0 ? void 0 : _layer$params.STYLES) || "").split(",").filter(Boolean)));
+    });
+    _defineProperty(_this, "getLayerStyles", function (layer) {
+      var _layer$sublayers;
+      return layer === null || layer === void 0 || (_layer$sublayers = layer.sublayers) === null || _layer$sublayers === void 0 ? void 0 : _layer$sublayers.reduce(function (styleList, sublayer) {
+        Object.assign(styleList, _this.getLayerStyles(sublayer.sublayers));
+        return Object.assign(styleList, sublayer.styles);
+      }, {});
+    });
+    _defineProperty(_this, "applyLayerStyle", function (style, layer) {
+      var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      var layerId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      layerId = layerId !== null && layerId !== void 0 ? layerId : layer.id;
+      (layer.sublayers || []).forEach(function (sublayer, idx) {
+        _this.applyLayerStyle(style, sublayer, [].concat(_toConsumableArray(path), [idx]), layerId);
+        if (style in (sublayer.styles || {})) {
+          _this.props.changeLayerProperty(layerId, "style", style, [].concat(_toConsumableArray(path), [idx]));
+        }
+      });
+    });
+    _this.legendPrintWindow = null;
+    window.addEventListener('beforeunload', function () {
+      if (_this.legendPrintWindow && !_this.legendPrintWindow.closed) {
+        _this.legendPrintWindow.close();
+      }
+    });
+    return _this;
+  }
+  _inherits(LayerTree, _React$Component);
+  return _createClass(LayerTree, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.theme.mapTips !== undefined && this.props.theme.mapTips !== prevProps.theme.mapTips) {
+        this.props.toggleMapTips(this.props.theme.mapTips && !ConfigUtils.isMobile());
+      }
+      if (this.props.layers !== prevProps.layers) {
+        this.setState({
+          activePreset: LayerUtils.getActiveVisibilityPreset(this.props.layers, this.props.theme.visibilityPresets)
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var legendTooltip = null;
+      if (this.state.legendTooltip) {
+        var style = {
+          left: this.state.legendTooltip.x,
+          top: this.state.legendTooltip.y,
+          maxWidth: window.innerWidth - this.state.legendTooltip.x - 2,
+          maxHeight: window.innerHeight - this.state.legendTooltip.y - 2,
+          visibility: 'hidden'
+        };
+        legendTooltip = /*#__PURE__*/React.createElement(Image, {
+          className: "layertree-item-legend-tooltip",
+          onLoad: this.legendTooltipLoaded,
+          onTouchStart: this.hideLegendTooltip,
+          src: this.state.legendTooltip.img,
+          style: style
+        });
+      }
+      var legendPrintIcon = null;
+      if (this.props.enableLegendPrint) {
+        legendPrintIcon = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-print-legend",
+          icon: "print",
+          onClick: function onClick() {
+            return _this2.setState({
+              legendPrintVisible: true
+            });
+          },
+          title: LocaleUtils.tr("layertree.printlegend")
+        });
+      }
+      var deleteAllLayersIcon = null;
+      if (ConfigUtils.getConfigProp("allowRemovingThemeLayers") === true) {
+        var deleteAllLayersTooltip = LocaleUtils.tr("layertree.deletealllayers");
+        deleteAllLayersIcon = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-delete-legend",
+          icon: "trash",
+          onClick: this.deleteAllLayers,
+          title: deleteAllLayersTooltip
+        });
+      }
+      var serviceInfoIcon = null;
+      if (this.props.enableServiceInfo) {
+        var serviceInfoTooltip = LocaleUtils.tr("serviceinfo.title");
+        serviceInfoIcon = /*#__PURE__*/React.createElement(Icon, {
+          className: "layertree-theme-metadata",
+          icon: "info-sign",
+          onClick: function onClick() {
+            return _this2.props.setActiveServiceInfo(_this2.props.theme);
+          },
+          title: serviceInfoTooltip
+        });
+      }
+      var extraTitlebarContent = /*#__PURE__*/React.createElement("span", null, this.renderVisibilityButton(), legendPrintIcon, deleteAllLayersIcon, serviceInfoIcon);
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SideBar, {
+        extraTitlebarContent: extraTitlebarContent,
+        icon: "layers",
+        id: "LayerTree",
+        onHide: this.onHide,
+        side: this.props.side,
+        title: LocaleUtils.tr("appmenu.items.LayerTree"),
+        width: this.state.sidebarwidth || this.props.width
+      }, function () {
+        return {
+          body: _this2.renderBody()
+        };
+      }), legendTooltip, this.renderLegendPrintWindow(), /*#__PURE__*/React.createElement(LayerInfoWindow, {
+        bboxDependentLegend: this.props.bboxDependentLegend,
+        layerInfoGeometry: this.props.layerInfoGeometry,
+        scaleDependentLegend: this.props.scaleDependentLegend
+      }), /*#__PURE__*/React.createElement(ServiceInfoWindow, {
+        layerInfoGeometry: this.props.layerInfoGeometry
+      }));
+    }
+  }]);
+}(React.Component);
+_defineProperty(LayerTree, "propTypes", {
+  /** Whether to allow adding separator entries in the layer tree, useful for organizing the tree. */
+  addLayerSeparator: PropTypes.func,
+  /** Whether to enable the compare function. Requires the `MapCompare` plugin. */
+  allowCompare: PropTypes.bool,
+  /** Whether to allow importing external layers. */
+  allowImport: PropTypes.bool,
+  /** Whether to allow enabling map tips. */
+  allowMapTips: PropTypes.bool,
+  /** Whether to allow selection of identifyable layers. The `showQueryableIcon` property should be `true` to be able to select identifyable layers. */
+  allowSelectIdentifyableLayers: PropTypes.bool,
+  /** Whether to display a BBOX dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */
+  bboxDependentLegend: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  changeLayerProperty: PropTypes.func,
+  /** Whether to enable the legend print functionality. */
+  enableLegendPrint: PropTypes.bool,
+  /** Whether to display a service info button to display the WMS service metadata. */
+  enableServiceInfo: PropTypes.bool,
+  /** Whether to display a button to filter invisible layers from the layertree. */
+  enableVisibleFilter: PropTypes.bool,
+  /** Additional parameters to pass to the GetLegendGraphics request. */
+  extraLegendParameters: PropTypes.string,
+  /** Whether to use the fallback logic for drag-and-drop. */
+  fallbackDrag: PropTypes.bool,
+  filter: PropTypes.object,
+  /** Whether to display a flat layer tree, omitting any groups. */
+  flattenGroups: PropTypes.bool,
+  /** Whether to display unchecked layers gray in the layertree. */
+  grayUnchecked: PropTypes.bool,
+  /** Whether toggling a group also toggles all sublayers. */
+  groupTogglesSublayers: PropTypes.bool,
+  /** Whether to display the layer info button inside the layer settings menu rather than next to the layer title. */
+  infoInSettings: PropTypes.bool,
+  /** Default layer info window geometry with size, position and docking status. */
+  layerInfoGeometry: PropTypes.shape({
+    initialWidth: PropTypes.number,
+    initialHeight: PropTypes.number,
+    initialX: PropTypes.number,
+    initialY: PropTypes.number,
+    initiallyDocked: PropTypes.bool
+  }),
+  layers: PropTypes.array,
+  loadingLayers: PropTypes.array,
+  map: PropTypes.object,
+  mapScale: PropTypes.number,
+  mapTipsEnabled: PropTypes.bool,
+  mobile: PropTypes.bool,
+  /** Whether to only display layer groups but not individual layers in layertree. */
+  onlyGroups: PropTypes.bool,
+  removeLayer: PropTypes.func,
+  reorderLayer: PropTypes.func,
+  /** Whether to display a scale dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */
+  scaleDependentLegend: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  setActiveLayerInfo: PropTypes.func,
+  setActiveServiceInfo: PropTypes.func,
+  setCurrentTask: PropTypes.func,
+  setSwipe: PropTypes.func,
+  setThemeLayersVisibilityPreset: PropTypes.func,
+  /** Whether to display an icon linking to the layer attribute table in the layer options menu.  */
+  showAttributeTableLink: PropTypes.bool,
+  /** Whether to display legend icons. */
+  showLegendIcons: PropTypes.bool,
+  /** Whether to display the queryable icon to indicate that a layer is identifyable. */
+  showQueryableIcon: PropTypes.bool,
+  /** Whether to display the root entry of the layertree. */
+  showRootEntry: PropTypes.bool,
+  /** Whether to display a checkbox to toggle all layers. */
+  showToggleAllLayersCheckbox: PropTypes.bool,
+  /** The side of the application on which to display the sidebar. */
+  side: PropTypes.string,
+  swipe: PropTypes.number,
+  /** Template location for the legend print functionality */
+  templatePath: PropTypes.string,
+  theme: PropTypes.object,
+  toggleMapTips: PropTypes.func,
+  transparencyIcon: PropTypes.bool,
+  /** The initial width of the layertree, as a CSS width string. */
+  width: PropTypes.string,
+  zoomToExtent: PropTypes.func
+});
+_defineProperty(LayerTree, "defaultProps", {
+  layers: [],
+  showLegendIcons: true,
+  showRootEntry: true,
+  showQueryableIcon: true,
+  allowMapTips: true,
+  allowCompare: true,
+  allowImport: true,
+  allowSelectIdentifyableLayers: false,
+  groupTogglesSublayers: false,
+  grayUnchecked: true,
+  layerInfoGeometry: {
+    initialWidth: 480,
+    initialHeight: 480,
+    initialX: null,
+    initialY: null,
+    initiallyDocked: false
+  },
+  bboxDependentLegend: false,
+  flattenGroups: false,
+  onlyGroups: false,
+  width: "25em",
+  enableLegendPrint: true,
+  enableVisibleFilter: true,
+  enableServiceInfo: true,
+  infoInSettings: true,
+  showToggleAllLayersCheckbox: true,
+  transparencyIcon: true,
+  side: 'right',
+  templatePath: ":/templates/legendprint.html"
+});
+var selector = function selector(state) {
+  return {
+    layers: state.layers.flat,
+    filter: state.layers.filter,
+    loadingLayers: state.layers.loading,
+    map: state.map,
+    mapScale: MapUtils.computeForZoom(state.map.scales, state.map.zoom),
+    swipe: state.layers.swipe,
+    theme: state.theme.current || {},
+    mapTipsEnabled: state.map.maptips
+  };
+};
+export default connect(selector, {
+  addLayerSeparator: addLayerSeparator,
+  changeLayerProperty: changeLayerProperty,
+  removeLayer: removeLayer,
+  reorderLayer: reorderLayer,
+  toggleMapTips: toggleMapTips,
+  setSwipe: setSwipe,
+  setActiveLayerInfo: setActiveLayerInfo,
+  setActiveServiceInfo: setActiveServiceInfo,
+  setCurrentTask: setCurrentTask,
+  setThemeLayersVisibilityPreset: setThemeLayersVisibilityPreset,
+  zoomToExtent: zoomToExtent
+})(LayerTree);