qwc2 2025.10.9 → 2025.10.14

package/components/map/OlMap.js

@@ -1,11 +1,411 @@
-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 _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _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-2016 GeoSolutions Sas
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import ol from"openlayers";import PropTypes from"prop-types";import{changeMapView,clickOnMap}from"../../actions/map";import{setCurrentTask}from"../../actions/task";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import MapUtils from"../../utils/MapUtils";ol.Map.prototype.setRequestsPaused=function(paused){this.requestsPaused_=paused;this.tileQueue_.setRequestsPaused(paused);this.getView().setRequestsPaused(paused);if(!paused){this.render()}};var OlMap=/*#__PURE__*/function(_React$Component){function OlMap(props){var _this;_classCallCheck(this,OlMap);_this=_callSuper(this,OlMap,[props]);_defineProperty(_this,"state",{mapOptions:{},projection:null,resolutions:[],rebuildView:false});_defineProperty(_this,"recreateKeyboardInteractions",function(){_this.keyboardPanInteractions.forEach(function(interaction){_this.map.removeInteraction(interaction)});_this.keyboardPanInteractions=[new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panStepSize*document.body.offsetWidth,condition:_this.panHStepCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panStepSize*document.body.offsetHeight,condition:_this.panVStepCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panPageSize*document.body.offsetWidth,condition:_this.panHPageCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panPageSize*document.body.offsetHeight,condition:_this.panVPageCondition})];_this.keyboardPanInteractions.forEach(function(interaction){_this.map.addInteraction(interaction)})});_defineProperty(_this,"unblockRequests",function(){if(_this.moving){if(_this.unpauseTimeout){clearTimeout(_this.unpauseTimeout)}_this.unpauseTimeout=setTimeout(function(){_this.updateMapInfoState();_this.map.setRequestsPaused(false);_this.unpauseTimeout=null;_this.moving=false},500)}});_defineProperty(_this,"panHStepCondition",function(ev){var horiz=ev.originalEvent.key==="ArrowLeft"||ev.originalEvent.key==="ArrowRight";return horiz&&ol.events.condition.noModifierKeys(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panVStepCondition",function(ev){var vert=ev.originalEvent.key==="ArrowUp"||ev.originalEvent.key==="ArrowDown";return vert&&ol.events.condition.noModifierKeys(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panHPageCondition",function(ev){var horiz=ev.originalEvent.key==="ArrowLeft"||ev.originalEvent.key==="ArrowRight";return horiz&&ol.events.condition.shiftKeyOnly(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panVPageCondition",function(ev){var vert=ev.originalEvent.key==="ArrowUp"||ev.originalEvent.key==="ArrowDown";return vert&&ol.events.condition.shiftKeyOnly(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"onClick",function(button,event,pixel){if(_this.ignoreNextClick){_this.ignoreNextClick=false;return}if(button===2){event.preventDefault()}if(_this.props.unsetTaskOnMapClick){_this.props.setCurrentTask(null);return}var features=[];var format=new ol.format.GeoJSON;var suppressClick=false;_this.map.forEachFeatureAtPixel(pixel,function(feature,layer){if(suppressClick){return}else if(feature.get("__suppress_map_click")){suppressClick=true;return}if(!layer){return}// Picked vector tile features cause an exception when passed to format.writeFeatureObject
-try{var featureObj=format.writeFeatureObject(feature);featureObj.layerId=layer?layer.get("id"):null;features.push(featureObj)}catch(e){/* pass */}},{hitTolerance:5});if(suppressClick){return}var evpixel=_this.map.getEventPixel(event);var data={ts:+new Date,coordinate:_this.map.getEventCoordinate(event),pixel:[evpixel[0],evpixel[1]-_this.props.topbarHeight],features:features,modifiers:{alt:event.altKey,ctrl:event.ctrlKey,shift:event.shiftKey},button:button};_this.props.onClick(data)});_defineProperty(_this,"updateMapInfoState",function(){var view=_this.map.getView();var c=view.getCenter()||[0,0];var bbox={bounds:view.calculateExtent(_this.map.getSize()),rotation:view.getRotation()};var size={width:_this.map.getSize()[0],height:_this.map.getSize()[1]};_this.props.onMapViewChanges(c,view.getZoom()||0,bbox,size,_this.props.id,_this.props.projection)});_defineProperty(_this,"createView",function(center,zoom,projection,resolutions,enableRotation,rotation){var extent=_this.props.mapOptions.constrainExtent&&_this.props.fullExtent?CoordinatesUtils.reprojectBbox(_this.props.fullExtent.bounds,_this.props.fullExtent.crs,projection):undefined;var viewOptions={projection:projection,center:center,zoom:zoom,constrainResolution:ConfigUtils.getConfigProp("allowFractionalZoom")===true?false:true,resolutions:resolutions,constrainRotation:false,enableRotation:enableRotation!==false,rotation:MapUtils.degreesToRadians(rotation)||0,extent:extent};return new ol.View(viewOptions)});_defineProperty(_this,"registerHooks",function(){MapUtils.registerHook(MapUtils.GET_MAP,_this.map);MapUtils.registerHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK,function(pos){var compensateTopbarHeight=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var pixel=_this.map.getPixelFromCoordinate(pos);return[pixel[0],pixel[1]-(compensateTopbarHeight?_this.props.topbarHeight:0)]});MapUtils.registerHook(MapUtils.GET_COORDINATES_FROM_PIXEL_HOOK,function(pixel){return _this.map.getCoordinateFromPixel([pixel[0],pixel[1]+_this.props.topbarHeight])});MapUtils.registerHook(MapUtils.GET_SNAPPED_COORDINATES_FROM_PIXEL_HOOK,function(pixel){return _this.map.getCoordinateFromPixel(pixel)});MapUtils.registerHook(MapUtils.GET_NATIVE_LAYER,function(id){return _this.map.getLayers().getArray().find(function(layer){return layer.get("id")===id})});MapUtils.registerHook(MapUtils.ADD_POINTER_MOVE_LISTENER,function(callback){_this.callbackMap[callback]=function(event){var pixel=_toConsumableArray(event.pixel);callback({coordinate:event.coordinate,pixel:[pixel[0],pixel[1]-_this.props.topbarHeight]})};_this.map.on("pointermove",_this.callbackMap[callback])});MapUtils.registerHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER,function(callback){_this.map.un("pointermove",_this.callbackMap[callback]);delete _this.callbackMap[callback]})});_this.ignoreNextClick=false;_this.callbackMap={};_this.state.mapOptions=_objectSpread(_objectSpread({},OlMap.defaultProps.mapOptions),props.mapOptions);var interactions=ol.interaction.defaults({// don't create these default interactions, but create them below with custom params
-dragPan:false,mouseWheelZoom:false,keyboard:false});_this.keyboardPanInteractions=[];var kinetic=null;if(_this.state.mapOptions.kineticPanParams){kinetic=new ol.Kinetic(_this.state.mapOptions.kineticPanParams.decay,_this.state.mapOptions.kineticPanParams.minVelocity,_this.state.mapOptions.kineticPanParams.delay)}interactions.extend([new ol.interaction.DragPan({kinetic:kinetic,condition:function condition(ev){var oev=ev.originalEvent;return!oev.altKey&&!(oev.metaKey||oev.ctrlKey)&&!oev.shiftKey&&oev.isPrimary!==false&&(oev.button===0||oev.button===1)}}),new ol.interaction.MouseWheelZoom({duration:_this.state.mapOptions.zoomDuration||250,constrainResolution:ConfigUtils.getConfigProp("allowFractionalZoom")===true?false:true}),new ol.interaction.KeyboardZoom]);var controls=ol.control.defaults({zoom:false,attribution:false,rotateOptions:{tipLabel:LocaleUtils.tr("map.resetrotation")}});var map=new ol.Map({layers:[],controls:controls,interactions:interactions,view:_this.createView(props.center,props.zoom,props.projection,props.resolutions,_this.state.mapOptions.enableRotation,_this.state.mapOptions.rotation)});_this.unpauseTimeout=null;_this.moving=false;map.on("movestart",function(){_this.moving=true;_this.map.setRequestsPaused(true)});map.on("moveend",function(){_this.unblockRequests()});map.on("singleclick",function(event){return _this.onClick(0,event.originalEvent,event.pixel)});map.getViewport().addEventListener("contextmenu",function(event){return _this.onClick(2,event,_this.map.getEventPixel(event))});map.set("id",props.id);map.setIgnoreNextClick=function(ignore){_this.ignoreNextClick=ignore};_this.map=map;_this.registerHooks();_this.recreateKeyboardInteractions();window.addEventListener("resize",_this.recreateKeyboardInteractions);return _this}_inherits(OlMap,_React$Component);return _createClass(OlMap,[{key:"componentDidMount",value:function componentDidMount(){this.map.setTarget(this.props.id);this.updateMapInfoState()}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.recreateKeyboardInteractions)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.id!==this.props.mapStateSource){var view=this.map.getView();if(prevProps.center!==this.props.center){view.setCenter(this.props.center)}if(prevProps.zoom!==this.props.zoom){view.setZoom(this.props.zoom)}if(prevProps.bbox.rotation!==this.props.bbox.rotation){view.setRotation(this.props.bbox.rotation)}}if(this.state.rebuildView){this.setState({rebuildView:false})}}},{key:"render",value:function render(){var _this2=this;if(this.state.rebuildView){var overviewMap=this.map.getControls().getArray().find(function(control){return control instanceof ol.control.OverviewMap});var view=this.createView(this.props.center,this.props.zoom,this.props.projection,this.props.resolutions,this.state.mapOptions.enableRotation,this.state.mapOptions.rotation);if(overviewMap){overviewMap.getOverviewMap().setView(view)}this.map.setView(view);// We have to force ol to drop tile and reload
-this.map.getLayers().forEach(function(l){if(l instanceof ol.layer.Group){l.getLayers().forEach(function(sublayer){var source=sublayer.getSource();if(source.getTileLoadFunction){source.setTileLoadFunction(source.getTileLoadFunction())}})}else{var source=l.getSource();if(source.getTileLoadFunction){source.setTileLoadFunction(source.getTileLoadFunction())}}});view.setZoom(this.props.zoom);view.setCenter(this.props.center);this.map.render()}var children=React.Children.map(this.props.children,function(child){return child?/*#__PURE__*/React.cloneElement(child,{map:_this2.map,projection:_this2.props.projection}):null});return children}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(nextProps.projection!==state.projection||nextProps.resolutions!==state.resolutions){return{rebuildView:true,projection:nextProps.projection,resolutions:nextProps.resolutions}}return null}}])}(React.Component);_defineProperty(OlMap,"propTypes",{bbox:PropTypes.object,center:PropTypes.array,children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),fullExtent:PropTypes.object,id:PropTypes.string,mapOptions:PropTypes.object,mapStateSource:PropTypes.string,onClick:PropTypes.func,onMapViewChanges:PropTypes.func,onMouseMove:PropTypes.func,panPageSize:PropTypes.number,panStepSize:PropTypes.number,projection:PropTypes.string,resolutions:PropTypes.array,setCurrentTask:PropTypes.func,topbarHeight:PropTypes.number,unsetTaskOnMapClick:PropTypes.bool,zoom:PropTypes.number.isRequired});_defineProperty(OlMap,"defaultProps",{id:"map",mapOptions:{panPageSize:1,panStepSize:0.25}});export default connect(function(state){return{unsetTaskOnMapClick:state.task.unsetOnMapClick,topbarHeight:state.windows.topbarHeight}},{onMapViewChanges:changeMapView,onClick:clickOnMap,setCurrentTask:setCurrentTask})(OlMap);
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import ol from 'openlayers';
+import PropTypes from 'prop-types';
+import { changeMapView, clickOnMap } from '../../actions/map';
+import { setCurrentTask } from '../../actions/task';
+import ConfigUtils from '../../utils/ConfigUtils';
+import CoordinatesUtils from '../../utils/CoordinatesUtils';
+import LocaleUtils from '../../utils/LocaleUtils';
+import MapUtils from '../../utils/MapUtils';
+ol.Map.prototype.setRequestsPaused = function (paused) {
+  this.requestsPaused_ = paused;
+  this.tileQueue_.setRequestsPaused(paused);
+  this.getView().setRequestsPaused(paused);
+  if (!paused) {
+    this.render();
+  }
+};
+var OlMap = /*#__PURE__*/function (_React$Component) {
+  function OlMap(props) {
+    var _this;
+    _classCallCheck(this, OlMap);
+    _this = _callSuper(this, OlMap, [props]);
+    _defineProperty(_this, "state", {
+      mapOptions: {},
+      projection: null,
+      resolutions: [],
+      rebuildView: false
+    });
+    _defineProperty(_this, "recreateKeyboardInteractions", function () {
+      _this.keyboardPanInteractions.forEach(function (interaction) {
+        _this.map.removeInteraction(interaction);
+      });
+      _this.keyboardPanInteractions = [new ol.interaction.KeyboardPan({
+        pixelDelta: _this.state.mapOptions.panStepSize * document.body.offsetWidth,
+        condition: _this.panHStepCondition
+      }), new ol.interaction.KeyboardPan({
+        pixelDelta: _this.state.mapOptions.panStepSize * document.body.offsetHeight,
+        condition: _this.panVStepCondition
+      }), new ol.interaction.KeyboardPan({
+        pixelDelta: _this.state.mapOptions.panPageSize * document.body.offsetWidth,
+        condition: _this.panHPageCondition
+      }), new ol.interaction.KeyboardPan({
+        pixelDelta: _this.state.mapOptions.panPageSize * document.body.offsetHeight,
+        condition: _this.panVPageCondition
+      })];
+      _this.keyboardPanInteractions.forEach(function (interaction) {
+        _this.map.addInteraction(interaction);
+      });
+    });
+    _defineProperty(_this, "unblockRequests", function () {
+      if (_this.moving) {
+        if (_this.unpauseTimeout) {
+          clearTimeout(_this.unpauseTimeout);
+        }
+        _this.unpauseTimeout = setTimeout(function () {
+          _this.updateMapInfoState();
+          _this.map.setRequestsPaused(false);
+          _this.unpauseTimeout = null;
+          _this.moving = false;
+        }, 500);
+      }
+    });
+    _defineProperty(_this, "panHStepCondition", function (ev) {
+      var horiz = ev.originalEvent.key === 'ArrowLeft' || ev.originalEvent.key === 'ArrowRight';
+      return horiz && ol.events.condition.noModifierKeys(ev) && ol.events.condition.targetNotEditable(ev);
+    });
+    _defineProperty(_this, "panVStepCondition", function (ev) {
+      var vert = ev.originalEvent.key === 'ArrowUp' || ev.originalEvent.key === 'ArrowDown';
+      return vert && ol.events.condition.noModifierKeys(ev) && ol.events.condition.targetNotEditable(ev);
+    });
+    _defineProperty(_this, "panHPageCondition", function (ev) {
+      var horiz = ev.originalEvent.key === 'ArrowLeft' || ev.originalEvent.key === 'ArrowRight';
+      return horiz && ol.events.condition.shiftKeyOnly(ev) && ol.events.condition.targetNotEditable(ev);
+    });
+    _defineProperty(_this, "panVPageCondition", function (ev) {
+      var vert = ev.originalEvent.key === 'ArrowUp' || ev.originalEvent.key === 'ArrowDown';
+      return vert && ol.events.condition.shiftKeyOnly(ev) && ol.events.condition.targetNotEditable(ev);
+    });
+    _defineProperty(_this, "onClick", function (button, event, pixel) {
+      if (_this.ignoreNextClick) {
+        _this.ignoreNextClick = false;
+        return;
+      }
+      if (button === 2) {
+        event.preventDefault();
+      }
+      if (_this.props.unsetTaskOnMapClick) {
+        _this.props.setCurrentTask(null);
+        return;
+      }
+      var features = [];
+      var format = new ol.format.GeoJSON();
+      var suppressClick = false;
+      _this.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
+        if (suppressClick) {
+          return;
+        } else if (feature.get('__suppress_map_click')) {
+          suppressClick = true;
+          return;
+        }
+        if (!layer) {
+          return;
+        }
+        // Picked vector tile features cause an exception when passed to format.writeFeatureObject
+        try {
+          var featureObj = format.writeFeatureObject(feature);
+          featureObj.layerId = layer ? layer.get('id') : null;
+          features.push(featureObj);
+        } catch (e) {
+          /* pass */
+        }
+      }, {
+        hitTolerance: 5
+      });
+      if (suppressClick) {
+        return;
+      }
+      var evpixel = _this.map.getEventPixel(event);
+      var data = {
+        ts: +new Date(),
+        coordinate: _this.map.getEventCoordinate(event),
+        pixel: [evpixel[0], evpixel[1] - _this.props.topbarHeight],
+        features: features,
+        modifiers: {
+          alt: event.altKey,
+          ctrl: event.ctrlKey,
+          shift: event.shiftKey
+        },
+        button: button
+      };
+      _this.props.onClick(data);
+    });
+    _defineProperty(_this, "updateMapInfoState", function () {
+      var view = _this.map.getView();
+      var c = view.getCenter() || [0, 0];
+      var bbox = {
+        bounds: view.calculateExtent(_this.map.getSize()),
+        rotation: view.getRotation()
+      };
+      var size = {
+        width: _this.map.getSize()[0],
+        height: _this.map.getSize()[1]
+      };
+      _this.props.onMapViewChanges(c, view.getZoom() || 0, bbox, size, _this.props.id, _this.props.projection);
+    });
+    _defineProperty(_this, "createView", function (center, zoom, projection, resolutions, enableRotation, rotation) {
+      var extent = _this.props.mapOptions.constrainExtent && _this.props.fullExtent ? CoordinatesUtils.reprojectBbox(_this.props.fullExtent.bounds, _this.props.fullExtent.crs, projection) : undefined;
+      var viewOptions = {
+        projection: projection,
+        center: center,
+        zoom: zoom,
+        constrainResolution: ConfigUtils.getConfigProp('allowFractionalZoom') === true ? false : true,
+        resolutions: resolutions,
+        constrainRotation: false,
+        enableRotation: enableRotation !== false,
+        rotation: MapUtils.degreesToRadians(rotation) || 0,
+        extent: extent
+      };
+      return new ol.View(viewOptions);
+    });
+    _defineProperty(_this, "registerHooks", function () {
+      MapUtils.registerHook(MapUtils.GET_MAP, _this.map);
+      MapUtils.registerHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK, function (pos) {
+        var compensateTopbarHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        var pixel = _this.map.getPixelFromCoordinate(pos);
+        return [pixel[0], pixel[1] - (compensateTopbarHeight ? _this.props.topbarHeight : 0)];
+      });
+      MapUtils.registerHook(MapUtils.GET_COORDINATES_FROM_PIXEL_HOOK, function (pixel) {
+        return _this.map.getCoordinateFromPixel([pixel[0], pixel[1] + _this.props.topbarHeight]);
+      });
+      MapUtils.registerHook(MapUtils.GET_SNAPPED_COORDINATES_FROM_PIXEL_HOOK, function (pixel) {
+        return _this.map.getCoordinateFromPixel(pixel);
+      });
+      MapUtils.registerHook(MapUtils.GET_NATIVE_LAYER, function (id) {
+        return _this.map.getLayers().getArray().find(function (layer) {
+          return layer.get('id') === id;
+        });
+      });
+      MapUtils.registerHook(MapUtils.ADD_POINTER_MOVE_LISTENER, function (callback) {
+        _this.callbackMap[callback] = function (event) {
+          var pixel = _toConsumableArray(event.pixel);
+          callback({
+            coordinate: event.coordinate,
+            pixel: [pixel[0], pixel[1] - _this.props.topbarHeight]
+          });
+        };
+        _this.map.on('pointermove', _this.callbackMap[callback]);
+      });
+      MapUtils.registerHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER, function (callback) {
+        _this.map.un('pointermove', _this.callbackMap[callback]);
+        delete _this.callbackMap[callback];
+      });
+    });
+    _this.ignoreNextClick = false;
+    _this.callbackMap = {};
+    _this.state.mapOptions = _objectSpread(_objectSpread({}, OlMap.defaultProps.mapOptions), props.mapOptions);
+    var interactions = ol.interaction.defaults({
+      // don't create these default interactions, but create them below with custom params
+      dragPan: false,
+      mouseWheelZoom: false,
+      keyboard: false
+    });
+    _this.keyboardPanInteractions = [];
+    var kinetic = null;
+    if (_this.state.mapOptions.kineticPanParams) {
+      kinetic = new ol.Kinetic(_this.state.mapOptions.kineticPanParams.decay, _this.state.mapOptions.kineticPanParams.minVelocity, _this.state.mapOptions.kineticPanParams.delay);
+    }
+    interactions.extend([new ol.interaction.DragPan({
+      kinetic: kinetic,
+      condition: function condition(ev) {
+        var oev = ev.originalEvent;
+        return !oev.altKey && !(oev.metaKey || oev.ctrlKey) && !oev.shiftKey && oev.isPrimary !== false && (oev.button === 0 || oev.button === 1);
+      }
+    }), new ol.interaction.MouseWheelZoom({
+      duration: _this.state.mapOptions.zoomDuration || 250,
+      constrainResolution: ConfigUtils.getConfigProp('allowFractionalZoom') === true ? false : true
+    }), new ol.interaction.KeyboardZoom()]);
+    var controls = ol.control.defaults({
+      zoom: false,
+      attribution: false,
+      rotateOptions: {
+        tipLabel: LocaleUtils.tr("map.resetrotation")
+      }
+    });
+    var map = new ol.Map({
+      layers: [],
+      controls: controls,
+      interactions: interactions,
+      view: _this.createView(props.center, props.zoom, props.projection, props.resolutions, _this.state.mapOptions.enableRotation, _this.state.mapOptions.rotation)
+    });
+    _this.unpauseTimeout = null;
+    _this.moving = false;
+    map.on('movestart', function () {
+      _this.moving = true;
+      _this.map.setRequestsPaused(true);
+    });
+    map.on('moveend', function () {
+      _this.unblockRequests();
+    });
+    map.on('singleclick', function (event) {
+      return _this.onClick(0, event.originalEvent, event.pixel);
+    });
+    map.getViewport().addEventListener('contextmenu', function (event) {
+      return _this.onClick(2, event, _this.map.getEventPixel(event));
+    });
+    map.set('id', props.id);
+    map.setIgnoreNextClick = function (ignore) {
+      _this.ignoreNextClick = ignore;
+    };
+    _this.map = map;
+    _this.registerHooks();
+    _this.recreateKeyboardInteractions();
+    window.addEventListener('resize', _this.recreateKeyboardInteractions);
+    return _this;
+  }
+  _inherits(OlMap, _React$Component);
+  return _createClass(OlMap, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.map.setTarget(this.props.id);
+      this.updateMapInfoState();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.recreateKeyboardInteractions);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.id !== this.props.mapStateSource) {
+        var view = this.map.getView();
+        if (prevProps.center !== this.props.center) {
+          view.setCenter(this.props.center);
+        }
+        if (prevProps.zoom !== this.props.zoom) {
+          view.setZoom(this.props.zoom);
+        }
+        if (prevProps.bbox.rotation !== this.props.bbox.rotation) {
+          view.setRotation(this.props.bbox.rotation);
+        }
+      }
+      if (this.state.rebuildView) {
+        this.setState({
+          rebuildView: false
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (this.state.rebuildView) {
+        var overviewMap = this.map.getControls().getArray().find(function (control) {
+          return control instanceof ol.control.OverviewMap;
+        });
+        var view = this.createView(this.props.center, this.props.zoom, this.props.projection, this.props.resolutions, this.state.mapOptions.enableRotation, this.state.mapOptions.rotation);
+        if (overviewMap) {
+          overviewMap.getOverviewMap().setView(view);
+        }
+        this.map.setView(view);
+        // We have to force ol to drop tile and reload
+        this.map.getLayers().forEach(function (l) {
+          if (l instanceof ol.layer.Group) {
+            l.getLayers().forEach(function (sublayer) {
+              var source = sublayer.getSource();
+              if (source.getTileLoadFunction) {
+                source.setTileLoadFunction(source.getTileLoadFunction());
+              }
+            });
+          } else {
+            var source = l.getSource();
+            if (source.getTileLoadFunction) {
+              source.setTileLoadFunction(source.getTileLoadFunction());
+            }
+          }
+        });
+        view.setZoom(this.props.zoom);
+        view.setCenter(this.props.center);
+        this.map.render();
+      }
+      var children = React.Children.map(this.props.children, function (child) {
+        return child ? /*#__PURE__*/React.cloneElement(child, {
+          map: _this2.map,
+          projection: _this2.props.projection
+        }) : null;
+      });
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, state) {
+      if (nextProps.projection !== state.projection || nextProps.resolutions !== state.resolutions) {
+        return {
+          rebuildView: true,
+          projection: nextProps.projection,
+          resolutions: nextProps.resolutions
+        };
+      }
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(OlMap, "propTypes", {
+  bbox: PropTypes.object,
+  center: PropTypes.array,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  fullExtent: PropTypes.object,
+  id: PropTypes.string,
+  mapOptions: PropTypes.object,
+  mapStateSource: PropTypes.string,
+  onClick: PropTypes.func,
+  onMapViewChanges: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  panPageSize: PropTypes.number,
+  panStepSize: PropTypes.number,
+  projection: PropTypes.string,
+  resolutions: PropTypes.array,
+  setCurrentTask: PropTypes.func,
+  topbarHeight: PropTypes.number,
+  unsetTaskOnMapClick: PropTypes.bool,
+  zoom: PropTypes.number.isRequired
+});
+_defineProperty(OlMap, "defaultProps", {
+  id: 'map',
+  mapOptions: {
+    panPageSize: 1,
+    panStepSize: 0.25
+  }
+});
+export default connect(function (state) {
+  return {
+    unsetTaskOnMapClick: state.task.unsetOnMapClick,
+    topbarHeight: state.windows.topbarHeight
+  };
+}, {
+  onMapViewChanges: changeMapView,
+  onClick: clickOnMap,
+  setCurrentTask: setCurrentTask
+})(OlMap);

package/components/map/layers/BingLayer.js

@@ -1,8 +1,37 @@
-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 _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2015 GeoSolutions Sas
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import ol from"openlayers";import ConfigUtils from"../../../utils/ConfigUtils";export default{create:function create(options){var _options$imagerySet;if(!options.apiKey){/* eslint-disable-next-line */console.warn("No api-key provided for BingMaps layer")}var layer=new ol.layer.Tile(_objectSpread({minResolution:options.minResolution,maxResolution:options.maxResolution,preload:ConfigUtils.getConfigProp("tilePreloadLevels",null,0),source:new ol.source.BingMaps(_objectSpread({projection:options.projection,key:options.apiKey,imagerySet:(_options$imagerySet=options.imagerySet)!==null&&_options$imagerySet!==void 0?_options$imagerySet:options.name},options.sourceConfig||{}))},options.layerConfig||{}));return layer}};
+ */
+
+import ol from 'openlayers';
+import ConfigUtils from '../../../utils/ConfigUtils';
+export default {
+  create: function create(options) {
+    var _options$imagerySet;
+    if (!options.apiKey) {
+      /* eslint-disable-next-line */
+      console.warn("No api-key provided for BingMaps layer");
+    }
+    var layer = new ol.layer.Tile(_objectSpread({
+      minResolution: options.minResolution,
+      maxResolution: options.maxResolution,
+      preload: ConfigUtils.getConfigProp("tilePreloadLevels", null, 0),
+      source: new ol.source.BingMaps(_objectSpread({
+        projection: options.projection,
+        key: options.apiKey,
+        imagerySet: (_options$imagerySet = options.imagerySet) !== null && _options$imagerySet !== void 0 ? _options$imagerySet : options.name
+      }, options.sourceConfig || {}))
+    }, options.layerConfig || {}));
+    return layer;
+  }
+};