qwc2 2025.12.17 → 2025.12.19

package/plugins/ObliqueView.js

@@ -1,4 +1,6 @@
 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; }
@@ -23,15 +25,18 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
+import isEqual from 'lodash.isequal';
 import ol from 'openlayers';
 import PropTypes from 'prop-types';
+import { zoomToExtent } from '../actions/map';
 import { setCurrentTask } from '../actions/task';
 import Icon from '../components/Icon';
+import OverviewMapButton from '../components/OverviewMapButton';
 import ResizeableWindow from '../components/ResizeableWindow';
-import LayerRegistry from '../components/map/layers/index';
+import OlLayer from '../components/map/OlLayer';
 import InputContainer from '../components/widgets/InputContainer';
 import ConfigUtils from '../utils/ConfigUtils';
-import LayerUtils from '../utils/LayerUtils';
+import CoordinatesUtils from '../utils/CoordinatesUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
 import MiscUtils from '../utils/MiscUtils';
@@ -39,6 +44,27 @@ import './style/ObliqueView.css';
 
 /**
  * Display oblique satellite imagery.
+ *
+ * Requires `obliqueImageryServiceUrl` in `config.json` to point to a `qwc-oblique-imagery-service`.
+ *
+ * You can configure oblique imagery datasets in the `obliqueDatasets` entry in a QWC theme configuration as follows:
+ * ```
+ * {
+ *   ...
+ *   "obliqueDatasets": [{
+ *     {
+ *       "name": "<dataset_name>",
+ *       "default": <false|true>,
+ *       "backgroundLayer": "<background_layer_name>",
+ *       "backgroundOpacity": <0-255>,
+ *       "title": "<dataset_title>",
+ *       "titleMsgId": "<dataset_title_msgid>"
+ *     },
+ *     ...
+ *   ]
+ * }
+ * ```
+ * where `dataset_name` is the the name of a dataset configured in the `qwc-oblique-imagery-service`.
  */
 var ObliqueView = /*#__PURE__*/function (_React$Component) {
   function ObliqueView(props) {
@@ -90,6 +116,9 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
           /* eslint-disable-next-line */
           console.warn("Failed to load dataset config");
         });
+      } else {
+        _this.obliqueImageryLayer.setSource(null);
+        _this.closestImage = null;
       }
     });
     _defineProperty(_this, "setupLayer", function () {
@@ -105,7 +134,6 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
       }, 0);
       _this.map.setView(new ol.View({
         projection: projection,
-        // extent: datasetConfig.extent,
         center: ol.extent.getCenter(datasetConfig.extent),
         rotation: _this.getRotation() / 180 * Math.PI,
         zoom: zoom,
@@ -116,53 +144,25 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         currentZoom: zoom
       });
-      _this.map.on('moveend', function () {
-        _this.setState(function (state) {
-          var newZoom = _this.map.getView().getZoom();
-          if (newZoom !== state.currentZoom) {
-            return {
-              currentZoom: newZoom
-            };
+      _this.obliqueImageryLayer.setSource(new ol.source.XYZ({
+        projection: projection,
+        tileGrid: new ol.tilegrid.TileGrid({
+          extent: datasetConfig.extent,
+          resolutions: datasetConfig.resolutions,
+          tileSize: datasetConfig.tileSize,
+          origin: datasetConfig.origin
+        }),
+        url: datasetConfig.url,
+        crossOrigin: "anonymous",
+        tileLoadFunction: function tileLoadFunction(tile, src) {
+          var _this$closestImage;
+          if (((_this$closestImage = _this.closestImage) !== null && _this$closestImage !== void 0 ? _this$closestImage : null) !== null) {
+            src += "?img=" + _this.closestImage;
           }
-          return null;
-        });
-      });
-      var layers = [];
-      var themeConfig = _this.props.theme.obliqueDatasets.find(function (entry) {
-        return entry.name === _this.state.selectedDataset;
-      });
-      if (themeConfig.backgroundLayer) {
-        var _themeConfig$backgrou;
-        var layerConfig = LayerUtils.splitLayerUrlParam(themeConfig.backgroundLayer);
-        layerConfig.version = _this.props.themes.defaultWMSVersion || "1.3.0";
-        layerConfig.opacity = (_themeConfig$backgrou = themeConfig.backgroundOpacity) !== null && _themeConfig$backgrou !== void 0 ? _themeConfig$backgrou : 127;
-        var layerCreator = LayerRegistry[layerConfig.type];
-        if (layerCreator) {
-          layers.push(layerCreator.create(layerConfig, _this.map));
+          tile.getImage().src = src.replace('{direction}', _this.state.currentDirection);
         }
-      }
-      _this.obliqueImageryLayer = new ol.layer.Tile({
-        source: new ol.source.XYZ({
-          projection: projection,
-          tileGrid: new ol.tilegrid.TileGrid({
-            extent: datasetConfig.extent,
-            resolutions: datasetConfig.resolutions,
-            tileSize: datasetConfig.tileSize,
-            origin: datasetConfig.origin
-          }),
-          url: datasetConfig.url,
-          crossOrigin: "anonymous",
-          tileLoadFunction: function tileLoadFunction(tile, src) {
-            var _this$closestImage;
-            if (((_this$closestImage = _this.closestImage) !== null && _this$closestImage !== void 0 ? _this$closestImage : null) !== null) {
-              src += "?img=" + _this.closestImage;
-            }
-            tile.getImage().src = src.replace('{direction}', _this.state.currentDirection);
-          }
-        })
-      });
-      layers.push(_this.obliqueImageryLayer);
-      _this.map.setLayers(layers);
+      }));
+      _this.searchClosestImage();
     });
     _defineProperty(_this, "searchClosestImage", function () {
       var _this$state$datasetCo;
@@ -198,6 +198,33 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         s: 180
       }[_this.state.currentDirection];
     });
+    _defineProperty(_this, "sync2DExtent", function () {
+      if (!_this.state.datasetConfig) {
+        return;
+      }
+      _this.setState(function (state) {
+        var center = CoordinatesUtils.reproject(_this.props.map.center, _this.props.map.projection, state.datasetConfig.crs);
+        var resolution = MapUtils.computeForZoom(_this.props.map.resolutions, _this.props.map.zoom);
+        _this.map.getView().setCenter(center);
+        _this.map.getView().setResolution(resolution);
+        return {
+          currentCenter: center,
+          currentZoom: _this.map.getView().getZoom()
+        };
+      });
+    });
+    _defineProperty(_this, "trackFocus", function (ev) {
+      var _this$map, _this$map$getTargetEl, _mapEl$contains, _mapObliqueEl$contain;
+      var mapEl = document.getElementById("map");
+      var mapObliqueEl = (_this$map = _this.map) === null || _this$map === void 0 || (_this$map$getTargetEl = _this$map.getTargetElement) === null || _this$map$getTargetEl === void 0 ? void 0 : _this$map$getTargetEl.call(_this$map);
+      if (mapEl !== null && mapEl !== void 0 && (_mapEl$contains = mapEl.contains) !== null && _mapEl$contains !== void 0 && _mapEl$contains.call(mapEl, document.activeElement)) {
+        _this.focusedMap = "map";
+      } else if (mapObliqueEl !== null && mapObliqueEl !== void 0 && (_mapObliqueEl$contain = mapObliqueEl.contains) !== null && _mapObliqueEl$contain !== void 0 && _mapObliqueEl$contain.call(mapObliqueEl, document.activeElement)) {
+        _this.focusedMap = "mapOblique";
+      } else {
+        _this.focusedMap = null;
+      }
+    });
     var controls = ol.control.defaults({
       zoom: false,
       attribution: false,
@@ -210,15 +237,40 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
       controls: controls,
       interactions: interactions
     });
-    _this.map.on('moveend', _this.searchClosestImage);
     _this.map.on('rotateend', _this.searchClosestImage);
+    _this.map.on('moveend', function () {
+      _this.searchClosestImage();
+      _this.setState(function (state) {
+        var newZoom = _this.map.getView().getZoom();
+        var newCenter = _this.map.getView().getCenter();
+        if (newZoom !== state.currentZoom || !isEqual(newCenter, state.currentCenter)) {
+          return {
+            currentZoom: newZoom,
+            currentCenter: newCenter
+          };
+        }
+        return null;
+      });
+    });
+    _this.obliqueImageryLayer = new ol.layer.Tile();
+    _this.map.addLayer(_this.obliqueImageryLayer);
     _this.closestImage = null;
-    _this.obliqueImageryLayer = null;
     _this.state = ObliqueView.defaultState;
+    _this.focusedMap = null;
     return _this;
   }
   _inherits(ObliqueView, _React$Component);
   return _createClass(ObliqueView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('focus', this.trackFocus, true);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('focus', this.trackFocus);
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (this.props.active && !prevProps.active) {
@@ -227,7 +279,7 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         });
         this.props.setCurrentTask(null);
       }
-      if (this.props.active && this.props.theme && this.props.theme !== prevProps.theme || this.props.active && !prevProps.active) {
+      if (this.state.active && this.props.theme && (this.props.theme !== prevProps.theme || !prevState.active)) {
         var _datasets$find$name, _datasets$find, _datasets$;
         var datasets = this.props.theme.obliqueDatasets || [];
         var defaultDataset = (_datasets$find$name = (_datasets$find = datasets.find(function (entry) {
@@ -240,8 +292,6 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         });
       }
       if (this.state.selectedDataset !== prevState.selectedDataset) {
-        this.closestImage = null;
-        this.obliqueImageryLayer = null;
         this.queryDatasetConfig();
       }
       if (this.state.datasetConfig && this.state.datasetConfig !== prevState.datasetConfig) {
@@ -256,17 +306,49 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         var _this$map$getView2, _this$map$getView2$se;
         (_this$map$getView2 = this.map.getView()) === null || _this$map$getView2 === void 0 || (_this$map$getView2$se = _this$map$getView2.setZoom) === null || _this$map$getView2$se === void 0 || _this$map$getView2$se.call(_this$map$getView2, this.state.currentZoom);
       }
+      if (this.state.viewsLocked && this.state.datasetConfig) {
+        if (this.focusedMap === "map" && this.props.map.bbox !== prevProps.map.bbox) {
+          this.sync2DExtent();
+        } else if (this.focusedMap === "mapOblique" && (this.state.currentCenter !== prevState.currentCenter || this.state.currentZoom !== prevState.currentZoom)) {
+          this.props.zoomToExtent(this.map.getView().calculateExtent(), this.state.datasetConfig.crs);
+        }
+      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this2 = this,
+        _obliqueConfig$backgr,
+        _this$state$selectedD;
       if (!this.state.active) {
         return null;
       }
       var rot = this.getRotation();
+      var extraControls = [{
+        icon: "sync",
+        callback: this.sync2DExtent,
+        title: LocaleUtils.tr("common.sync2dview")
+      }, {
+        icon: "lock",
+        callback: function callback() {
+          return _this2.setState(function (state) {
+            return {
+              viewsLocked: !state.viewsLocked
+            };
+          });
+        },
+        title: LocaleUtils.tr("common.lock2dview"),
+        active: this.state.viewsLocked
+      }];
+      var obliqueConfig = this.props.theme.obliqueDatasets.find(function (entry) {
+        return entry.name === _this2.state.selectedDataset;
+      });
+      var basemap = this.props.themes.backgroundLayers.find(function (entry) {
+        return entry.name === (obliqueConfig === null || obliqueConfig === void 0 ? void 0 : obliqueConfig.backgroundLayer);
+      });
       return /*#__PURE__*/React.createElement(ResizeableWindow, {
         dockable: this.props.geometry.side,
+        extraControls: extraControls,
         icon: "oblique",
         initialHeight: this.props.geometry.initialHeight,
         initialWidth: this.props.geometry.initialWidth,
@@ -352,9 +434,39 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this2.changeZoom(-1);
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })), basemap && this.state.datasetConfig ? /*#__PURE__*/React.createElement(OlLayer, {
+        map: this.map,
+        options: _objectSpread(_objectSpread({}, basemap), {}, {
+          opacity: (_obliqueConfig$backgr = obliqueConfig.backgroundOpacity) !== null && _obliqueConfig$backgr !== void 0 ? _obliqueConfig$backgr : 127
+        }),
+        projection: this.state.datasetConfig.crs,
+        zIndex: -1
+      }) : null, /*#__PURE__*/React.createElement("div", {
         className: "obliqueview-bottombar"
-      }, this.renderScaleChooser())));
+      }, /*#__PURE__*/React.createElement("select", {
+        onChange: function onChange(ev) {
+          return _this2.setState({
+            selectedDataset: ev.target.value
+          });
+        },
+        value: (_this$state$selectedD = this.state.selectedDataset) !== null && _this$state$selectedD !== void 0 ? _this$state$selectedD : ""
+      }, (this.props.theme.obliqueDatasets || []).map(function (entry) {
+        var _entry$title;
+        return /*#__PURE__*/React.createElement("option", {
+          key: entry.name,
+          value: entry.name
+        }, LocaleUtils.trWithFallback(entry.titleMsgId, (_entry$title = entry.title) !== null && _entry$title !== void 0 ? _entry$title : entry.name));
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-bottombar-spacer"
+      }), this.renderScaleChooser(), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-bottombar-spacer"
+      }), basemap && this.state.datasetConfig ? /*#__PURE__*/React.createElement(OverviewMapButton, {
+        center: this.state.currentCenter,
+        coneRotation: this.getRotation() / 180 * Math.PI,
+        layer: basemap,
+        projection: this.state.datasetConfig.crs,
+        resolution: MapUtils.computeForZoom(this.state.datasetConfig.resolutions, this.state.currentZoom) * 0.25
+      }) : null)));
     }
   }]);
 }(React.Component);
@@ -371,13 +483,14 @@ _defineProperty(ObliqueView, "propTypes", {
   }),
   /** The initial map scale. */
   initialScale: PropTypes.number,
-  mapBbox: PropTypes.object,
+  map: PropTypes.object,
   projection: PropTypes.string,
   /** A list of allowed map scales, in decreasing order. */
   scales: PropTypes.arrayOf(PropTypes.number),
   setCurrentTask: PropTypes.func,
   theme: PropTypes.object,
-  themes: PropTypes.object
+  themes: PropTypes.object,
+  zoomToExtent: PropTypes.func
 });
 _defineProperty(ObliqueView, "defaultProps", {
   geometry: {
@@ -396,15 +509,18 @@ _defineProperty(ObliqueView, "defaultState", {
   selectedDataset: null,
   datasetConfig: null,
   currentDirection: null,
-  currentZoom: 0
+  currentZoom: 0,
+  currentCenter: null,
+  viewsLocked: false
 });
 export default connect(function (state) {
   return {
     active: state.task.id === "ObliqueView",
-    mapBbox: state.map.bbox,
+    map: state.map,
     theme: state.theme.current,
     themes: state.theme.themes
   };
 }, {
-  setCurrentTask: setCurrentTask
+  setCurrentTask: setCurrentTask,
+  zoomToExtent: zoomToExtent
 })(ObliqueView);

package/plugins/Print.js

@@ -255,7 +255,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
           key: item.name,
           value: item.name
         }, _this.translateLayoutName(item));
-      })))), _this.props.formats.length > 1 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.format")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+      })))), _this.props.formats.length > 1 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("common.format")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
         disabled: _this.state.printSeriesEnabled,
         name: "FORMAT",
         onChange: _this.formatChanged,
@@ -287,7 +287,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
         disabled: true,
         placeholder: LocaleUtils.tr("print.pickatlasfeature", _this.state.layout.atlasCoverageLayer),
         type: "text"
-      }))) : null, isEmpty(_this.state.atlasFeatures) ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.scale")), /*#__PURE__*/React.createElement("td", null, scaleChooser)) : null, resolutionChooser ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.resolution")), /*#__PURE__*/React.createElement("td", null, resolutionChooser)) : null, _this.props.displayRotation ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.rotation")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(NumberInput, {
+      }))) : null, isEmpty(_this.state.atlasFeatures) ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.scale")), /*#__PURE__*/React.createElement("td", null, scaleChooser)) : null, resolutionChooser ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("common.resolution")), /*#__PURE__*/React.createElement("td", null, resolutionChooser)) : null, _this.props.displayRotation ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.rotation")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(NumberInput, {
         decimals: 1,
         mobile: true,
         name: mapName + ":rotation",
@@ -338,7 +338,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
         value: _this.state.printSeriesOverlap
       }), /*#__PURE__*/React.createElement("span", {
         role: "suffix"
-      }, _this.state.printSeriesOverlap, "\xA0%")))) : null, !_this.props.inlinePrintOutput && _this.state.printSeriesEnabled ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("print.download")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+      }, _this.state.printSeriesOverlap, "\xA0%")))) : null, !_this.props.inlinePrintOutput && _this.state.printSeriesEnabled ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("common.download")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
         onChange: _this.changeDownloadMode,
         role: "input",
         value: _this.state.downloadMode || ""
@@ -426,7 +426,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
         type: "submit"
       }, _this.state.printing ? /*#__PURE__*/React.createElement("span", {
         className: "print-wait"
-      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("print.wait")) : LocaleUtils.tr("print.submit")))));
+      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("common.wait")) : LocaleUtils.tr("print.submit")))));
     });
     _defineProperty(_this, "renderPrintLabelField", function (label, opts) {
       var defaultValue = opts.defaultValue || "";
@@ -562,7 +562,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderPrintOutputWindow", function () {
       var extraControls = [{
         icon: 'save',
-        title: LocaleUtils.tr('print.save'),
+        title: LocaleUtils.tr('common.save'),
         callback: _this.savePrintOutput
       }];
       return /*#__PURE__*/React.createElement(ResizeableWindow, {
@@ -585,7 +585,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
         className: "print-output-window-body"
       }, !_this.state.outputLoaded ? /*#__PURE__*/React.createElement("span", {
         className: "print-output-window-wait"
-      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("print.wait")) : null, /*#__PURE__*/React.createElement("iframe", {
+      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("common.wait")) : null, /*#__PURE__*/React.createElement("iframe", {
         name: "print-output-window",
         src: _this.state.pdfDataUrl
       })));
@@ -844,7 +844,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var minMaxTooltip = this.state.minimized ? LocaleUtils.tr("print.maximize") : LocaleUtils.tr("print.minimize");
+      var minMaxTooltip = this.state.minimized ? LocaleUtils.tr("window.maximize") : LocaleUtils.tr("window.minimize");
       var extraTitlebarContent = /*#__PURE__*/React.createElement(Icon, {
         className: "print-minimize-maximize",
         icon: this.state.minimized ? 'chevron-down' : 'chevron-up',

package/plugins/Redlining.js

@@ -39,6 +39,7 @@ import { LayerRole, addLayer } from '../actions/layers';
 import { setSnappingConfig } from '../actions/map';
 import { changeRedliningState, resetRedliningState } from '../actions/redlining';
 import Icon from '../components/Icon';
+import MeasureSwitcher from '../components/MeasureSwitcher';
 import TaskBar from '../components/TaskBar';
 import ButtonBar from '../components/widgets/ButtonBar';
 import ColorButton from '../components/widgets/ColorButton';
@@ -114,7 +115,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
       var activeButton = _this.props.redlining.action === "Draw" ? _this.props.redlining.geomType : _this.props.redlining.action;
       var drawButtons = [{
         key: "Point",
-        tooltip: LocaleUtils.tr("redlining.point"),
+        tooltip: LocaleUtils.tr("common.point"),
         icon: "point",
         data: {
           action: "Draw",
@@ -123,7 +124,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       }, {
         key: "LineString",
-        tooltip: LocaleUtils.tr("redlining.line"),
+        tooltip: LocaleUtils.tr("common.line"),
         icon: "line",
         data: {
           action: "Draw",
@@ -132,7 +133,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       }, [{
         key: "Polygon",
-        tooltip: LocaleUtils.tr("redlining.polygon"),
+        tooltip: LocaleUtils.tr("common.polygon"),
         icon: "polygon",
         data: {
           action: "Draw",
@@ -141,7 +142,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       }, toolEnabled("Circle") ? {
         key: "Circle",
-        tooltip: LocaleUtils.tr("redlining.circle"),
+        tooltip: LocaleUtils.tr("common.circle"),
         icon: "circle",
         data: {
           action: "Draw",
@@ -150,7 +151,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       } : null, toolEnabled("Ellipse") ? {
         key: "Ellipse",
-        tooltip: LocaleUtils.tr("redlining.ellipse"),
+        tooltip: LocaleUtils.tr("common.ellipse"),
         icon: "ellipse",
         data: {
           action: "Draw",
@@ -159,7 +160,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       } : null, toolEnabled("Square") ? {
         key: "Square",
-        tooltip: LocaleUtils.tr("redlining.square"),
+        tooltip: LocaleUtils.tr("common.square"),
         icon: "box",
         data: {
           action: "Draw",
@@ -168,7 +169,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       } : null, toolEnabled("Box") ? {
         key: "Box",
-        tooltip: LocaleUtils.tr("redlining.rectangle"),
+        tooltip: LocaleUtils.tr("common.rectangle"),
         icon: "rect",
         data: {
           action: "Draw",
@@ -177,7 +178,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       } : null].filter(Boolean), {
         key: "Text",
-        tooltip: LocaleUtils.tr("redlining.text"),
+        tooltip: LocaleUtils.tr("common.text"),
         icon: "text",
         data: {
           action: "Draw",
@@ -204,7 +205,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
       }] : [];
       var editButtons = [{
         key: "Pick",
-        tooltip: LocaleUtils.tr("redlining.pick"),
+        tooltip: LocaleUtils.tr("common.pick"),
         icon: "nodetool",
         data: {
           action: "Pick",
@@ -222,7 +223,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         }
       } : null, toolEnabled("Clone") ? {
         key: "Clone",
-        tooltip: LocaleUtils.tr("redlining.clone"),
+        tooltip: LocaleUtils.tr("common.clone"),
         icon: "clone",
         data: {
           action: "Clone",
@@ -231,7 +232,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         disabled: !_this.props.redlining.selectedFeature
       } : null, {
         key: "Delete",
-        tooltip: LocaleUtils.tr("redlining.delete"),
+        tooltip: LocaleUtils.tr("common.delete"),
         icon: "trash",
         data: {
           action: "Delete",
@@ -323,7 +324,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
         disabled: !haveLayer,
         menuIcon: "export",
         onActivate: _this["export"],
-        tooltip: LocaleUtils.tr("redlining.export")
+        tooltip: LocaleUtils.tr("common.export")
       }, /*#__PURE__*/React.createElement("div", {
         className: "redlining-export-menu-entry",
         key: "GeoJSON",
@@ -341,7 +342,7 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "renderStandardControls", function () {
-      var sizeLabel = LocaleUtils.tr("redlining.line");
+      var sizeLabel = LocaleUtils.tr("common.line");
       var showDash = true;
       if (["Text", "Point"].includes(_this.props.redlining.geomType)) {
         sizeLabel = LocaleUtils.tr("redlining.size");
@@ -491,21 +492,16 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
       })))) : null, /*#__PURE__*/React.createElement("div", {
         className: "redlining-control redlining-control-fill"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "controlgroup"
-      }, _this.props.redlining.geomType !== 'Text' && _this.props.allowGeometryLabels ? /*#__PURE__*/React.createElement("button", {
-        className: "button" + (_this.props.redlining.measurements ? " pressed" : ""),
-        onClick: function onClick() {
-          return _this.props.changeRedliningState({
-            measurements: !_this.props.redlining.measurements,
-            style: _objectSpread(_objectSpread({}, _this.props.redlining.style), {}, {
-              text: ''
-            })
-          });
+        className: "controlgroup" + (_this.props.redlining.showmeasurements ? " redlining-control-fill" : "")
+      }, _this.props.redlining.geomType !== 'Text' && _this.props.allowGeometryLabels ? /*#__PURE__*/React.createElement(MeasureSwitcher, {
+        changeMeasureState: function changeMeasureState(diff) {
+          return _this.props.changeRedliningState(_objectSpread(_objectSpread({}, diff), {}, {
+            text: ''
+          }));
         },
-        title: LocaleUtils.tr("redlining.measurements")
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: "measure"
-      })) : null, (_this.props.redlining.geomType === 'Text' || _this.props.allowGeometryLabels) && !_this.props.redlining.measurements ? /*#__PURE__*/React.createElement("input", {
+        geomType: _this.props.redlining.geomType,
+        measureState: _this.props.redlining
+      }) : null, (_this.props.redlining.geomType === 'Text' || _this.props.allowGeometryLabels) && !_this.props.redlining.showmeasurements ? /*#__PURE__*/React.createElement("input", {
         className: "controlgroup-fillitem",
         onChange: function onChange(ev) {
           return _this.updateRedliningStyle({
@@ -513,57 +509,13 @@ var Redlining = /*#__PURE__*/function (_React$Component) {
           });
         },
         placeholder: labelPlaceholder,
-        readOnly: _this.props.redlining.measurements,
+        readOnly: _this.props.redlining.showmeasurements,
         ref: function ref(el) {
           return _this.setLabelRef(el);
         },
         type: "text",
         value: _this.props.redlining.style.text
-      }) : null, _this.props.redlining.measurements && ['LineString', 'Circle'].includes(_this.props.redlining.geomType) ? /*#__PURE__*/React.createElement("select", {
-        className: "controlgroup-fillitem",
-        onChange: function onChange(ev) {
-          return _this.props.changeRedliningState({
-            lenUnit: ev.target.value
-          });
-        },
-        value: _this.props.redlining.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")) : null, _this.props.redlining.measurements && ['Polygon', 'Ellipse', 'Square', 'Box'].includes(_this.props.redlining.geomType) ? /*#__PURE__*/React.createElement("select", {
-        className: "controlgroup-fillitem",
-        onChange: function onChange(ev) {
-          return _this.props.changeRedliningState({
-            areaUnit: ev.target.value
-          });
-        },
-        value: _this.props.redlining.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")) : null)));
+      }) : null)));
     });
     _defineProperty(_this, "setLabelRef", function (el) {
       _this.labelInput = el;