qwc2 2025.10.16 → 2025.10.25

package/components/LocationRecorder.js

@@ -0,0 +1,138 @@
+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 _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 Sourcepole AG
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import LocaleUtils from '../utils/LocaleUtils';
+import Icon from './Icon';
+import { BottomToolPortalContext } from './PluginsContainer';
+import NumberInput from './widgets/NumberInput';
+import './style/LocationRecorder.css';
+var LocationRecorder = /*#__PURE__*/function (_React$Component) {
+  function LocationRecorder(props) {
+    var _this;
+    _classCallCheck(this, LocationRecorder);
+    _this = _callSuper(this, LocationRecorder, [props]);
+    _defineProperty(_this, "state", {
+      recording: false,
+      interval: 1
+    });
+    _defineProperty(_this, "toggleRecording", function () {
+      if (_this.state.recording) {
+        _this.stopRecording();
+      } else {
+        _this.props.drawInteraction.abortDrawing();
+        _this.props.drawInteraction.setActive(false);
+        // Re-add overlay to map, removed by setActive(false), to ensure traced feature is visibile
+        _this.props.drawInteraction.getOverlay().setMap(_this.props.map);
+        _this.setState({
+          recording: true
+        });
+        if (!navigator.geolocation) {
+          _this.stopRecording();
+          /* eslint-disable-next-line */
+          console.error("Geolocation not supported");
+        } else {
+          _this.props.drawInteraction.appendCoordinates([_this.props.locatePosition]);
+          if (_this.props.geomType === "Point") {
+            _this.stopRecording();
+          } else {
+            _this.pollInterval = setInterval(function () {
+              _this.props.drawInteraction.appendCoordinates([_this.props.locatePosition]);
+            }, _this.state.interval * 1000);
+          }
+        }
+      }
+    });
+    _defineProperty(_this, "stopRecording", function () {
+      _this.setState({
+        recording: false
+      }, _this.finishDrawing);
+      clearInterval(_this.pollInterval);
+    });
+    _defineProperty(_this, "finishDrawing", function () {
+      _this.props.drawInteraction.finishDrawing();
+      _this.props.drawInteraction.setActive(true);
+    });
+    _this.pollInterval = null;
+    return _this;
+  }
+  _inherits(LocationRecorder, _React$Component);
+  return _createClass(LocationRecorder, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.stopRecording();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.props.locateEnabled || !this.props.locatePosition) {
+        return null;
+      }
+      var buttonClasses = classNames({
+        button: true,
+        pressed: this.state.recording
+      });
+      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "LocationRecorder"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "screenshot"
+      }), /*#__PURE__*/React.createElement("button", {
+        className: buttonClasses,
+        onClick: this.toggleRecording
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: this.state.recording ? "square" : "circle_full"
+      }), /*#__PURE__*/React.createElement("span", null, this.state.recording ? LocaleUtils.tr("locationrecorder.stop") : LocaleUtils.tr("locationrecorder.record"))), /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 1,
+        max: 30,
+        min: 0.5,
+        mobile: true,
+        onChange: function onChange(value) {
+          return _this2.setState({
+            interval: value
+          });
+        },
+        step: 0.5,
+        suffix: "s",
+        value: this.state.interval
+      })), this.context);
+    }
+  }]);
+}(React.Component);
+_defineProperty(LocationRecorder, "contextType", BottomToolPortalContext);
+_defineProperty(LocationRecorder, "propTypes", {
+  drawInteraction: PropTypes.object,
+  geomType: PropTypes.string,
+  locateEnabled: PropTypes.bool,
+  locatePosition: PropTypes.array,
+  map: PropTypes.object
+});
+export default connect(function (state) {
+  return {
+    locateEnabled: ["ENABLED", "FOLLOWING"].includes(state.locate.state),
+    locatePosition: state.locate.mapPos
+  };
+})(LocationRecorder);

package/components/NumericInputWindow.js

@@ -68,6 +68,7 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(text) {
           return _this.onValueChanged(text, decimals, _onChange);
         },
+        showClear: false,
         value: value
       });
     });
@@ -79,6 +80,7 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(text) {
           return _this.onValueChanged(text, decimals, _onChange2);
         },
+        showClear: false,
         value: value
       });
     });
@@ -91,9 +93,9 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "renderPointInputForm", function () {
       var coordinates = _this.state.geometry.coordinates;
-      return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[0], function (value) {
+      return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "x")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[0], function (value) {
         return _this.updatePoint(value, 0);
-      })), /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[1], function (value) {
+      })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "y")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[1], function (value) {
         return _this.updatePoint(value, 1);
       })))));
     });
@@ -116,27 +118,33 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
           onMouseLeave: function onMouseLeave() {
             return _this.clearListCoordinateHighlight(idx);
           }
-        }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
-          icon: "plus",
+        }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
+          className: "button",
           onClick: function onClick() {
             return _this.insertCoordinate(idx);
           }
-        })), /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[idx][0], function (value) {
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: "plus"
+        }))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "x")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[idx][0], function (value) {
           return _this.updateListCoordinate(value, idx, 0);
-        })), /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[idx][1], function (value) {
+        })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "y")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[idx][1], function (value) {
           return _this.updateListCoordinate(value, idx, 1);
-        })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
-          icon: "trash",
+        })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
+          className: "button",
           onClick: function onClick() {
             return _this.removeCoordinate(idx);
           }
-        })));
-      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
-        icon: "plus",
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: "trash"
+        }))));
+      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
+        className: "button",
         onClick: function onClick() {
           return _this.insertCoordinate(coordinates.length);
         }
-      })), /*#__PURE__*/React.createElement("td", {
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "plus"
+      }))), /*#__PURE__*/React.createElement("td", {
         colSpan: "5"
       }))));
     });
@@ -219,11 +227,11 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderCircleInputForm", function () {
       var circleParams = _this.state.feature.circleParams;
       var center = CoordinatesUtils.reproject(circleParams.center, _this.props.mapCrs, _this.state.displayCrs);
-      return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(center[0], function (value) {
+      return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "x")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(center[0], function (value) {
         return _this.updateCircle(value, center[1], circleParams.radius);
-      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(center[1], function (value) {
+      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "y")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(center[1], function (value) {
         return _this.updateCircle(center[0], value, circleParams.radius);
-      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "r:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(circleParams.radius, function (value) {
+      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "r")), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(circleParams.radius, function (value) {
         return _this.updateCircle(center[0], center[1], value);
       })))));
     });
@@ -254,21 +262,21 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
         d2y = Math.abs(coordinates[2][1] - coordinates[1][1]);
         h = Math.sqrt(d2x * d2x + d2y * d2y);
       }
-      return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(x, function (value) {
+      return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "x")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(x, function (value) {
         return _this.updateBox(value, y, w, h, r);
-      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(y, function (value) {
+      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, "y")), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(y, function (value) {
         return _this.updateBox(x, value, w, h, r);
       }))), shape === "Box" ? [/*#__PURE__*/React.createElement("tr", {
         key: "w"
-      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.width"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(w, function (value) {
+      }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.width"))), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(w, function (value) {
         return _this.updateBox(x, y, value, h, r);
       }))), /*#__PURE__*/React.createElement("tr", {
         key: "h"
-      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.height"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(h, function (value) {
+      }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.height"))), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(h, function (value) {
         return _this.updateBox(x, y, w, value, r);
-      })))] : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.side"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(w, function (value) {
+      })))] : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.side"))), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(w, function (value) {
         return _this.updateBox(x, y, value, value, r);
-      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.angle"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(r, function (value) {
+      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.angle"))), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(r, function (value) {
         return _this.updateBox(x, y, w, h, value);
       }, 1)))));
     });
@@ -310,7 +318,7 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
       };
       var body = null;
       if (!this.state.geometry) {
-        body = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.nofeature"));
+        body = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.nofeatureormultiple"));
       } else if (shapeInputForms[this.state.feature.shape]) {
         body = shapeInputForms[this.state.feature.shape]();
       } else {

package/components/PickFeature.js

@@ -31,6 +31,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { connect } from 'react-redux';
 import isEmpty from 'lodash.isempty';
+import ol from 'openlayers';
+import pointInPolygon from 'point-in-polygon';
+import polygonIntersectTest from 'polygon-intersect-test';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { LayerRole, addLayerFeatures, clearLayer } from '../actions/layers';
@@ -121,29 +124,40 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
       if (this.state.pickGeom && this.state.pickGeom !== prevState.pickGeom) {
-        var queryLayers = [];
+        var queryWmsLayers = [];
+        var queryVectorLayers = [];
         if (this.props.layerFilter) {
-          queryLayers = [this.props.layers.find(function (l) {
+          queryWmsLayers = [this.props.layers.find(function (l) {
             return l.url === _this2.props.layerFilter.url;
           })].filter(Boolean);
         } else {
-          queryLayers = IdentifyUtils.getQueryLayers(this.props.layers, this.props.map);
+          queryWmsLayers = IdentifyUtils.getQueryLayers(this.props.layers, this.props.map);
+          queryVectorLayers = this.props.layers.filter(function (layer) {
+            return layer.visibility && LayerRole.USERLAYER && (layer.type === 'vector' || layer.type === 'wfs');
+          });
         }
-        if (!isEmpty(queryLayers)) {
-          this.setState(function (state) {
-            var getPixelFromCoordinate = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);
-            var coordinates = _this2.props.pickGeomType === "Point" ? [[state.pickGeom.coordinates]] : state.pickGeom.coordinates;
-            var maxX = coordinates[0][0][0];
-            var maxY = coordinates[0][0][1];
-            for (var i = 1; i < coordinates[0].length; ++i) {
-              if (coordinates[0][i][0] > maxX) {
-                maxX = coordinates[0][i][0];
-                maxY = coordinates[0][i][1];
-              }
+        if (this.props.layerFilterFunc) {
+          queryWmsLayers = queryWmsLayers.filter(this.props.layerFilterFunc);
+          queryVectorLayers = queryVectorLayers.filter(this.props.layerFilterFunc);
+        }
+        if (isEmpty(queryWmsLayers) && isEmpty(queryVectorLayers)) {
+          return;
+        }
+        this.setState(function (state) {
+          var coordinates = _this2.props.pickGeomType === "Point" ? [[state.pickGeom.coordinates]] : state.pickGeom.coordinates;
+          var maxX = coordinates[0][0][0];
+          var maxY = coordinates[0][0][1];
+          for (var i = 1; i < coordinates[0].length; ++i) {
+            if (coordinates[0][i][0] > maxX) {
+              maxX = coordinates[0][i][0];
+              maxY = coordinates[0][i][1];
             }
-            var clickPos = getPixelFromCoordinate([maxX, maxY], false);
-            var reqId = uuidv4();
-            queryLayers.forEach(function (layer) {
+          }
+          var reqId = uuidv4();
+          var getPixelFromCoordinate = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);
+          var clickPos = getPixelFromCoordinate([maxX, maxY], false);
+          if (!isEmpty(queryWmsLayers)) {
+            queryWmsLayers.forEach(function (layer) {
               var request = null;
               if (_this2.props.pickGeomType === 'Point') {
                 var _this2$props$layerFil;
@@ -159,14 +173,58 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
                 return _this2.handleIdentifyResponse(response, reqId, layer, request.params.info_format);
               });
             });
-            return {
-              pickResults: {},
-              clickPos: clickPos,
-              pendingQueries: queryLayers.length,
-              reqId: reqId
-            };
-          });
-        }
+          }
+          var pickResults = {};
+          if (!isEmpty(queryVectorLayers)) {
+            var olMap = MapUtils.getHook(MapUtils.GET_MAP);
+            var layerMap = queryVectorLayers.reduce(function (res, layer) {
+              return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, layer.id, layer));
+            }, {});
+            var format = new ol.format.GeoJSON();
+            if (_this2.props.pickGeomType === 'Point') {
+              olMap.forEachFeatureAtPixel(clickPos, function (feature, layer) {
+                var _layer$get;
+                var layerid = layer === null || layer === void 0 || (_layer$get = layer.get) === null || _layer$get === void 0 ? void 0 : _layer$get.call(layer, 'id');
+                if (layerid in layerMap) {
+                  var featureObj = format.writeFeatureObject(feature);
+                  var layername = layerMap[layerid].name;
+                  pickResults[layername] = pickResults[layername] || [];
+                  pickResults[layername].push(featureObj);
+                }
+              });
+            } else if (_this2.props.pickGeomType === 'Polygon') {
+              var extent = ol.extent.boundingExtent(coordinates[0]);
+              olMap.getLayers().forEach(function (layer) {
+                if (!(layer.get('id') in layerMap)) {
+                  return;
+                }
+                layer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
+                  var intersects = false;
+                  if (feature.getGeometry().getType() === "Point") {
+                    intersects = pointInPolygon(feature.getGeometry().getCoordinates(), coordinates[0]);
+                  } else if (feature.getGeometry().getType() === "LineString") {
+                    intersects = true; // TODO
+                  } else if (feature.getGeometry().getType() === "Polygon") {
+                    intersects = polygonIntersectTest(feature.getGeometry().getCoordinates()[0], coordinates[0]);
+                  }
+                  if (!intersects) {
+                    return;
+                  }
+                  var featureObj = format.writeFeatureObject(feature);
+                  var layername = layerMap[layer.get('id')].name;
+                  pickResults[layername] = pickResults[layername] || [];
+                  pickResults[layername].push(featureObj);
+                });
+              });
+            }
+          }
+          return {
+            pickResults: pickResults,
+            clickPos: clickPos,
+            pendingQueries: queryWmsLayers.length,
+            reqId: reqId
+          };
+        });
       }
     }
   }, {
@@ -186,6 +244,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
             layername = _ref6[0],
             features = _ref6[1];
           return features.map(function (feature) {
+            var _feature$displayname;
             return /*#__PURE__*/React.createElement("div", {
               key: layername + ":" + feature.id,
               onClickCapture: function onClickCapture() {
@@ -197,7 +256,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
               onMouseOver: function onMouseOver() {
                 return _this3.highlightFeature(layername, feature);
               }
-            }, layername + ": " + feature.displayname);
+            }, layername + ": " + ((_feature$displayname = feature.displayname) !== null && _feature$displayname !== void 0 ? _feature$displayname : feature.id));
           });
         }) : /*#__PURE__*/React.createElement("div", {
           className: "pick-feature-menu-querying"
@@ -240,6 +299,8 @@ _defineProperty(PickFeature, "propTypes", {
     url: PropTypes.string,
     name: PropTypes.string
   }),
+  /** Optional: Filter function to restrict pick layers */
+  layerFilterFunc: PropTypes.func,
   layers: PropTypes.array,
   map: PropTypes.object,
   /** Pick geometry type: Point, Polygon, ... (default: Point) */

package/components/PluginsContainer.js

@@ -40,6 +40,7 @@ import './style/PluginsContainer.css';
 export var MapButtonPortalContext = /*#__PURE__*/React.createContext(null);
 export var MapContainerPortalContext = /*#__PURE__*/React.createContext(null);
 export var AppInfosPortalContext = /*#__PURE__*/React.createContext(null);
+export var BottomToolPortalContext = /*#__PURE__*/React.createContext(null);
 var PluginsContainer = /*#__PURE__*/function (_React$Component) {
   function PluginsContainer() {
     var _this;
@@ -51,7 +52,8 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       mapButtonsContainerRef: null,
       mapContainerRef: null,
-      appInfosContainerRef: null
+      appInfosContainerRef: null,
+      bottomToolContainerRef: null
     });
     _defineProperty(_this, "renderPlugins", function () {
       var device = ConfigUtils.isMobile() ? 'mobile' : 'desktop';
@@ -134,6 +136,11 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         appInfosContainerRef: el
       });
     });
+    _defineProperty(_this, "setBottomToolContanerRef", function (el) {
+      _this.setState({
+        bottomToolContainerRef: el
+      });
+    });
     _defineProperty(_this, "setButtonContainerRef", function (el) {
       _this.setState({
         mapButtonsContainerRef: el
@@ -190,7 +197,7 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         right: 'calc(' + right + 'px)',
         bottom: 'calc(var(--bottombar-height) + ' + bottom + 'px)'
       };
-      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef;
+      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef && this.state.bottomToolContainerRef;
       return /*#__PURE__*/React.createElement("div", {
         className: "plugins-container " + ((_this$props$className = this.props.className) !== null && _this$props$className !== void 0 ? _this$props$className : ""),
         ref: this.setupTouchEvents
@@ -200,7 +207,9 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         value: this.state.mapButtonsContainerRef
       }, /*#__PURE__*/React.createElement(MapContainerPortalContext.Provider, {
         value: this.state.mapContainerRef
-      }, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(BottomToolPortalContext.Provider, {
+        value: this.state.bottomToolContainerRef
+      }, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null)))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
         className: "map-container",
         ref: this.setMapContainerRef,
         style: mapContainerStyle
@@ -212,6 +221,10 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         className: "app-infos-container",
         ref: this.setAppInfosContainerRef,
         style: mapContainerStyle
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "map-bottom-tool-container",
+        ref: this.setBottomToolContanerRef,
+        style: mapContainerStyle
       }));
     }
   }]);

package/components/map/OlLayer.js

@@ -252,7 +252,8 @@ _defineProperty(OlLayer, "propTypes", {
   refreshLayer: PropTypes.func,
   setLayerLoading: PropTypes.func,
   swipe: PropTypes.number,
-  zIndex: PropTypes.number
+  zIndex: PropTypes.number,
+  zoomToExtent: PropTypes.func
 });
 export default connect(function () {
   return {};

package/components/map/layers/MVTLayer.js

@@ -43,6 +43,9 @@ export default {
           var layer = createLayer();
           applyStyle(layer, glStyle, styleSource, options.styleOptions).then(function () {
             group.getLayers().push(layer);
+          })["catch"](function (e) {
+            /* eslint-disable-next-line */
+            console.warn("Unable to apply style " + options.style + ": " + String(e));
           });
         });
       })["catch"](function (e) {