qwc2 2025.10.9 → 2025.10.14

package/plugins/MapTip.js

@@ -1,14 +1,300 @@
-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 _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 _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 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 _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 _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 _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 _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 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 _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 _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 ReactDOM from"react-dom";import{connect}from"react-redux";import DOMPurify from"dompurify";import htmlReactParser,{domToReact}from"html-react-parser";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole,addLayerFeatures,removeLayer}from"../actions/layers";import{openExternalUrl}from"../actions/windows";import{MapContainerPortalContext}from"../components/PluginsContainer";import IdentifyUtils from"../utils/IdentifyUtils";import MapUtils from"../utils/MapUtils";import"./style/MapTip.css";/**
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import DOMPurify from 'dompurify';
+import htmlReactParser, { domToReact } from 'html-react-parser';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { LayerRole, addLayerFeatures, removeLayer } from '../actions/layers';
+import { openExternalUrl } from '../actions/windows';
+import { MapContainerPortalContext } from '../components/PluginsContainer';
+import IdentifyUtils from '../utils/IdentifyUtils';
+import MapUtils from '../utils/MapUtils';
+import './style/MapTip.css';
+
+/**
  * Displays maptips by hovering over features on the map.
  *
  * Queries the map tips configured in the QGIS layer properites over GetFeatureInfo.
  *
  * The map tip needs to be configured in QGIS Layer Properties &rarr; Display.
- */var MapTip=/*#__PURE__*/function(_React$Component){function MapTip(){var _this;_classCallCheck(this,MapTip);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapTip,[].concat(args));_defineProperty(_this,"state",{maptips:{},maptipsLayerOrder:[],mousePos:null,pos:null});_defineProperty(_this,"getMapMousePos",function(ev){_this.clearMaptip();clearTimeout(_this.mouseStateTimeout);_this.mouseStateTimeout=setTimeout(function(){_this.setState({mousePos:{coordinate:ev.coordinate,pixel:ev.pixel}})},100)});_defineProperty(_this,"clearMaptip",function(){clearTimeout(_this.timeoutId);_this.timeoutId=null;if(_this.state.pos){_this.props.removeLayer("maptipselection");_this.setState({maptips:{},maptipsOrder:[],pos:null})}});_defineProperty(_this,"queryMapTip",function(pos){_this.timeoutId=null;var options={info_format:"text/xml",feature_count:_this.props.layerFeatureCount,FI_POINT_TOLERANCE:16,FI_LINE_TOLERANCE:8,FI_POLYGON_TOLERANCE:4,with_maptip:true,with_htmlcontent:false};var reqId=uuidv4();_this.reqId=reqId;var layerOrder=[];_this.props.layers.forEach(function(layer){if(!(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER)||!(layer.infoFormats||[]).includes("text/xml")||isEmpty(layer.queryLayers)){return}var queryLayers=layer.queryLayers;if(!isEmpty(layer.drawingOrder)){queryLayers=layer.drawingOrder.slice(0).reverse().filter(function(entry){return layer.queryLayers.includes(entry)})}layerOrder.push(layer.id);var request=IdentifyUtils.buildRequest(layer,queryLayers.join(","),_this.state.mousePos.coordinate,_this.props.map,options);IdentifyUtils.sendRequest(request,function(response){if(_this.reqId===reqId){var result=IdentifyUtils.parseXmlResponse(response||"",_this.props.map.projection,layer);var mapTips=[];var features=[];var _iterator=_createForOfIteratorHelper(request.params.layers.split(",")),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var sublayer=_step.value;var sublayerFeatures=(result[sublayer]||[]).filter(function(feature){return feature.properties.maptip});features.push.apply(features,_toConsumableArray(sublayerFeatures));mapTips.push.apply(mapTips,_toConsumableArray(sublayerFeatures.map(function(feature){return feature.properties.maptip})))}}catch(err){_iterator.e(err)}finally{_iterator.f()}if(_this.props.showFeatureSelection&&!isEmpty(features)){var sellayer={id:"maptipselection",role:LayerRole.SELECTION};_this.props.addLayerFeatures(sellayer,features,true)}_this.setState(function(state){return{pos:pos,maptips:_objectSpread(_objectSpread({},state.maptips),{},_defineProperty({},layer.id,mapTips))}})}})});_this.setState({maptipsLayerOrder:layerOrder})});_defineProperty(_this,"parsedContent",function(text){text=DOMPurify.sanitize(text,{ADD_ATTR:["target"]}).replace("&#10;","<br />");var options={replace:function replace(node){if(node.name==="a"){return/*#__PURE__*/React.createElement("a",{href:node.attribs.href,onClick:_this.attributeLinkClicked,target:node.attribs.target||"_blank"},domToReact(node.children,options))}return undefined}};return htmlReactParser(text,options)});_defineProperty(_this,"attributeLinkClicked",function(ev){_this.props.openExternalUrl(ev.target.href,ev.target.target,{docked:_this.props.iframeDialogsInitiallyDocked});ev.preventDefault()});_defineProperty(_this,"positionMapTip",function(el){if(el){var x=_this.state.pos[0];var y=_this.state.pos[1];var parentBBox=el.parentElement.getBoundingClientRect();var bbox=el.getBoundingClientRect();if(x+bbox.width>parentBBox.width){x-=bbox.width}if(y+bbox.height>parentBBox.height){y-=bbox.height}el.style.left=x+"px";el.style.top=y+"px"}});return _this}_inherits(MapTip,_React$Component);return _createClass(MapTip,[{key:"componentDidMount",value:function componentDidMount(){MapUtils.getHook(MapUtils.ADD_POINTER_MOVE_LISTENER)(this.getMapMousePos)}},{key:"componentWillUnmount",value:function componentWillUnmount(){MapUtils.getHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER)(this.getMapMousePos)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.props.map!==prevProps.map){this.clearMaptip()}if(this.props.mapTipsEnabled&&this.state.mousePos&&this.state.mousePos!==prevState.mousePos&&(isEmpty(this.state.pos)||Math.abs(this.state.mousePos.pixel[0]-this.state.pos[0])>5||Math.abs(this.state.mousePos.pixel[1]-this.state.pos[1])>5)){this.timeoutId=setTimeout(function(){return _this2.queryMapTip(_this2.state.mousePos.pixel)},500)}else if(!this.props.mapTipsEnabled&&prevProps.mapTipsEnabled){this.clearMaptip()}}},{key:"render",value:function render(){var _this3=this;if(!isEmpty(this.state.maptips)&&this.state.pos){// Render off-screen first to measure dimensions, then place as necessary
-var style={left:10000+"px",top:10000+"px",maxHeight:this.props.maxHeight,maxWidth:this.props.maxWidth};var bufferPos={left:this.state.pos[0]-8+"px",top:this.state.pos[1]-8+"px"};return/*#__PURE__*/ReactDOM.createPortal([/*#__PURE__*/React.createElement("div",{id:"MapTipPointerBuffer",key:"MapTipPointerBuffer",style:bufferPos}),/*#__PURE__*/React.createElement("div",{id:"MapTip",key:"MapTip",ref:this.positionMapTip,style:style},this.state.maptipsLayerOrder.map(function(key){return _this3.state.maptips[key]||[]}).flat().map(function(maptip,idx){return/*#__PURE__*/React.createElement("div",{key:idx},_this3.parsedContent(maptip))}))],this.context)}return null}}])}(React.Component);_defineProperty(MapTip,"contextType",MapContainerPortalContext);_defineProperty(MapTip,"propTypes",{addLayerFeatures:PropTypes.func,iframeDialogsInitiallyDocked:PropTypes.bool,/** The maximum number of feature maptips to display for a single layer. */layerFeatureCount:PropTypes.number,layers:PropTypes.array,map:PropTypes.object,mapTipsEnabled:PropTypes.bool,/** The maximum height of the maptip popop bubble, as a CSS string. */maxHeight:PropTypes.string,/** The maximum height of the maptip popop bubble, as a CSS string. */maxWidth:PropTypes.string,openExternalUrl:PropTypes.func,removeLayer:PropTypes.func,/** Whether to show the maptip feature selection on the map or not */showFeatureSelection:PropTypes.bool});_defineProperty(MapTip,"defaultProps",{layerFeatureCount:5,maxHeight:"15em",maxWidth:"20em",showFeatureSelection:true});export default connect(function(state){return{mapTipsEnabled:state.map.maptips&&state.task.identifyEnabled,layers:state.layers.flat,map:state.map}},{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer,openExternalUrl:openExternalUrl})(MapTip);
+ */
+var MapTip = /*#__PURE__*/function (_React$Component) {
+  function MapTip() {
+    var _this;
+    _classCallCheck(this, MapTip);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, MapTip, [].concat(args));
+    _defineProperty(_this, "state", {
+      maptips: {},
+      maptipsLayerOrder: [],
+      mousePos: null,
+      pos: null
+    });
+    _defineProperty(_this, "getMapMousePos", function (ev) {
+      _this.clearMaptip();
+      clearTimeout(_this.mouseStateTimeout);
+      _this.mouseStateTimeout = setTimeout(function () {
+        _this.setState({
+          mousePos: {
+            coordinate: ev.coordinate,
+            pixel: ev.pixel
+          }
+        });
+      }, 100);
+    });
+    _defineProperty(_this, "clearMaptip", function () {
+      clearTimeout(_this.timeoutId);
+      _this.timeoutId = null;
+      if (_this.state.pos) {
+        _this.props.removeLayer('maptipselection');
+        _this.setState({
+          maptips: {},
+          maptipsOrder: [],
+          pos: null
+        });
+      }
+    });
+    _defineProperty(_this, "queryMapTip", function (pos) {
+      _this.timeoutId = null;
+      var options = {
+        info_format: 'text/xml',
+        feature_count: _this.props.layerFeatureCount,
+        FI_POINT_TOLERANCE: 16,
+        FI_LINE_TOLERANCE: 8,
+        FI_POLYGON_TOLERANCE: 4,
+        with_maptip: true,
+        with_htmlcontent: false
+      };
+      var reqId = uuidv4();
+      _this.reqId = reqId;
+      var layerOrder = [];
+      _this.props.layers.forEach(function (layer) {
+        if (!(layer.role === LayerRole.THEME || layer.role === LayerRole.USERLAYER) || !(layer.infoFormats || []).includes("text/xml") || isEmpty(layer.queryLayers)) {
+          return;
+        }
+        var queryLayers = layer.queryLayers;
+        if (!isEmpty(layer.drawingOrder)) {
+          queryLayers = layer.drawingOrder.slice(0).reverse().filter(function (entry) {
+            return layer.queryLayers.includes(entry);
+          });
+        }
+        layerOrder.push(layer.id);
+        var request = IdentifyUtils.buildRequest(layer, queryLayers.join(","), _this.state.mousePos.coordinate, _this.props.map, options);
+        IdentifyUtils.sendRequest(request, function (response) {
+          if (_this.reqId === reqId) {
+            var result = IdentifyUtils.parseXmlResponse(response || "", _this.props.map.projection, layer);
+            var mapTips = [];
+            var features = [];
+            var _iterator = _createForOfIteratorHelper(request.params.layers.split(",")),
+              _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                var sublayer = _step.value;
+                var sublayerFeatures = (result[sublayer] || []).filter(function (feature) {
+                  return feature.properties.maptip;
+                });
+                features.push.apply(features, _toConsumableArray(sublayerFeatures));
+                mapTips.push.apply(mapTips, _toConsumableArray(sublayerFeatures.map(function (feature) {
+                  return feature.properties.maptip;
+                })));
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            if (_this.props.showFeatureSelection && !isEmpty(features)) {
+              var sellayer = {
+                id: "maptipselection",
+                role: LayerRole.SELECTION
+              };
+              _this.props.addLayerFeatures(sellayer, features, true);
+            }
+            _this.setState(function (state) {
+              return {
+                pos: pos,
+                maptips: _objectSpread(_objectSpread({}, state.maptips), {}, _defineProperty({}, layer.id, mapTips))
+              };
+            });
+          }
+        });
+      });
+      _this.setState({
+        maptipsLayerOrder: layerOrder
+      });
+    });
+    _defineProperty(_this, "parsedContent", function (text) {
+      text = DOMPurify.sanitize(text, {
+        ADD_ATTR: ['target']
+      }).replace('&#10;', '<br />');
+      var options = {
+        replace: function replace(node) {
+          if (node.name === "a") {
+            return /*#__PURE__*/React.createElement("a", {
+              href: node.attribs.href,
+              onClick: _this.attributeLinkClicked,
+              target: node.attribs.target || "_blank"
+            }, domToReact(node.children, options));
+          }
+          return undefined;
+        }
+      };
+      return htmlReactParser(text, options);
+    });
+    _defineProperty(_this, "attributeLinkClicked", function (ev) {
+      _this.props.openExternalUrl(ev.target.href, ev.target.target, {
+        docked: _this.props.iframeDialogsInitiallyDocked
+      });
+      ev.preventDefault();
+    });
+    _defineProperty(_this, "positionMapTip", function (el) {
+      if (el) {
+        var x = _this.state.pos[0];
+        var y = _this.state.pos[1];
+        var parentBBox = el.parentElement.getBoundingClientRect();
+        var bbox = el.getBoundingClientRect();
+        if (x + bbox.width > parentBBox.width) {
+          x -= bbox.width;
+        }
+        if (y + bbox.height > parentBBox.height) {
+          y -= bbox.height;
+        }
+        el.style.left = x + "px";
+        el.style.top = y + "px";
+      }
+    });
+    return _this;
+  }
+  _inherits(MapTip, _React$Component);
+  return _createClass(MapTip, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      MapUtils.getHook(MapUtils.ADD_POINTER_MOVE_LISTENER)(this.getMapMousePos);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      MapUtils.getHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER)(this.getMapMousePos);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+      if (this.props.map !== prevProps.map) {
+        this.clearMaptip();
+      }
+      if (this.props.mapTipsEnabled && this.state.mousePos && this.state.mousePos !== prevState.mousePos && (isEmpty(this.state.pos) || Math.abs(this.state.mousePos.pixel[0] - this.state.pos[0]) > 5 || Math.abs(this.state.mousePos.pixel[1] - this.state.pos[1]) > 5)) {
+        this.timeoutId = setTimeout(function () {
+          return _this2.queryMapTip(_this2.state.mousePos.pixel);
+        }, 500);
+      } else if (!this.props.mapTipsEnabled && prevProps.mapTipsEnabled) {
+        this.clearMaptip();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      if (!isEmpty(this.state.maptips) && this.state.pos) {
+        // Render off-screen first to measure dimensions, then place as necessary
+        var style = {
+          left: 10000 + "px",
+          top: 10000 + "px",
+          maxHeight: this.props.maxHeight,
+          maxWidth: this.props.maxWidth
+        };
+        var bufferPos = {
+          left: this.state.pos[0] - 8 + "px",
+          top: this.state.pos[1] - 8 + "px"
+        };
+        return /*#__PURE__*/ReactDOM.createPortal([/*#__PURE__*/React.createElement("div", {
+          id: "MapTipPointerBuffer",
+          key: "MapTipPointerBuffer",
+          style: bufferPos
+        }), /*#__PURE__*/React.createElement("div", {
+          id: "MapTip",
+          key: "MapTip",
+          ref: this.positionMapTip,
+          style: style
+        }, this.state.maptipsLayerOrder.map(function (key) {
+          return _this3.state.maptips[key] || [];
+        }).flat().map(function (maptip, idx) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: idx
+          }, _this3.parsedContent(maptip));
+        }))], this.context);
+      }
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(MapTip, "contextType", MapContainerPortalContext);
+_defineProperty(MapTip, "propTypes", {
+  addLayerFeatures: PropTypes.func,
+  iframeDialogsInitiallyDocked: PropTypes.bool,
+  /** The maximum number of feature maptips to display for a single layer. */
+  layerFeatureCount: PropTypes.number,
+  layers: PropTypes.array,
+  map: PropTypes.object,
+  mapTipsEnabled: PropTypes.bool,
+  /** The maximum height of the maptip popop bubble, as a CSS string. */
+  maxHeight: PropTypes.string,
+  /** The maximum height of the maptip popop bubble, as a CSS string. */
+  maxWidth: PropTypes.string,
+  openExternalUrl: PropTypes.func,
+  removeLayer: PropTypes.func,
+  /** Whether to show the maptip feature selection on the map or not */
+  showFeatureSelection: PropTypes.bool
+});
+_defineProperty(MapTip, "defaultProps", {
+  layerFeatureCount: 5,
+  maxHeight: "15em",
+  maxWidth: "20em",
+  showFeatureSelection: true
+});
+export default connect(function (state) {
+  return {
+    mapTipsEnabled: state.map.maptips && state.task.identifyEnabled,
+    layers: state.layers.flat,
+    map: state.map
+  };
+}, {
+  addLayerFeatures: addLayerFeatures,
+  removeLayer: removeLayer,
+  openExternalUrl: openExternalUrl
+})(MapTip);

package/plugins/Measure.js

@@ -1,10 +1,226 @@
-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 _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 _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 PropTypes from"prop-types";import{setSnappingConfig}from"../actions/map.js";import{changeMeasurementState}from"../actions/measurement.js";import TaskBar from"../components/TaskBar";import ButtonBar from"../components/widgets/ButtonBar";import CopyButton from"../components/widgets/CopyButton";import CoordinatesUtils from"../utils/CoordinatesUtils.js";import LocaleUtils from"../utils/LocaleUtils";import MeasureUtils from"../utils/MeasureUtils";import"./style/Measure.css";/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { setSnappingConfig } from '../actions/map.js';
+import { changeMeasurementState } from '../actions/measurement.js';
+import TaskBar from '../components/TaskBar';
+import ButtonBar from '../components/widgets/ButtonBar';
+import CopyButton from '../components/widgets/CopyButton';
+import CoordinatesUtils from '../utils/CoordinatesUtils.js';
+import LocaleUtils from '../utils/LocaleUtils';
+import MeasureUtils from '../utils/MeasureUtils';
+import './style/Measure.css';
+
+/**
  * Allows measuring points/lines/areas on the map.
- */var Measure=/*#__PURE__*/function(_React$Component){function Measure(){var _this;_classCallCheck(this,Measure);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Measure,[].concat(args));_defineProperty(_this,"onShow",function(mode){_this.props.changeMeasurementState({geomType:mode||"Point",bearingHeadMarker:_this.props.bearingHeadMarker,bearingTailMarker:_this.props.bearingTailMarker,lineHeadMarker:_this.props.lineHeadMarker,lineTailMarker:_this.props.lineTailMarker});_this.props.setSnappingConfig(_this.props.snapping,_this.props.snappingActive)});_defineProperty(_this,"onHide",function(){_this.props.changeMeasurementState({geomType:null})});_defineProperty(_this,"setMeasureMode",function(geomType){if(geomType!==_this.props.measureState.geomType){_this.props.changeMeasurementState({geomType:geomType})}});_defineProperty(_this,"changeLengthUnit",function(ev){_this.props.changeMeasurementState(_objectSpread(_objectSpread({},_this.props.measureState),{},{lenUnit:ev.target.value}))});_defineProperty(_this,"changeAreaUnit",function(ev){_this.props.changeMeasurementState(_objectSpread(_objectSpread({},_this.props.measureState),{},{areaUnit:ev.target.value}))});_defineProperty(_this,"renderModeSwitcher",function(){if(!_this.props.showMeasureModeSwitcher){return null}var buttons=[{key:"Point",label:LocaleUtils.tr("measureComponent.pointLabel")},{key:"LineString",label:LocaleUtils.tr("measureComponent.lengthLabel")},{key:"Polygon",label:LocaleUtils.tr("measureComponent.areaLabel")},{key:"Bearing",label:LocaleUtils.tr("measureComponent.bearingLabel")}];return/*#__PURE__*/React.createElement(ButtonBar,{active:_this.props.measureState.geomType,buttons:buttons,onClick:_this.setMeasureMode})});_defineProperty(_this,"renderResult",function(){var text="";var unitSelector=null;if(_this.props.measureState.geomType==="Point"){var coo=_this.props.measureState.coordinates||[0,0];text=CoordinatesUtils.getFormattedCoordinate(coo,_this.props.mapCrs,_this.props.displayCrs)}else if(_this.props.measureState.geomType==="LineString"){var length=_this.props.measureState.length||0;text=MeasureUtils.formatMeasurement(length,false,_this.props.measureState.lenUnit);unitSelector=/*#__PURE__*/React.createElement("select",{onChange:_this.changeLengthUnit,value:_this.props.measureState.lenUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"m"},"m"),/*#__PURE__*/React.createElement("option",{value:"km"},"km"),/*#__PURE__*/React.createElement("option",{value:"ft"},"ft"),/*#__PURE__*/React.createElement("option",{value:"mi"},"mi"))}else if(_this.props.measureState.geomType==="Polygon"){var area=_this.props.measureState.area||0;text=MeasureUtils.formatMeasurement(area,true,_this.props.measureState.areaUnit);unitSelector=/*#__PURE__*/React.createElement("select",{onChange:_this.changeAreaUnit,value:_this.props.measureState.areaUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"sqm"},"m\xB2"),/*#__PURE__*/React.createElement("option",{value:"ha"},"ha"),/*#__PURE__*/React.createElement("option",{value:"sqkm"},"km\xB2"),/*#__PURE__*/React.createElement("option",{value:"sqft"},"ft\xB2"),/*#__PURE__*/React.createElement("option",{value:"acre"},"acre"),/*#__PURE__*/React.createElement("option",{value:"sqmi"},"mi\xB2"))}else if(_this.props.measureState.geomType==="Bearing"){text=MeasureUtils.getFormattedBearingValue(_this.props.measureState.bearing)}return/*#__PURE__*/React.createElement("div",{className:"measure-result controlgroup"},/*#__PURE__*/React.createElement("input",{className:"measure-result-field",readOnly:true,type:"text",value:text}),unitSelector,/*#__PURE__*/React.createElement(CopyButton,{text:text}))});_defineProperty(_this,"renderBody",function(){return/*#__PURE__*/React.createElement("div",{className:"measure-body"},_this.renderModeSwitcher(),_this.renderResult())});return _this}_inherits(Measure,_React$Component);return _createClass(Measure,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(TaskBar,{onHide:this.onHide,onShow:this.onShow,task:"Measure"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(Measure,"propTypes",{/** Head marker of bearing line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */bearingHeadMarker:PropTypes.string,/** Tail marker of bearing line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */bearingTailMarker:PropTypes.string,changeMeasurementState:PropTypes.func,displayCrs:PropTypes.string,/** Head marker of distance line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */lineHeadMarker:PropTypes.string,/** Tail marker of distance line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */lineTailMarker:PropTypes.string,mapCrs:PropTypes.string,measureState:PropTypes.object,setSnappingConfig:PropTypes.func,/** Whether to show the widget to switch between measure modes. */showMeasureModeSwitcher:PropTypes.bool,/** Whether snapping is available when editing. */snapping:PropTypes.bool,/** Whether snapping is enabled by default when editing.
-         *  Either `false`, `edge`, `vertex` or `true` (i.e. both vertex and edge). */snappingActive:PropTypes.oneOfType([PropTypes.bool,PropTypes.string])});_defineProperty(Measure,"defaultProps",{showMeasureModeSwitcher:true,snapping:true,snappingActive:true});export default connect(function(state){return{measureState:state.measurement,mapCrs:state.map.projection,displayCrs:state.map.displayCrs}},{changeMeasurementState:changeMeasurementState,setSnappingConfig:setSnappingConfig})(Measure);
+ */
+var Measure = /*#__PURE__*/function (_React$Component) {
+  function Measure() {
+    var _this;
+    _classCallCheck(this, Measure);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Measure, [].concat(args));
+    _defineProperty(_this, "onShow", function (mode) {
+      _this.props.changeMeasurementState({
+        geomType: mode || 'Point',
+        bearingHeadMarker: _this.props.bearingHeadMarker,
+        bearingTailMarker: _this.props.bearingTailMarker,
+        lineHeadMarker: _this.props.lineHeadMarker,
+        lineTailMarker: _this.props.lineTailMarker
+      });
+      _this.props.setSnappingConfig(_this.props.snapping, _this.props.snappingActive);
+    });
+    _defineProperty(_this, "onHide", function () {
+      _this.props.changeMeasurementState({
+        geomType: null
+      });
+    });
+    _defineProperty(_this, "setMeasureMode", function (geomType) {
+      if (geomType !== _this.props.measureState.geomType) {
+        _this.props.changeMeasurementState({
+          geomType: geomType
+        });
+      }
+    });
+    _defineProperty(_this, "changeLengthUnit", function (ev) {
+      _this.props.changeMeasurementState(_objectSpread(_objectSpread({}, _this.props.measureState), {}, {
+        lenUnit: ev.target.value
+      }));
+    });
+    _defineProperty(_this, "changeAreaUnit", function (ev) {
+      _this.props.changeMeasurementState(_objectSpread(_objectSpread({}, _this.props.measureState), {}, {
+        areaUnit: ev.target.value
+      }));
+    });
+    _defineProperty(_this, "renderModeSwitcher", function () {
+      if (!_this.props.showMeasureModeSwitcher) {
+        return null;
+      }
+      var buttons = [{
+        key: "Point",
+        label: LocaleUtils.tr("measureComponent.pointLabel")
+      }, {
+        key: "LineString",
+        label: LocaleUtils.tr("measureComponent.lengthLabel")
+      }, {
+        key: "Polygon",
+        label: LocaleUtils.tr("measureComponent.areaLabel")
+      }, {
+        key: "Bearing",
+        label: LocaleUtils.tr("measureComponent.bearingLabel")
+      }];
+      return /*#__PURE__*/React.createElement(ButtonBar, {
+        active: _this.props.measureState.geomType,
+        buttons: buttons,
+        onClick: _this.setMeasureMode
+      });
+    });
+    _defineProperty(_this, "renderResult", function () {
+      var text = "";
+      var unitSelector = null;
+      if (_this.props.measureState.geomType === "Point") {
+        var coo = _this.props.measureState.coordinates || [0, 0];
+        text = CoordinatesUtils.getFormattedCoordinate(coo, _this.props.mapCrs, _this.props.displayCrs);
+      } else if (_this.props.measureState.geomType === "LineString") {
+        var length = _this.props.measureState.length || 0;
+        text = MeasureUtils.formatMeasurement(length, false, _this.props.measureState.lenUnit);
+        unitSelector = /*#__PURE__*/React.createElement("select", {
+          onChange: _this.changeLengthUnit,
+          value: _this.props.measureState.lenUnit
+        }, /*#__PURE__*/React.createElement("option", {
+          value: "metric"
+        }, LocaleUtils.tr("measureComponent.metric")), /*#__PURE__*/React.createElement("option", {
+          value: "imperial"
+        }, LocaleUtils.tr("measureComponent.imperial")), /*#__PURE__*/React.createElement("option", {
+          value: "m"
+        }, "m"), /*#__PURE__*/React.createElement("option", {
+          value: "km"
+        }, "km"), /*#__PURE__*/React.createElement("option", {
+          value: "ft"
+        }, "ft"), /*#__PURE__*/React.createElement("option", {
+          value: "mi"
+        }, "mi"));
+      } else if (_this.props.measureState.geomType === "Polygon") {
+        var area = _this.props.measureState.area || 0;
+        text = MeasureUtils.formatMeasurement(area, true, _this.props.measureState.areaUnit);
+        unitSelector = /*#__PURE__*/React.createElement("select", {
+          onChange: _this.changeAreaUnit,
+          value: _this.props.measureState.areaUnit
+        }, /*#__PURE__*/React.createElement("option", {
+          value: "metric"
+        }, LocaleUtils.tr("measureComponent.metric")), /*#__PURE__*/React.createElement("option", {
+          value: "imperial"
+        }, LocaleUtils.tr("measureComponent.imperial")), /*#__PURE__*/React.createElement("option", {
+          value: "sqm"
+        }, "m\xB2"), /*#__PURE__*/React.createElement("option", {
+          value: "ha"
+        }, "ha"), /*#__PURE__*/React.createElement("option", {
+          value: "sqkm"
+        }, "km\xB2"), /*#__PURE__*/React.createElement("option", {
+          value: "sqft"
+        }, "ft\xB2"), /*#__PURE__*/React.createElement("option", {
+          value: "acre"
+        }, "acre"), /*#__PURE__*/React.createElement("option", {
+          value: "sqmi"
+        }, "mi\xB2"));
+      } else if (_this.props.measureState.geomType === "Bearing") {
+        text = MeasureUtils.getFormattedBearingValue(_this.props.measureState.bearing);
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "measure-result controlgroup"
+      }, /*#__PURE__*/React.createElement("input", {
+        className: "measure-result-field",
+        readOnly: true,
+        type: "text",
+        value: text
+      }), unitSelector, /*#__PURE__*/React.createElement(CopyButton, {
+        text: text
+      }));
+    });
+    _defineProperty(_this, "renderBody", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "measure-body"
+      }, _this.renderModeSwitcher(), _this.renderResult());
+    });
+    return _this;
+  }
+  _inherits(Measure, _React$Component);
+  return _createClass(Measure, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(TaskBar, {
+        onHide: this.onHide,
+        onShow: this.onShow,
+        task: "Measure"
+      }, function () {
+        return {
+          body: _this2.renderBody()
+        };
+      });
+    }
+  }]);
+}(React.Component);
+_defineProperty(Measure, "propTypes", {
+  /** Head marker of bearing line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */
+  bearingHeadMarker: PropTypes.string,
+  /** Tail marker of bearing line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */
+  bearingTailMarker: PropTypes.string,
+  changeMeasurementState: PropTypes.func,
+  displayCrs: PropTypes.string,
+  /** Head marker of distance line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */
+  lineHeadMarker: PropTypes.string,
+  /** Tail marker of distance line measurement geometry. Can be one of `OUTARROW`, `INARROW`, `LINE`. */
+  lineTailMarker: PropTypes.string,
+  mapCrs: PropTypes.string,
+  measureState: PropTypes.object,
+  setSnappingConfig: PropTypes.func,
+  /** Whether to show the widget to switch between measure modes. */
+  showMeasureModeSwitcher: PropTypes.bool,
+  /** Whether snapping is available when editing. */
+  snapping: PropTypes.bool,
+  /** Whether snapping is enabled by default when editing.
+   *  Either `false`, `edge`, `vertex` or `true` (i.e. both vertex and edge). */
+  snappingActive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+});
+_defineProperty(Measure, "defaultProps", {
+  showMeasureModeSwitcher: true,
+  snapping: true,
+  snappingActive: true
+});
+export default connect(function (state) {
+  return {
+    measureState: state.measurement,
+    mapCrs: state.map.projection,
+    displayCrs: state.map.displayCrs
+  };
+}, {
+  changeMeasurementState: changeMeasurementState,
+  setSnappingConfig: setSnappingConfig
+})(Measure);