qwc2 2025.12.17 → 2025.12.19

package/plugins/Reports.js

@@ -71,7 +71,7 @@ var Reports = /*#__PURE__*/function (_React$Component) {
       var pickButtons = [{
         key: 'Pick',
         icon: 'pick',
-        label: LocaleUtils.tr("reports.pick")
+        label: LocaleUtils.tr("common.pick")
       }, {
         key: 'Region',
         icon: 'pick_region',
@@ -79,7 +79,7 @@ var Reports = /*#__PURE__*/function (_React$Component) {
       }, {
         key: 'All',
         icon: 'ok',
-        label: LocaleUtils.tr("reports.all"),
+        label: LocaleUtils.tr("common.all"),
         forceLabel: true
       }];
       return /*#__PURE__*/React.createElement("div", {
@@ -113,7 +113,7 @@ var Reports = /*#__PURE__*/function (_React$Component) {
         type: "button"
       }, _this.state.generatingReport ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Icon, {
         icon: "report"
-      }), /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("reports.download")))));
+      }), /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("common.download")))));
     });
     _defineProperty(_this, "setLayerVisible", function (layerUrl, layerName) {
       var path = [];

package/plugins/Routing.js

@@ -234,7 +234,7 @@ var Routing = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "clear"
-      }), " ", LocaleUtils.tr("routing.clear"))), _this.state.mode === 'transit' ? /*#__PURE__*/React.createElement("div", {
+      }), " ", LocaleUtils.tr("common.clear"))), _this.state.mode === 'transit' ? /*#__PURE__*/React.createElement("div", {
         className: "routing-time-settings"
       }, /*#__PURE__*/React.createElement("select", {
         onChange: _this.updateTransitTimepoint,
@@ -330,7 +330,7 @@ var Routing = /*#__PURE__*/function (_React$Component) {
         }), " ", /*#__PURE__*/React.createElement("a", {
           href: "#",
           onClick: _this.exportRoute
-        }, LocaleUtils.tr("routing.export"))), /*#__PURE__*/React.createElement("span", {
+        }, LocaleUtils.tr("common.export"))), /*#__PURE__*/React.createElement("span", {
           className: "routing-result-spacer"
         }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
           icon: "layers"
@@ -467,7 +467,7 @@ var Routing = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "clear"
-      }), " ", LocaleUtils.tr("routing.clear")))), isoConfig.busy ? /*#__PURE__*/React.createElement("div", {
+      }), " ", LocaleUtils.tr("common.clear")))), isoConfig.busy ? /*#__PURE__*/React.createElement("div", {
         className: "routing-busy"
       }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("routing.computing")) : null, isoConfig.result ? _this.renderIsochroneResult(isoConfig) : null);
     });
@@ -486,7 +486,7 @@ var Routing = /*#__PURE__*/function (_React$Component) {
         }), " ", /*#__PURE__*/React.createElement("a", {
           href: "#",
           onClick: _this.exportIsochrone
-        }, LocaleUtils.tr("routing.export"))), /*#__PURE__*/React.createElement("span", {
+        }, LocaleUtils.tr("common.export"))), /*#__PURE__*/React.createElement("span", {
           className: "routing-result-spacer"
         }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
           icon: "layers"

package/plugins/ValueTool.js

@@ -178,7 +178,7 @@ var ValueTool = /*#__PURE__*/function (_React$Component) {
             onChange: function onChange(value) {
               return _this.setLayerBands(key, value);
             },
-            placeholder: LocaleUtils.tr("valuetool.all"),
+            placeholder: LocaleUtils.tr("common.all"),
             value: _this.state.selectedBands[key] || ""
           })) : null);
         });

package/plugins/View3D.js

@@ -68,11 +68,11 @@ var View3D = /*#__PURE__*/function (_React$Component) {
         var extraControls = [{
           icon: "sync",
           callback: _this.sync2DExtent,
-          title: LocaleUtils.tr("map3d.syncview")
+          title: LocaleUtils.tr("common.sync2dview")
         }, {
           icon: "lock",
           callback: _this.setLockViews,
-          title: LocaleUtils.tr("map3d.lockview"),
+          title: LocaleUtils.tr("common.lock2dview"),
           active: _this.state.viewsLocked
         }];
         if (!_this.state.windowDetached) {

package/plugins/ZoomButtons.js

@@ -96,7 +96,7 @@ var ZoomButton = /*#__PURE__*/function (_React$Component) {
       }
       var defaultPosition = this.props.direction > 0 ? 4 : 3;
       var position = this.props.position >= 0 ? this.props.position : defaultPosition;
-      var tooltip = this.props.direction > 0 ? LocaleUtils.tr("tooltip.zoomin") : LocaleUtils.tr("tooltip.zoomout");
+      var tooltip = this.props.direction > 0 ? LocaleUtils.tr("common.zoomin") : LocaleUtils.tr("common.zoomout");
       var active = this.props.enableZoomByBoxSelection && this.props.currentTask === this.task;
       return [/*#__PURE__*/React.createElement(MapButton, {
         active: active,

package/plugins/map/EditingSupport.js

@@ -35,6 +35,7 @@ import PropTypes from 'prop-types';
 import { setEditContext } from '../../actions/editing';
 import LocationRecorder from '../../components/LocationRecorder';
 import FeatureStyles from "../../utils/FeatureStyles";
+import MeasureUtils from '../../utils/MeasureUtils';
 
 /**
  * Editing support for the map component.
@@ -47,33 +48,33 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       showRecordLocation: false
     });
-    _defineProperty(_this, "editStyle", function () {
-      var geometryFunction = function geometryFunction(feature) {
-        if (feature.getGeometry().getType() === "Point") {
-          return new ol.geom.MultiPoint([feature.getGeometry().getCoordinates()]);
-        } else if (feature.getGeometry().getType() === "LineString") {
-          return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
-        } else if (feature.getGeometry().getType() === "Polygon") {
-          return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);
-        } else if (feature.getGeometry().getType() === "MultiPoint") {
-          return feature.getGeometry();
-        } else if (feature.getGeometry().getType() === "MultiLineString") {
-          return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);
-        } else if (feature.getGeometry().getType() === "MultiPolygon") {
-          return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0][0]);
+    _defineProperty(_this, "editStyle", 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());
+        } else if (f.getGeometry().getType() === "Polygon") {
+          return new ol.geom.MultiPoint(f.getGeometry().getCoordinates()[0]);
+        } else if (f.getGeometry().getType() === "MultiPoint") {
+          return f.getGeometry();
+        } else if (f.getGeometry().getType() === "MultiLineString") {
+          return new ol.geom.MultiPoint(f.getGeometry().getCoordinates()[0]);
+        } else if (f.getGeometry().getType() === "MultiPolygon") {
+          return new ol.geom.MultiPoint(f.getGeometry().getCoordinates()[0][0]);
         }
-        return feature.getGeometry();
+        return f.getGeometry();
       };
-      return [FeatureStyles.interaction(_this.props.editContext.geometryStyle), FeatureStyles.interactionVertex(_objectSpread({
+      return [FeatureStyles.interaction(feature, _this.props.editContext.geometryStyle), FeatureStyles.interactionVertex(_objectSpread({
         geometryFunction: geometryFunction
-      }, _this.props.editContext.vertexStyle))];
+      }, _this.props.editContext.vertexStyle))].flat();
     });
     _defineProperty(_this, "createLayer", function () {
       var source = new ol.source.Vector();
       _this.layer = new ol.layer.Vector({
         source: source,
         zIndex: 1000000,
-        style: _this.editStyle()
+        style: _this.editStyle
       });
       _this.props.map.addLayer(_this.layer);
     });
@@ -88,10 +89,11 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
         condition: function condition(event) {
           return event.originalEvent.buttons === 1;
         },
-        style: _this.editStyle()
+        style: _this.editStyle
       });
       drawInteraction.on('drawstart', function (evt) {
         _this.currentFeature = evt.feature;
+        _this.currentFeature.on('change', _this.updateMeasurements);
       }, _this);
       drawInteraction.on('drawend', function () {
         _this.setState({
@@ -112,6 +114,8 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
       _this.createLayer();
       var format = new ol.format.GeoJSON();
       _this.currentFeature = format.readFeature(_this.props.editContext.feature);
+      _this.currentFeature.on('change', _this.updateMeasurements);
+      _this.updateMeasurements();
       _this.layer.getSource().addFeature(_this.currentFeature);
       var modifyInteraction = new ol.interaction.Modify({
         features: new ol.Collection([_this.currentFeature]),
@@ -134,6 +138,23 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
       _this.props.map.addInteraction(modifyInteraction);
       _this.interaction = modifyInteraction;
     });
+    _defineProperty(_this, "updateMeasurements", function () {
+      var _this$props$editConte;
+      if (!_this.currentFeature) {
+        return;
+      } else if (!((_this$props$editConte = _this.props.editContext.measurements) !== null && _this$props$editConte !== void 0 && _this$props$editConte.showmeasurements)) {
+        _this.currentFeature.set('measurements', undefined);
+        _this.currentFeature.set('segment_labels', undefined);
+        _this.currentFeature.set('label', undefined);
+      } else {
+        var settings = {
+          displayCrs: _this.props.displayCrs,
+          lenUnit: _this.props.editContext.measurements.lenUnit,
+          areaUnit: _this.props.editContext.measurements.areaUnit
+        };
+        MeasureUtils.updateFeatureMeasurements(_this.currentFeature, _this.props.editContext.geomType, _this.props.mapCrs, settings);
+      }
+    });
     _defineProperty(_this, "commitCurrentFeature", function () {
       if (!_this.currentFeature) {
         return;
@@ -161,6 +182,9 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
         _this.props.map.removeInteraction(_this.interaction);
       }
       _this.interaction = null;
+      if (_this.currentFeature) {
+        _this.currentFeature.un('change', _this.updateMeasurements);
+      }
       _this.currentFeature = null;
       if (_this.layer) {
         _this.props.map.removeLayer(_this.layer);
@@ -178,6 +202,8 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       if (this.props.editContext === prevProps.editContext) {
         // pass
+      } else if (this.props.editContext.measurements !== prevProps.editContext.measurements) {
+        this.updateMeasurements();
       } else if (this.props.editContext.action === 'Pick' && this.props.editContext.feature) {
         // If a feature without geometry was picked, enter draw mode, otherwise enter edit mode
         if (!this.props.editContext.feature.geometry && this.props.editContext.geomType) {
@@ -213,13 +239,17 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
   }]);
 }(React.Component);
 _defineProperty(EditingSupport, "propTypes", {
+  displayCrs: PropTypes.string,
   editContext: PropTypes.object,
   map: PropTypes.object,
+  mapCrs: PropTypes.string,
   setEditContext: PropTypes.func
 });
 export default connect(function (state) {
   return {
-    editContext: state.editing.contexts[state.editing.currentContext] || {}
+    editContext: state.editing.contexts[state.editing.currentContext] || {},
+    displayCrs: state.map.displayCrs,
+    mapCrs: state.map.projection
   };
 }, {
   setEditContext: setEditContext

package/plugins/map/RedliningSupport.js

@@ -189,7 +189,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       _this.blockOnChange = false;
     });
     _defineProperty(_this, "toggleFeatureMeasurements", function (feature) {
-      if (_this.props.redlining.measurements) {
+      if (_this.props.redlining.showmeasurements) {
         var settings = {
           displayCrs: _this.props.displayCrs,
           lenUnit: _this.props.redlining.lenUnit,
@@ -293,7 +293,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         ev.feature.set('shape', _this.props.redlining.geomType);
         _this.updateFeatureStyle(ev.feature);
         _this.toggleFeatureMeasurements(ev.feature);
-        _this.selectFeatures([ev.feature]);
+        _this.selectFeatures([ev.feature], false);
       }, _this);
       drawInteraction.on('drawend', function (ev) {
         _this.commitFeatures([ev.feature], _this.props.redlining, true);
@@ -428,7 +428,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         evt.feature.set('shape', _this.props.redlining.geomType);
         _this.updateFeatureStyle(evt.feature);
         _this.toggleFeatureMeasurements(evt.feature);
-        _this.selectFeatures([evt.feature]);
+        _this.selectFeatures([evt.feature], false);
       }, _this);
       drawInteraction.on('drawend', function () {
         // Draw end
@@ -854,7 +854,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
           this.selectedFeatures.forEach(this.updateFeatureStyle);
         }
         // Update current feature measurements
-        if (this.props.redlining.measurements !== prevProps.redlining.measurements) {
+        if (this.props.redlining.showmeasurements !== prevProps.redlining.showmeasurements) {
           this.selectedFeatures.forEach(this.toggleFeatureMeasurements);
         } else if (this.props.map.displayCrs !== prevProps.map.displayCrs || this.props.redlining.lenUnit !== prevProps.redlining.lenUnit || this.props.redlining.areaUnit !== prevProps.redlining.areaUnit) {
           this.selectedFeatures.forEach(function (feature) {

package/plugins/map/SnapSupport.js

@@ -74,13 +74,13 @@ var SnapSupport = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "getFeature", function () {
       _this.timeoutId = null;
-      var layers = _this.props.layers.find(function (layer) {
-        return layer.role === LayerRole.THEME;
+      var layer = _this.props.layers.find(function (l) {
+        return l.role === LayerRole.THEME;
       });
-      var queryLayers = _this.props.layers.reduce(function (accum, layer) {
-        return layer.role === LayerRole.THEME ? accum.concat(layer.queryLayers) : accum;
+      var queryLayers = _this.props.layers.reduce(function (accum, l) {
+        return l.role === LayerRole.THEME ? accum.concat(l.queryLayers) : accum;
       }, []).join(",");
-      if (!layers || !queryLayers) {
+      if (!layer || !queryLayers) {
         return;
       }
       var options = {
@@ -90,11 +90,11 @@ var SnapSupport = /*#__PURE__*/function (_React$Component) {
         FI_LINE_TOLERANCE: 8,
         FI_POLYGON_TOLERANCE: 4
       };
-      var request = IdentifyUtils.buildRequest(layers, queryLayers, _this.state.mousePos.coordinate, _this.props.mapObj, options);
+      var request = IdentifyUtils.buildRequest(layer, queryLayers, _this.state.mousePos.coordinate, _this.props.mapObj, options);
       axios.get(request.url, {
         params: request.params
       }).then(function (response) {
-        var results = IdentifyUtils.parseXmlResponse(response.data, _this.props.mapObj.projection, layers);
+        var results = IdentifyUtils.parseXmlResponse(response.data, _this.props.mapObj.projection, layer);
         var features = [];
         results.forEach(function (result) {
           var _iterator2 = _createForOfIteratorHelper(result),
@@ -159,9 +159,11 @@ var SnapSupport = /*#__PURE__*/function (_React$Component) {
     _this.snapLayer = new ol.layer.Vector({
       source: _this.snapSource,
       zIndex: 1000000,
-      style: [FeatureStyles.interaction({}, true), FeatureStyles.interactionVertex({
-        geometryFunction: geometryFunction
-      }, true)]
+      style: function style(feature) {
+        return [FeatureStyles.interaction(feature, {}, true), FeatureStyles.interactionVertex({
+          geometryFunction: geometryFunction
+        }, true)].flat();
+      }
     });
     _this.props.map.addLayer(_this.snapLayer);
     _this.curPos = null;

package/plugins/map/style/SnappingSupport.css

@@ -1,13 +1,6 @@
 div.snapping-toolbar {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    line-height: 1.5em;
-    position: relative;
-    padding: 0.25em 0.5em;
-    order: 0;
-    background-color: var(--container-bg-color);
-    box-shadow: 0px -2px 4px rgba(136, 136, 136, 0.5);
-    border-bottom: 1px solid rgba(136, 136, 136, 0.5);
 }
 
 div.snapping-toolbar-container div.spinner {

package/plugins/map3d/Draw3D.js

@@ -174,7 +174,7 @@ var Draw3D = /*#__PURE__*/function (_React$Component) {
       }]];
       var editButtons = [{
         key: "Pick",
-        tooltip: LocaleUtils.tr("draw3d.pick"),
+        tooltip: LocaleUtils.tr("common.pick"),
         icon: "nodetool",
         data: {
           action: "Pick",
@@ -182,7 +182,7 @@ var Draw3D = /*#__PURE__*/function (_React$Component) {
         }
       }, {
         key: "Delete",
-        tooltip: LocaleUtils.tr("draw3d.delete"),
+        tooltip: LocaleUtils.tr("common.delete"),
         icon: "trash",
         data: {
           action: "Delete",

package/plugins/map3d/ExportObjects3D.js

@@ -107,7 +107,7 @@ var ExportObjects3D = /*#__PURE__*/function (_React$Component) {
         onSubmit: _this.exportArea
       }, /*#__PURE__*/React.createElement("table", {
         className: "options-table"
-      }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("mapexport.format")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+      }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("common.format")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
         name: "FORMAT",
         onChange: _this.formatChanged,
         value: _this.state.selectedFormat
@@ -127,7 +127,7 @@ var ExportObjects3D = /*#__PURE__*/function (_React$Component) {
         type: "submit"
       }, _this.state.exporting ? /*#__PURE__*/React.createElement("span", {
         className: "mapexport-wait"
-      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("mapexport.wait")) : LocaleUtils.tr("mapexport.submit")))));
+      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("common.wait")) : LocaleUtils.tr("common.export")))));
     });
     _defineProperty(_this, "restart", function () {
       if (_this.abortController) {

package/plugins/map3d/MapExport3D.js

@@ -191,7 +191,7 @@ var MapExport3D = /*#__PURE__*/function (_React$Component) {
         onSubmit: _this["export"]
       }, /*#__PURE__*/React.createElement("table", {
         className: "options-table"
-      }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("mapexport.format")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+      }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("common.format")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
         name: "FORMAT",
         onChange: _this.formatChanged,
         value: _this.state.selectedFormat
@@ -211,7 +211,7 @@ var MapExport3D = /*#__PURE__*/function (_React$Component) {
           key: item.name,
           value: item.name
         }, item.name.split('/').pop());
-      })))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("mapexport.resolution")), /*#__PURE__*/React.createElement("td", null, resolutionChooser)), _this.state.selectedFormat === 'application/pdf' ? (((_this$state$layout2 = _this.state.layout) === null || _this$state$layout2 === void 0 ? void 0 : _this$state$layout2.labels) || []).map(function (label) {
+      })))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("common.resolution")), /*#__PURE__*/React.createElement("td", null, resolutionChooser)), _this.state.selectedFormat === 'application/pdf' ? (((_this$state$layout2 = _this.state.layout) === null || _this$state$layout2 === void 0 ? void 0 : _this$state$layout2.labels) || []).map(function (label) {
         var _this$props$theme$pri4;
         // Omit labels which start with __
         if (label.startsWith("__")) {
@@ -278,7 +278,7 @@ var MapExport3D = /*#__PURE__*/function (_React$Component) {
         type: "submit"
       }, _this.state.exporting ? /*#__PURE__*/React.createElement("span", {
         className: "mapexport-wait"
-      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("mapexport.wait")) : LocaleUtils.tr("mapexport.submit")))));
+      }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("common.wait")) : LocaleUtils.tr("common.export")))));
     });
     _defineProperty(_this, "onFrameChanged", function (frame) {
       var x = frame.x,
@@ -450,7 +450,7 @@ var MapExport3D = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = 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 minMaxIcon = this.state.minimized ? 'chevron-down' : 'chevron-up';
       var extraTitlebarContent = /*#__PURE__*/React.createElement(Icon, {
         className: "mapexport-minimize-maximize",

package/plugins/map3d/OverviewMap3D.js

@@ -1,6 +1,4 @@
 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,84 +21,38 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import React from 'react';
-import ol from 'openlayers';
 import PropTypes from 'prop-types';
-import OlLayer from '../../components/map/OlLayer';
-import viewconeIcon from '../../resources/viewcone.svg';
-import './style/OverviewMap3D.css';
+import OverviewMapButton from '../../components/OverviewMapButton';
 
 /**
  * Overview map for the 3D map.
 */
 var OverviewMap3D = /*#__PURE__*/function (_React$Component) {
-  function OverviewMap3D(props) {
+  function OverviewMap3D() {
     var _this;
     _classCallCheck(this, OverviewMap3D);
-    _this = _callSuper(this, OverviewMap3D, [props]);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, OverviewMap3D, [].concat(args));
     _defineProperty(_this, "state", {
-      collapsed: true
-    });
-    _defineProperty(_this, "initOverviewMap", function (el) {
-      if (el) {
-        _this.map = new ol.Map({
-          layers: [_this.viewConeLayer],
-          controls: [],
-          target: el
-        });
-        _this.setupView();
-      }
-    });
-    _defineProperty(_this, "setupView", function () {
-      var overviewView = new ol.View({
-        enableRotation: false,
-        projection: _this.props.sceneContext.mapCrs
-      });
-      _this.map.setView(overviewView);
-      _this.updateViewCone();
+      center: null,
+      resolution: null,
+      coneAngle: null
     });
     _defineProperty(_this, "updateViewCone", function () {
       var _scene$view$controls$, _scene$view$controls, _scene$view$controls$2;
-      if (!_this.map) {
-        return;
-      }
       var scene = _this.props.sceneContext.scene;
       var x = scene.view.camera.position.x;
       var y = scene.view.camera.position.y;
       var azimuth = (_scene$view$controls$ = (_scene$view$controls = scene.view.controls) === null || _scene$view$controls === void 0 || (_scene$view$controls$2 = _scene$view$controls.getAzimuthalAngle) === null || _scene$view$controls$2 === void 0 ? void 0 : _scene$view$controls$2.call(_scene$view$controls)) !== null && _scene$view$controls$ !== void 0 ? _scene$view$controls$ : 0;
       var cameraHeight = scene.view.camera.position.z;
       var resolution = cameraHeight / 100;
-      _this.map.getView().setCenter([x, y]);
-      _this.map.getView().setResolution(resolution);
-      _this.viewConeFeature.getGeometry().setCoordinates([x, y]);
-      _this.viewConeFeature.set('rotation', -azimuth, true);
-      _this.viewConeLayer.getSource().changed();
-    });
-    _this.map = null;
-    _this.viewConeFeature = new ol.Feature(new ol.geom.Point([0, 0]));
-    _this.viewConeLayer = new ol.layer.Vector({
-      source: new ol.source.Vector({
-        features: [_this.viewConeFeature]
-      }),
-      style: function style(feature) {
-        return new ol.style.Style({
-          fill: new ol.style.Fill({
-            color: 'white'
-          }),
-          stroke: new ol.style.Stroke({
-            color: 'red',
-            width: 2
-          }),
-          image: new ol.style.Icon({
-            anchor: [0.5, 1],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'fraction',
-            src: viewconeIcon,
-            rotation: feature.get('rotation'),
-            scale: 2
-          })
-        });
-      },
-      zIndex: 10000
+      _this.setState({
+        center: [x, y],
+        resolution: resolution,
+        coneAngle: -azimuth
+      });
     });
     return _this;
   }
@@ -110,62 +62,35 @@ var OverviewMap3D = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       this.props.sceneContext.scene.view.controls.addEventListener('change', this.updateViewCone);
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.sceneContext.scene.view.controls.removeEventListener('change', this.updateViewCone);
+    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (this.props.sceneContext.mapCrs !== prevProps.sceneContext.mapCrs) {
         this.setupView();
       }
-      if (this.map) {
-        if (this.state.center !== prevState.center || this.state.azimuth !== prevState.azimuth) {
-          this.map.getView().setCenter(this.state.center);
-          this.viewConeFeature.getGeometry().setCoordinates(this.state.center);
-          this.viewConeFeature.set('rotation', -this.state.azimuth, true);
-          this.viewConeLayer.getSource().changed();
-        }
-        if (this.state.resolution !== prevState.resolution) {
-          this.map.getView().setResolution(this.state.resolution);
-        }
-      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props$sceneCont,
-        _this2 = this;
-      var style = {
-        display: this.state.collapsed ? 'none' : 'initial'
-      };
+      var _this$props$sceneCont;
       var baseLayer = this.props.sceneContext.baseLayers.find(function (l) {
         return l.visibility === true;
       });
       var overviewLayer = (_this$props$sceneCont = this.props.sceneContext.baseLayers.find(function (l) {
         return l.overview === true;
       })) !== null && _this$props$sceneCont !== void 0 ? _this$props$sceneCont : baseLayer;
-      return [/*#__PURE__*/React.createElement("div", {
-        className: "overview-map-3d",
-        key: "map3d-overview-map"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "ol-overviewmap-map-3d",
-        ref: this.initOverviewMap,
-        style: style
-      }), /*#__PURE__*/React.createElement("button", {
-        onClick: function onClick() {
-          return _this2.setState(function (state) {
-            return {
-              collapsed: !state.collapsed
-            };
-          });
-        },
-        type: "button"
-      }, this.state.collapsed ? '«' : '»')), this.map && overviewLayer ? /*#__PURE__*/React.createElement(OlLayer, {
-        key: overviewLayer.name,
-        map: this.map,
-        options: _objectSpread(_objectSpread({}, overviewLayer), {}, {
-          visibility: true
-        }),
-        projection: this.props.sceneContext.mapCrs
-      }) : null];
+      return overviewLayer ? /*#__PURE__*/React.createElement(OverviewMapButton, {
+        center: this.state.center,
+        coneRotation: this.state.coneAngle,
+        layer: overviewLayer,
+        projection: this.props.sceneContext.mapCrs,
+        resolution: this.state.resolution
+      }) : null;
     }
   }]);
 }(React.Component);

package/plugins/style/ObliqueView.css

@@ -90,7 +90,8 @@ div.obliqueview-bottombar {
     right: 0;
     bottom: 0;
     height: 3em;
-    z-index: 100;
+    padding: 0 0.5em;
+    z-index: 3;
     color: var(--panel-text-color);
     background-color: var(--panel-bg-color);
     box-shadow: 0 -2px 4px rgba(136, 136, 136, 0.5);
@@ -98,7 +99,10 @@ div.obliqueview-bottombar {
     font-size: 75%;
     display: flex;
     align-items: center;
-    justify-content: center;
+}
+
+span.obliqueview-bottombar-spacer {
+    flex: 1 1 auto;
 }
 
 div.obliqueview-scalechooser {

package/reducers/editing.js

@@ -52,7 +52,12 @@ export default function editing() {
             feature: null,
             changed: false,
             mapPrefix: null,
-            editConfig: null
+            editConfig: null,
+            measurements: {
+              showmeasurements: false,
+              lenUnit: 'metric',
+              areaUnit: 'metric'
+            }
           }, state.contexts[action.contextId]), action.editContext), {}, {
             geomNonZeroZ: checkNonZeroZ(state.contexts[action.contextId], action.editContext),
             geomReadOnly: checkGeomReadOnly(editConfig),