qwc2 2025.10.9 → 2025.10.14

package/plugins/map/LocateSupport.js

@@ -1,4 +1,20 @@
-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 2015 GeoSolutions Sas
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
@@ -6,7 +22,247 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * 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 ol from"openlayers";import PropTypes from"prop-types";import{changeLocateState,changeLocatePosition,onLocateError}from"../../actions/locate";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import"./style/LocateSupport.css";/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import ol from 'openlayers';
+import PropTypes from 'prop-types';
+import { changeLocateState, changeLocatePosition, onLocateError } from '../../actions/locate';
+import CoordinatesUtils from '../../utils/CoordinatesUtils';
+import LocaleUtils from '../../utils/LocaleUtils';
+import './style/LocateSupport.css';
+
+/**
  * GPS locate support for the map component.
- */var LocateSupport=/*#__PURE__*/function(_React$Component){function LocateSupport(props){var _this;_classCallCheck(this,LocateSupport);_this=_callSuper(this,LocateSupport,[props]);_defineProperty(_this,"onLocationError",function(err){_this.props.onLocateError(err.message);// User denied geolocation prompt
-if(err.code===1){_this.props.changeLocateState("PERMISSION_DENIED")}else{_this.props.changeLocateState("DISABLED")}_this.stop()});_defineProperty(_this,"start",function(){_this.props.changeLocateState("LOCATING");_this.geolocate.on("change:position",_this.positionChanged);_this.geolocate.on("error",_this.onLocationError);_this.geolocate.setTracking(true);_this.props.map.addLayer(_this.posLayer);_this.props.map.addOverlay(_this.posOverlay);_this.props.map.on("pointerdrag",_this.maybeStopFollow);_this.props.map.on("click",_this.maybeShowPopup);_this.props.map.on("touch",_this.maybeShowPopup);_this.posPopup.hidden=true;_this.posLayer.setVisible(false)});_defineProperty(_this,"stop",function(){_this.geolocate.un("change:position",_this.positionChanged);_this.geolocate.un("error",_this.onLocationError);_this.geolocate.setTracking(false);_this.props.map.removeLayer(_this.posLayer);_this.props.map.removeOverlay(_this.posOverlay);_this.props.map.un("pointerdrag",_this.maybeStopFollow);_this.props.map.un("click",_this.maybeShowPopup);_this.props.map.un("touch",_this.maybeShowPopup)});_defineProperty(_this,"positionChanged",function(){if(_this.props.locateState.state==="LOCATING"){_this.props.changeLocateState(_this.requestedMode);_this.posLayer.setVisible(true)}var mapPos=_this.geolocate.getPosition();var wgsPos=CoordinatesUtils.reproject(mapPos,_this.props.projection,"EPSG:4326");_this.props.changeLocatePosition(wgsPos);var point=new ol.geom.Point(mapPos);if(_this.props.drawCircle){var circle=new ol.geom.Circle(mapPos,_this.geolocate.getAccuracy());_this.posFeature.setGeometry(new ol.geom.GeometryCollection([point,circle]))}else{_this.posFeature.setGeometry(point)}if(!_this.posPopup.hidden){_this.updatePopupContents()}if(_this.props.locateState.state==="FOLLOWING"){_this.props.map.getView().setCenter(mapPos)}});_defineProperty(_this,"maybeStopFollow",function(){if(_this.props.locateState.state==="FOLLOWING"&&_this.props.stopFollowingOnDrag){_this.props.changeLocateState("ENABLED")}});_defineProperty(_this,"maybeShowPopup",function(ev){if(_this.props.showPopup){var feature=_this.props.map.getFeaturesAtPixel(ev.pixel,{layerFilter:function layerFilter(layer){return layer===_this.posLayer}})[0];if(feature){_this.posPopup.hidden=false;_this.updatePopupContents();ev.stopPropagation()}else{_this.posPopup.hidden=true}}});_defineProperty(_this,"updatePopupContents",function(){var accuracy=_this.geolocate.getAccuracy();var contents=LocaleUtils.tr("locate.popup");if(_this.props.metric){contents=contents.replace("{distance}",accuracy);contents=contents.replace("{unit}",LocaleUtils.tr("locate.metersUnit"))}else{contents=contents.replace("{distance}",Math.round(accuracy*3.2808399));contents=contents.replace("{unit}",LocaleUtils.tr("locate.feetUnit"))}_this.posOverlayContents.innerHTML=contents;_this.posOverlay.setPosition(_this.posFeature.getGeometry().getGeometries()[0].getCoordinates())});_defineProperty(_this,"locationPositionFeatureStyle",function(){return new ol.style.Style({image:new ol.style.Circle({radius:6,fill:new ol.style.Fill({color:"rgba(42, 147, 238, 0.7)"}),stroke:new ol.style.Stroke({color:"rgba(19, 106, 236, 1)",width:2})}),fill:new ol.style.Fill({color:"rgba(19, 106, 236, 0.15)"}),stroke:new ol.style.Stroke({color:"rgba(19, 106, 236, 1)",width:2})})});_defineProperty(_this,"createPopup",function(){var popup=document.createElement("div");popup.className="locate-popup";popup.innerHTML="\n          <a class=\"locate-popup-close\">\u2716</a>\n          <div class=\"locate-popup-contents\">\n        ";return popup});var trackingOptions=_objectSpread(_objectSpread({},LocateSupport.defaultProps.trackingOptions),props.trackingOptions);_this.geolocate=new ol.Geolocation({projection:_this.props.projection,trackingOptions:trackingOptions});_this.posLayer=new ol.layer.Vector({source:new ol.source.Vector,zIndex:1000000,style:_this.locationPositionFeatureStyle});_this.posFeature=new ol.Feature;_this.posFeature.set("__suppress_map_click",true);_this.posLayer.getSource().addFeature(_this.posFeature);_this.posPopup=_this.createPopup();_this.posOverlay=new ol.Overlay({element:_this.posPopup,positioning:"top-center",stopEvent:true});_this.posOverlayContents=_this.posPopup.getElementsByClassName("locate-popup-contents")[0];_this.posPopup.getElementsByClassName("locate-popup-close")[0].onclick=function(){_this.posPopup.hidden=true};_this.requestedMode="DISABLED";return _this}_inherits(LocateSupport,_React$Component);return _createClass(LocateSupport,[{key:"componentDidMount",value:function componentDidMount(){var startupMode=this.props.startupMode.toUpperCase();var startupParams=this.props.startupParams;var highlightCenter=["true","1"].includes((startupParams.hc||"").toLowerCase());var searchParams=startupParams.hp||startupParams.hf||startupParams.st;if(startupMode!=="DISABLED"&&!searchParams&&!highlightCenter){this.requestedMode=startupMode;this.start()}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var newState=this.props.locateState.state;var oldState=prevProps.locateState.state;if(newState!==oldState){if(newState==="ENABLED"||newState==="FOLLOWING"){this.requestedMode=newState;if(oldState==="DISABLED"){this.start()}}else if(newState==="DISABLED"){this.requestedMode="DISABLED";this.stop()}}if(this.props.projection!==prevProps.projection){this.geolocate.setProjection(this.props.projection)}}},{key:"render",value:function render(){return null}}])}(React.Component);_defineProperty(LocateSupport,"propTypes",{changeLocatePosition:PropTypes.func,changeLocateState:PropTypes.func,/** Whether to draw an accuracy circle around the location point. */drawCircle:PropTypes.bool,locateState:PropTypes.object,map:PropTypes.object,/** Whether to display the accuracy in meters (`true`) or in feet (`false`). */metric:PropTypes.bool,onLocateError:PropTypes.func,projection:PropTypes.string,/** Whether to show a popup displaying accuracy information when clicking on the location point. */showPopup:PropTypes.bool,/** The geolocation startup mode. Either `DISABLED`, `ENABLED` or `FOLLOWING`. */startupMode:PropTypes.string,startupParams:PropTypes.object,/** Whether to stop following when the map is dragged. */stopFollowingOnDrag:PropTypes.bool,/** Tracking options, as documented in the [HTML5 Geolocation spec](https://www.w3.org/TR/geolocation-API/#position_options_interface) */trackingOptions:PropTypes.object});_defineProperty(LocateSupport,"defaultProps",{drawCircle:true,metric:true,showPopup:false,startupMode:"DISABLED",stopFollowingOnDrag:false,trackingOptions:{maximumAge:2000,enableHighAccuracy:true,timeout:10000}});export default connect(function(state){return{locateState:state.locate,startupParams:state.localConfig.startupParams}},{changeLocateState:changeLocateState,changeLocatePosition:changeLocatePosition,onLocateError:onLocateError})(LocateSupport);
+ */
+var LocateSupport = /*#__PURE__*/function (_React$Component) {
+  function LocateSupport(props) {
+    var _this;
+    _classCallCheck(this, LocateSupport);
+    _this = _callSuper(this, LocateSupport, [props]);
+    _defineProperty(_this, "onLocationError", function (err) {
+      _this.props.onLocateError(err.message);
+      // User denied geolocation prompt
+      if (err.code === 1) {
+        _this.props.changeLocateState("PERMISSION_DENIED");
+      } else {
+        _this.props.changeLocateState("DISABLED");
+      }
+      _this.stop();
+    });
+    _defineProperty(_this, "start", function () {
+      _this.props.changeLocateState("LOCATING");
+      _this.geolocate.on('change:position', _this.positionChanged);
+      _this.geolocate.on('error', _this.onLocationError);
+      _this.geolocate.setTracking(true);
+      _this.props.map.addLayer(_this.posLayer);
+      _this.props.map.addOverlay(_this.posOverlay);
+      _this.props.map.on('pointerdrag', _this.maybeStopFollow);
+      _this.props.map.on('click', _this.maybeShowPopup);
+      _this.props.map.on('touch', _this.maybeShowPopup);
+      _this.posPopup.hidden = true;
+      _this.posLayer.setVisible(false);
+    });
+    _defineProperty(_this, "stop", function () {
+      _this.geolocate.un('change:position', _this.positionChanged);
+      _this.geolocate.un('error', _this.onLocationError);
+      _this.geolocate.setTracking(false);
+      _this.props.map.removeLayer(_this.posLayer);
+      _this.props.map.removeOverlay(_this.posOverlay);
+      _this.props.map.un('pointerdrag', _this.maybeStopFollow);
+      _this.props.map.un('click', _this.maybeShowPopup);
+      _this.props.map.un('touch', _this.maybeShowPopup);
+    });
+    _defineProperty(_this, "positionChanged", function () {
+      if (_this.props.locateState.state === "LOCATING") {
+        _this.props.changeLocateState(_this.requestedMode);
+        _this.posLayer.setVisible(true);
+      }
+      var mapPos = _this.geolocate.getPosition();
+      var wgsPos = CoordinatesUtils.reproject(mapPos, _this.props.projection, "EPSG:4326");
+      _this.props.changeLocatePosition(wgsPos);
+      var point = new ol.geom.Point(mapPos);
+      if (_this.props.drawCircle) {
+        var circle = new ol.geom.Circle(mapPos, _this.geolocate.getAccuracy());
+        _this.posFeature.setGeometry(new ol.geom.GeometryCollection([point, circle]));
+      } else {
+        _this.posFeature.setGeometry(point);
+      }
+      if (!_this.posPopup.hidden) {
+        _this.updatePopupContents();
+      }
+      if (_this.props.locateState.state === "FOLLOWING") {
+        _this.props.map.getView().setCenter(mapPos);
+      }
+    });
+    _defineProperty(_this, "maybeStopFollow", function () {
+      if (_this.props.locateState.state === "FOLLOWING" && _this.props.stopFollowingOnDrag) {
+        _this.props.changeLocateState("ENABLED");
+      }
+    });
+    _defineProperty(_this, "maybeShowPopup", function (ev) {
+      if (_this.props.showPopup) {
+        var feature = _this.props.map.getFeaturesAtPixel(ev.pixel, {
+          layerFilter: function layerFilter(layer) {
+            return layer === _this.posLayer;
+          }
+        })[0];
+        if (feature) {
+          _this.posPopup.hidden = false;
+          _this.updatePopupContents();
+          ev.stopPropagation();
+        } else {
+          _this.posPopup.hidden = true;
+        }
+      }
+    });
+    _defineProperty(_this, "updatePopupContents", function () {
+      var accuracy = _this.geolocate.getAccuracy();
+      var contents = LocaleUtils.tr("locate.popup");
+      if (_this.props.metric) {
+        contents = contents.replace("{distance}", accuracy);
+        contents = contents.replace("{unit}", LocaleUtils.tr("locate.metersUnit"));
+      } else {
+        contents = contents.replace("{distance}", Math.round(accuracy * 3.2808399));
+        contents = contents.replace("{unit}", LocaleUtils.tr("locate.feetUnit"));
+      }
+      _this.posOverlayContents.innerHTML = contents;
+      _this.posOverlay.setPosition(_this.posFeature.getGeometry().getGeometries()[0].getCoordinates());
+    });
+    _defineProperty(_this, "locationPositionFeatureStyle", function () {
+      return new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 6,
+          fill: new ol.style.Fill({
+            color: 'rgba(42, 147, 238, 0.7)'
+          }),
+          stroke: new ol.style.Stroke({
+            color: 'rgba(19, 106, 236, 1)',
+            width: 2
+          })
+        }),
+        fill: new ol.style.Fill({
+          color: 'rgba(19, 106, 236, 0.15)'
+        }),
+        stroke: new ol.style.Stroke({
+          color: 'rgba(19, 106, 236, 1)',
+          width: 2
+        })
+      });
+    });
+    _defineProperty(_this, "createPopup", function () {
+      var popup = document.createElement('div');
+      popup.className = "locate-popup";
+      popup.innerHTML = "\n          <a class=\"locate-popup-close\">\u2716</a>\n          <div class=\"locate-popup-contents\">\n        ";
+      return popup;
+    });
+    var trackingOptions = _objectSpread(_objectSpread({}, LocateSupport.defaultProps.trackingOptions), props.trackingOptions);
+    _this.geolocate = new ol.Geolocation({
+      projection: _this.props.projection,
+      trackingOptions: trackingOptions
+    });
+    _this.posLayer = new ol.layer.Vector({
+      source: new ol.source.Vector(),
+      zIndex: 1000000,
+      style: _this.locationPositionFeatureStyle
+    });
+    _this.posFeature = new ol.Feature();
+    _this.posFeature.set('__suppress_map_click', true);
+    _this.posLayer.getSource().addFeature(_this.posFeature);
+    _this.posPopup = _this.createPopup();
+    _this.posOverlay = new ol.Overlay({
+      element: _this.posPopup,
+      positioning: 'top-center',
+      stopEvent: true
+    });
+    _this.posOverlayContents = _this.posPopup.getElementsByClassName("locate-popup-contents")[0];
+    _this.posPopup.getElementsByClassName("locate-popup-close")[0].onclick = function () {
+      _this.posPopup.hidden = true;
+    };
+    _this.requestedMode = 'DISABLED';
+    return _this;
+  }
+  _inherits(LocateSupport, _React$Component);
+  return _createClass(LocateSupport, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var startupMode = this.props.startupMode.toUpperCase();
+      var startupParams = this.props.startupParams;
+      var highlightCenter = ["true", "1"].includes((startupParams.hc || "").toLowerCase());
+      var searchParams = startupParams.hp || startupParams.hf || startupParams.st;
+      if (startupMode !== "DISABLED" && !searchParams && !highlightCenter) {
+        this.requestedMode = startupMode;
+        this.start();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var newState = this.props.locateState.state;
+      var oldState = prevProps.locateState.state;
+      if (newState !== oldState) {
+        if (newState === "ENABLED" || newState === "FOLLOWING") {
+          this.requestedMode = newState;
+          if (oldState === "DISABLED") {
+            this.start();
+          }
+        } else if (newState === "DISABLED") {
+          this.requestedMode = "DISABLED";
+          this.stop();
+        }
+      }
+      if (this.props.projection !== prevProps.projection) {
+        this.geolocate.setProjection(this.props.projection);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(LocateSupport, "propTypes", {
+  changeLocatePosition: PropTypes.func,
+  changeLocateState: PropTypes.func,
+  /** Whether to draw an accuracy circle around the location point. */
+  drawCircle: PropTypes.bool,
+  locateState: PropTypes.object,
+  map: PropTypes.object,
+  /** Whether to display the accuracy in meters (`true`) or in feet (`false`). */
+  metric: PropTypes.bool,
+  onLocateError: PropTypes.func,
+  projection: PropTypes.string,
+  /** Whether to show a popup displaying accuracy information when clicking on the location point. */
+  showPopup: PropTypes.bool,
+  /** The geolocation startup mode. Either `DISABLED`, `ENABLED` or `FOLLOWING`. */
+  startupMode: PropTypes.string,
+  startupParams: PropTypes.object,
+  /** Whether to stop following when the map is dragged. */
+  stopFollowingOnDrag: PropTypes.bool,
+  /** Tracking options, as documented in the [HTML5 Geolocation spec](https://www.w3.org/TR/geolocation-API/#position_options_interface) */
+  trackingOptions: PropTypes.object
+});
+_defineProperty(LocateSupport, "defaultProps", {
+  drawCircle: true,
+  metric: true,
+  showPopup: false,
+  startupMode: "DISABLED",
+  stopFollowingOnDrag: false,
+  trackingOptions: {
+    maximumAge: 2000,
+    enableHighAccuracy: true,
+    timeout: 10000
+  }
+});
+export default connect(function (state) {
+  return {
+    locateState: state.locate,
+    startupParams: state.localConfig.startupParams
+  };
+}, {
+  changeLocateState: changeLocateState,
+  changeLocatePosition: changeLocatePosition,
+  onLocateError: onLocateError
+})(LocateSupport);

package/plugins/map/MeasurementSupport.js

@@ -1,15 +1,223 @@
-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 _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 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 _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 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 GeoSolutions Sas
  * 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 ol from"openlayers";import PropTypes from"prop-types";import{changeMeasurementState}from"../../actions/measurement";import FeatureStyles from"../../utils/FeatureStyles";import MeasureUtils from"../../utils/MeasureUtils";/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import ol from 'openlayers';
+import PropTypes from 'prop-types';
+import { changeMeasurementState } from '../../actions/measurement';
+import FeatureStyles from '../../utils/FeatureStyles';
+import MeasureUtils from '../../utils/MeasureUtils';
+
+/**
  * Measurement support for the map component.
- */var MeasurementSupport=/*#__PURE__*/function(_React$Component){function MeasurementSupport(props){var _this;_classCallCheck(this,MeasurementSupport);_this=_callSuper(this,MeasurementSupport,[props]);_defineProperty(_this,"addDrawInteraction",function(newProps){_this.reset();// Create a layer to draw on
-_this.measureLayer=new ol.layer.Vector({source:new ol.source.Vector,zIndex:1000000});_this.props.map.addLayer(_this.measureLayer);var geometryType=newProps.measurement.geomType;if(geometryType==="Bearing"){geometryType="LineString"}// create an interaction to draw with
-_this.drawInteraction=new ol.interaction.Draw({stopClick:true,source:_this.measureLayer.getSource(),condition:function condition(event){return event.originalEvent.buttons===1},type:geometryType,style:function style(){return _this.modifyInteraction?[]:FeatureStyles.sketchInteraction()}});_this.drawInteraction.on("drawstart",function(ev){_this.leaveTemporaryPickMode();_this.measureLayer.getSource().clear();_this.sketchFeature=ev.feature;_this.sketchFeature.setStyle(_this.featureStyleFunction);_this.sketchFeature.on("change",function(evt){return _this.updateMeasurementResults(evt.target)})});_this.drawInteraction.on("drawend",function(){_this.updateMeasurementResults(_this.sketchFeature,false);_this.enterTemporaryPickMode()});_this.props.map.addInteraction(_this.drawInteraction)});_defineProperty(_this,"reset",function(){if(_this.drawInteraction!==null){_this.props.map.removeInteraction(_this.drawInteraction);_this.drawInteraction=null;_this.leaveTemporaryPickMode();_this.props.map.removeLayer(_this.measureLayer);_this.measureLayer=null;_this.sketchFeature=null}});_defineProperty(_this,"enterTemporaryPickMode",function(){_this.modifyInteraction=new ol.interaction.Modify({features:new ol.Collection([_this.sketchFeature]),condition:function condition(event){return event.originalEvent.buttons===1},insertVertexCondition:function insertVertexCondition(){return _this.props.measurement.geomType==="Bearing"?false:true},deleteCondition:function deleteCondition(event){return ol.events.condition.shiftKeyOnly(event)&&ol.events.condition.singleClick(event)},style:function style(feature){// Hack to get cursor position over geometry...
-if(_this.props.measurement.pickPositionCallback){clearTimeout(_this.pickPositionCallbackTimeout);_this.props.measurement.pickPositionCallback(feature.getGeometry().getCoordinates())}return FeatureStyles.sketchInteraction()}});_this.props.map.on("pointermove",_this.clearPickPosition);_this.modifyInteraction.on("modifyend",function(){_this.updateMeasurementResults(_this.sketchFeature,false)});_this.props.map.addInteraction(_this.modifyInteraction)});_defineProperty(_this,"leaveTemporaryPickMode",function(){if(_this.modifyInteraction){_this.props.map.un("pointermove",_this.clearPickPosition);_this.props.map.removeInteraction(_this.modifyInteraction);_this.modifyInteraction=null}});_defineProperty(_this,"clearPickPosition",function(){if(_this.props.measurement.pickPositionCallback){clearTimeout(_this.pickPositionCallbackTimeout);// Works because style function clears timeout if marker is rendered, i.e. if mouse is over measure geometry
-_this.pickPositionCallbackTimeout=setTimeout(function(){if(_this.props.measurement.pickPositionCallback){_this.props.measurement.pickPositionCallback(null)}},50)}});_defineProperty(_this,"updateMeasurementResults",function(feature){var drawing=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var geomType=_this.props.measurement.geomType;var settings={lenUnit:_this.props.measurement.lenUnit,areaUnit:_this.props.measurement.areaUnit,displayCrs:_this.props.displayCrs};MeasureUtils.updateFeatureMeasurements(feature,geomType,_this.props.projection,settings);// Only one segment for bearing measurement
-if(geomType==="Bearing"&&feature.getGeometry().getCoordinates().length>2){_this.drawInteraction.finishDrawing()}_this.measureLayer.getSource().changed();_this.props.changeMeasurementState(_objectSpread({geomType:_this.props.measurement.geomType,drawing:drawing,coordinates:feature.getGeometry().getCoordinates()},structuredClone(feature.get("measurements"))))});_defineProperty(_this,"featureStyleFunction",function(feature){var geometryFunction=function geometryFunction(f){if(f.getGeometry().getType()==="Point"){return new ol.geom.MultiPoint([f.getGeometry().getCoordinates()])}else if(f.getGeometry().getType()==="LineString"){return new ol.geom.MultiPoint(f.getGeometry().getCoordinates())}return new ol.geom.MultiPoint(f.getGeometry().getCoordinates()[0])};var opts={};if(_this.props.measurement.geomType==="LineString"){opts.headmarker=_this.props.measurement.lineHeadMarker;opts.tailmarker=_this.props.measurement.lineHeadMarker}else if(_this.props.measurement.geomType==="Bearing"){opts.headmarker=_this.props.measurement.bearingHeadMarker;opts.tailmarker=_this.props.measurement.bearingHeadMarker}return[].concat(_toConsumableArray(FeatureStyles.measureInteraction(feature,opts)),[FeatureStyles.measureInteractionVertex({geometryFunction:geometryFunction})])});_this.pickPositionCallbackTimeout=null;_this.measureLayer=null;return _this}_inherits(MeasurementSupport,_React$Component);return _createClass(MeasurementSupport,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.measurement.geomType&&this.props.measurement.geomType!==prevProps.measurement.geomType){this.addDrawInteraction(this.props)}else if(!this.props.measurement.geomType){this.reset()}else if(this.sketchFeature&&(this.props.measurement.lenUnit!==prevProps.measurement.lenUnit||this.props.measurement.areaUnit!==prevProps.measurement.areaUnit||this.props.displayCrs!==prevProps.displayCrs)){this.updateMeasurementResults(this.sketchFeature,this.props.measurement.drawing)}}},{key:"render",value:function render(){return null}}])}(React.Component);_defineProperty(MeasurementSupport,"propTypes",{changeMeasurementState:PropTypes.func,displayCrs:PropTypes.string,map:PropTypes.object,measurement:PropTypes.object,projection:PropTypes.string});export default connect(function(state){return{displayCrs:state.map.displayCrs,measurement:state.measurement}},{changeMeasurementState:changeMeasurementState})(MeasurementSupport);
+ */
+var MeasurementSupport = /*#__PURE__*/function (_React$Component) {
+  function MeasurementSupport(props) {
+    var _this;
+    _classCallCheck(this, MeasurementSupport);
+    _this = _callSuper(this, MeasurementSupport, [props]);
+    _defineProperty(_this, "addDrawInteraction", function (newProps) {
+      _this.reset();
+
+      // Create a layer to draw on
+      _this.measureLayer = new ol.layer.Vector({
+        source: new ol.source.Vector(),
+        zIndex: 1000000
+      });
+      _this.props.map.addLayer(_this.measureLayer);
+      var geometryType = newProps.measurement.geomType;
+      if (geometryType === 'Bearing') {
+        geometryType = 'LineString';
+      }
+
+      // create an interaction to draw with
+      _this.drawInteraction = new ol.interaction.Draw({
+        stopClick: true,
+        source: _this.measureLayer.getSource(),
+        condition: function condition(event) {
+          return event.originalEvent.buttons === 1;
+        },
+        type: geometryType,
+        style: function style() {
+          return _this.modifyInteraction ? [] : FeatureStyles.sketchInteraction();
+        }
+      });
+      _this.drawInteraction.on('drawstart', function (ev) {
+        _this.leaveTemporaryPickMode();
+        _this.measureLayer.getSource().clear();
+        _this.sketchFeature = ev.feature;
+        _this.sketchFeature.setStyle(_this.featureStyleFunction);
+        _this.sketchFeature.on('change', function (evt) {
+          return _this.updateMeasurementResults(evt.target);
+        });
+      });
+      _this.drawInteraction.on('drawend', function () {
+        _this.updateMeasurementResults(_this.sketchFeature, false);
+        _this.enterTemporaryPickMode();
+      });
+      _this.props.map.addInteraction(_this.drawInteraction);
+    });
+    _defineProperty(_this, "reset", function () {
+      if (_this.drawInteraction !== null) {
+        _this.props.map.removeInteraction(_this.drawInteraction);
+        _this.drawInteraction = null;
+        _this.leaveTemporaryPickMode();
+        _this.props.map.removeLayer(_this.measureLayer);
+        _this.measureLayer = null;
+        _this.sketchFeature = null;
+      }
+    });
+    _defineProperty(_this, "enterTemporaryPickMode", function () {
+      _this.modifyInteraction = new ol.interaction.Modify({
+        features: new ol.Collection([_this.sketchFeature]),
+        condition: function condition(event) {
+          return event.originalEvent.buttons === 1;
+        },
+        insertVertexCondition: function insertVertexCondition() {
+          return _this.props.measurement.geomType === 'Bearing' ? false : true;
+        },
+        deleteCondition: function deleteCondition(event) {
+          return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
+        },
+        style: function style(feature) {
+          // Hack to get cursor position over geometry...
+          if (_this.props.measurement.pickPositionCallback) {
+            clearTimeout(_this.pickPositionCallbackTimeout);
+            _this.props.measurement.pickPositionCallback(feature.getGeometry().getCoordinates());
+          }
+          return FeatureStyles.sketchInteraction();
+        }
+      });
+      _this.props.map.on('pointermove', _this.clearPickPosition);
+      _this.modifyInteraction.on('modifyend', function () {
+        _this.updateMeasurementResults(_this.sketchFeature, false);
+      });
+      _this.props.map.addInteraction(_this.modifyInteraction);
+    });
+    _defineProperty(_this, "leaveTemporaryPickMode", function () {
+      if (_this.modifyInteraction) {
+        _this.props.map.un('pointermove', _this.clearPickPosition);
+        _this.props.map.removeInteraction(_this.modifyInteraction);
+        _this.modifyInteraction = null;
+      }
+    });
+    _defineProperty(_this, "clearPickPosition", function () {
+      if (_this.props.measurement.pickPositionCallback) {
+        clearTimeout(_this.pickPositionCallbackTimeout);
+        // Works because style function clears timeout if marker is rendered, i.e. if mouse is over measure geometry
+        _this.pickPositionCallbackTimeout = setTimeout(function () {
+          if (_this.props.measurement.pickPositionCallback) {
+            _this.props.measurement.pickPositionCallback(null);
+          }
+        }, 50);
+      }
+    });
+    _defineProperty(_this, "updateMeasurementResults", function (feature) {
+      var drawing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var geomType = _this.props.measurement.geomType;
+      var settings = {
+        lenUnit: _this.props.measurement.lenUnit,
+        areaUnit: _this.props.measurement.areaUnit,
+        displayCrs: _this.props.displayCrs
+      };
+      MeasureUtils.updateFeatureMeasurements(feature, geomType, _this.props.projection, settings);
+
+      // Only one segment for bearing measurement
+      if (geomType === 'Bearing' && feature.getGeometry().getCoordinates().length > 2) {
+        _this.drawInteraction.finishDrawing();
+      }
+      _this.measureLayer.getSource().changed();
+      _this.props.changeMeasurementState(_objectSpread({
+        geomType: _this.props.measurement.geomType,
+        drawing: drawing,
+        coordinates: feature.getGeometry().getCoordinates()
+      }, structuredClone(feature.get('measurements'))));
+    });
+    _defineProperty(_this, "featureStyleFunction", function (feature) {
+      var geometryFunction = function geometryFunction(f) {
+        if (f.getGeometry().getType() === "Point") {
+          return new ol.geom.MultiPoint([f.getGeometry().getCoordinates()]);
+        } else if (f.getGeometry().getType() === "LineString") {
+          return new ol.geom.MultiPoint(f.getGeometry().getCoordinates());
+        }
+        return new ol.geom.MultiPoint(f.getGeometry().getCoordinates()[0]);
+      };
+      var opts = {};
+      if (_this.props.measurement.geomType === 'LineString') {
+        opts.headmarker = _this.props.measurement.lineHeadMarker;
+        opts.tailmarker = _this.props.measurement.lineHeadMarker;
+      } else if (_this.props.measurement.geomType === 'Bearing') {
+        opts.headmarker = _this.props.measurement.bearingHeadMarker;
+        opts.tailmarker = _this.props.measurement.bearingHeadMarker;
+      }
+      return [].concat(_toConsumableArray(FeatureStyles.measureInteraction(feature, opts)), [FeatureStyles.measureInteractionVertex({
+        geometryFunction: geometryFunction
+      })]);
+    });
+    _this.pickPositionCallbackTimeout = null;
+    _this.measureLayer = null;
+    return _this;
+  }
+  _inherits(MeasurementSupport, _React$Component);
+  return _createClass(MeasurementSupport, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.measurement.geomType && this.props.measurement.geomType !== prevProps.measurement.geomType) {
+        this.addDrawInteraction(this.props);
+      } else if (!this.props.measurement.geomType) {
+        this.reset();
+      } else if (this.sketchFeature && (this.props.measurement.lenUnit !== prevProps.measurement.lenUnit || this.props.measurement.areaUnit !== prevProps.measurement.areaUnit || this.props.displayCrs !== prevProps.displayCrs)) {
+        this.updateMeasurementResults(this.sketchFeature, this.props.measurement.drawing);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(MeasurementSupport, "propTypes", {
+  changeMeasurementState: PropTypes.func,
+  displayCrs: PropTypes.string,
+  map: PropTypes.object,
+  measurement: PropTypes.object,
+  projection: PropTypes.string
+});
+export default connect(function (state) {
+  return {
+    displayCrs: state.map.displayCrs,
+    measurement: state.measurement
+  };
+}, {
+  changeMeasurementState: changeMeasurementState
+})(MeasurementSupport);