qwc2 2025.12.4 → 2025.12.15

package/icons/oblique.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="oblique.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <inkscape:path-effect
+       effect="perspective-envelope"
+       up_left_point="31.84,8.235"
+       up_right_point="118.21,8.235"
+       down_left_point="6.84,117.332"
+       down_right_point="143.209,117.332"
+       id="path-effect1"
+       is_visible="true"
+       lpeversion="1"
+       deform_type="perspective"
+       horizontal_mirror="false"
+       vertical_mirror="false"
+       overflow_perspective="false" />
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="3.59479"
+     inkscape:cx="50.211556"
+     inkscape:cy="55.775164"
+     inkscape:window-width="1600"
+     inkscape:window-height="842"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m 139.33138,100.40986 c 2.07628,9.061 -1.23538,16.92214 -7.48538,16.92214 H 18.203 c -6.25,0 -9.5619324,-7.85964 -7.485227,-16.92214 L 30.125343,15.717557 C 31.084946,11.529963 35.078345,8.235 39.036814,8.235 h 71.976376 c 3.95847,0 7.95183,3.294963 8.9114,7.482557 z M 37.902612,14.17429 c -0.788552,0 -1.627148,0.722405 -1.790034,1.542582 L 19.292985,100.40846 c -0.338692,1.70541 0.375285,3.22606 1.525768,3.22606 H 129.23037 c 1.14762,0 1.86732,-1.52065 1.52863,-3.22606 L 113.93933,15.716872 c -0.16289,-0.820177 -1.00606,-1.542582 -1.792,-1.542582 z m 9.9385,28.041591 c -5.628345,0 -9.313113,-5.26189 -8.279299,-11.413497 0.976861,-5.812713 5.854252,-10.301547 10.933143,-10.301547 5.076868,0 8.852895,4.488834 8.40881,10.301547 -0.469976,6.151607 -5.435804,11.413497 -11.062654,11.413497 z M 120.62564,91.150498 H 29.419956 L 32.243929,74.346727 53.872491,50.541182 62.079678,61.858035 89.407567,29.014214 114.54115,54.940506 Z"
+     id="path1"
+     inkscape:path-effect="#path-effect1"
+     inkscape:original-d="m 143.209,105.968 c 0,6.25 -5.113,11.364 -11.363,11.364 H 18.203 c -6.25,0 -11.363,-5.113 -11.363,-11.364 v -86.37 c 0,-6.25 5.113,-11.363 11.363,-11.363 h 113.643 c 6.25,0 11.363,5.113 11.363,11.363 z M 18.203,17.326 c -1.207,0 -2.271,1.068 -2.271,2.271 v 86.37 c 0,1.207 1.065,2.271 2.271,2.271 h 113.643 c 1.203,0 2.274,-1.064 2.274,-2.271 v -86.37 c 0,-1.203 -1.071,-2.271 -2.274,-2.271 H 18.203 Z m 20.458,36.365 c -7.529,0 -13.641,-6.108 -13.641,-13.635 0,-7.527 6.112,-13.638 13.641,-13.638 7.526,0 13.632,6.111 13.632,13.638 0,7.527 -6.105,13.635 -13.632,13.635 z M 125.025,99.15 H 25.02 V 85.51 l 22.73,-22.724 11.363,11.36 36.365,-36.361 29.547,29.547 z"
+     transform="matrix(0.16942427,0,0,0.16942427,-0.71096897,1.3629513)" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2025.12.04",
+    "version": "2025.12.15",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",
@@ -17,7 +17,6 @@
     ],
     "dependencies": {
         "@furkot/webfonts-generator": "^2.0.2",
-        "@sourcepole/qwc-giro3d": "^0.44.0-dev",
         "@kayahr/text-encoding": "^2.0.0",
         "@loaders.gl/core": "^4.3.3",
         "@loaders.gl/shapefile": "^4.3.3",
@@ -26,7 +25,9 @@
         "@norbulcz/num-parse": "^0.1.0",
         "@panoramax/web-viewer": "^4.0.1",
         "@reduxjs/toolkit": "^2.4.0",
+        "@sourcepole/qwc-giro3d": "^0.44.0-dev",
         "@turf/buffer": "^6.5.0",
+        "@turf/clean-coords": "^7.3.1",
         "@turf/helpers": "^6.5.0",
         "@vtaits/react-color-picker": "^2.0.0",
         "any-date-parser": "^1.5.4",

package/plugins/Cyclomedia.js

@@ -173,6 +173,7 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this, "cyclomediaIndexHtml", function () {
+      var _window$__CSP_NONCE__, _window$__CSP_NONCE__2, _window$__CSP_NONCE__3, _window$__CSP_NONCE__4;
       var supportedLang = ["de", "en-GB", "en-US", "fi", "fr", "nl", "tr", "pl"];
       var lang = LocaleUtils.lang();
       if (supportedLang.indexOf(lang) < 0) {
@@ -182,7 +183,7 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
         }
       }
       var loginOauth = !!_this.props.clientId && !_this.state.loginFailed;
-      return "\n            <!DOCTYPE html>\n            <html>\n            <head>\n            <script type=\"text/javascript\" src=\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\"></script>\n            <script type=\"text/javascript\" src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\"></script>\n            <script type=\"text/javascript\" src=\"https://streetsmart.cyclomedia.com/api/v".concat(_this.props.cyclomediaVersion, "/StreetSmartApi.js\"></script>\n            <script type=\"text/javascript\">\n            let apiInitialized = false;\n            let initCallback = null;\n            let posCallback = null;\n            let measureCallback = null;\n\n            function initApi() {\n                StreetSmartApi.init({\n                    targetElement: document.getElementById(\"streetsmartApi\"),\n                    username: \"").concat(_this.state.username || undefined, "\",\n                    password: \"").concat(_this.state.password || undefined, "\",\n                    apiKey: \"").concat(_this.props.apikey, "\",\n                    clientId: \"").concat(_this.props.clientId, "\",\n                    loginOauth: ").concat(loginOauth, ",\n                    loginRedirectUri: \"").concat(_this.props.loginRedirectUri, "\",\n                    logoutRedirectUri: \"").concat(_this.props.logoutRedirectUri, "\",\n                    srs: \"").concat(_this.props.projection, "\",\n                    locale: \"").concat(lang, "\",\n                    configurationUrl: 'https://atlas.cyclomedia.com/configuration',\n                    addressSettings: {\n                        locale: \"us\",\n                        database: \"Nokia\"\n                    }\n                }).then(() => {\n                    apiInitialized = true;\n                    if (initCallback) {\n                        initCallback(true);\n                    }\n                }, (e) => {\n                    apiInitialized = false;\n                    if (initCallback) {\n                        initCallback(false, e.message);\n                    }\n                });\n            }\n            function openImage(posStr, crs) {\n                if (!apiInitialized) {\n                    return;\n                }\n                StreetSmartApi.open(posStr, {\n                    viewerType: StreetSmartApi.ViewerType.PANORAMA,\n                    srs: crs,\n                    panoramaViewer: {\n                         closable: false,\n                         maximizable: true,\n                         replace: true,\n                         recordingsVisible: true,\n                         navbarVisible: true,\n                         timeTravelVisible: true,\n                         measureTypeButtonVisible: true,\n                         measureTypeButtonStart: true,\n                         measureTypeButtonToggle: true,\n                     },\n                }).then((result) => {\n                    if (result && result[0]){\n                        window.panoramaViewer = result[0];\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.IMAGE_CHANGE, changeView);\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.VIEW_CHANGE, changeView);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_CHANGED, changeMeasurement);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_STOPPED, stopMeasurement);\n                    }\n                }).catch((reason) => {\n                    console.log('Failed to create component(s) through API: ' + reason);\n                });\n            }\n            function changeView() {\n                if (posCallback) {\n                    const recording = window.panoramaViewer.getRecording();\n                    const orientation = window.panoramaViewer.getOrientation();\n                    const pos = recording.xyz;\n                    const posData = {\n                        pos: [pos[0], pos[1]],\n                        crs: recording.srs,\n                        yaw: orientation.yaw * Math.PI / 180,\n                        hFov: orientation.hFov * Math.PI / 180.0\n                    }\n                    posCallback(posData);\n                }\n            }\n            function changeMeasurement(e) {\n                measureCallback(e.detail.activeMeasurement);\n            }\n            function stopMeasurement() {\n                measureCallback(null);\n            }\n            function registerCallbacks(_initCallback, _posCallback, _measureCallback) {\n                initCallback = _initCallback;\n                posCallback = _posCallback;\n                measureCallback = _measureCallback;\n            }\n            </script>\n            <style>\n              html, body, #streetsmartApi {height: 100%;}\n            </style>\n            </head>\n            <body style=\"margin: 0\">\n            <div id=\"streetsmartApi\">\n            </div>\n            </body>\n            </html>\n        ");
+      return "\n            <!DOCTYPE html>\n            <html>\n            <head>\n            <script nonce=\"".concat((_window$__CSP_NONCE__ = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__ !== void 0 ? _window$__CSP_NONCE__ : '', "\" type=\"text/javascript\" src=\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__2 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__2 !== void 0 ? _window$__CSP_NONCE__2 : '', "\" type=\"text/javascript\" src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__3 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__3 !== void 0 ? _window$__CSP_NONCE__3 : '', "\" type=\"text/javascript\" src=\"https://streetsmart.cyclomedia.com/api/v").concat(_this.props.cyclomediaVersion, "/StreetSmartApi.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__4 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__4 !== void 0 ? _window$__CSP_NONCE__4 : '', "\" type=\"text/javascript\">\n            let apiInitialized = false;\n            let initCallback = null;\n            let posCallback = null;\n            let measureCallback = null;\n\n            function initApi() {\n                StreetSmartApi.init({\n                    targetElement: document.getElementById(\"streetsmartApi\"),\n                    username: \"").concat(_this.state.username || undefined, "\",\n                    password: \"").concat(_this.state.password || undefined, "\",\n                    apiKey: \"").concat(_this.props.apikey, "\",\n                    clientId: \"").concat(_this.props.clientId, "\",\n                    loginOauth: ").concat(loginOauth, ",\n                    loginRedirectUri: \"").concat(_this.props.loginRedirectUri, "\",\n                    logoutRedirectUri: \"").concat(_this.props.logoutRedirectUri, "\",\n                    srs: \"").concat(_this.props.projection, "\",\n                    locale: \"").concat(lang, "\",\n                    configurationUrl: 'https://atlas.cyclomedia.com/configuration',\n                    addressSettings: {\n                        locale: \"us\",\n                        database: \"Nokia\"\n                    }\n                }).then(() => {\n                    apiInitialized = true;\n                    if (initCallback) {\n                        initCallback(true);\n                    }\n                }, (e) => {\n                    apiInitialized = false;\n                    if (initCallback) {\n                        initCallback(false, e.message);\n                    }\n                });\n            }\n            function openImage(posStr, crs) {\n                if (!apiInitialized) {\n                    return;\n                }\n                StreetSmartApi.open(posStr, {\n                    viewerType: StreetSmartApi.ViewerType.PANORAMA,\n                    srs: crs,\n                    panoramaViewer: {\n                         closable: false,\n                         maximizable: true,\n                         replace: true,\n                         recordingsVisible: true,\n                         navbarVisible: true,\n                         timeTravelVisible: true,\n                         measureTypeButtonVisible: true,\n                         measureTypeButtonStart: true,\n                         measureTypeButtonToggle: true,\n                     },\n                }).then((result) => {\n                    if (result && result[0]){\n                        window.panoramaViewer = result[0];\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.IMAGE_CHANGE, changeView);\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.VIEW_CHANGE, changeView);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_CHANGED, changeMeasurement);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_STOPPED, stopMeasurement);\n                    }\n                }).catch((reason) => {\n                    console.log('Failed to create component(s) through API: ' + reason);\n                });\n            }\n            function changeView() {\n                if (posCallback) {\n                    const recording = window.panoramaViewer.getRecording();\n                    const orientation = window.panoramaViewer.getOrientation();\n                    const pos = recording.xyz;\n                    const posData = {\n                        pos: [pos[0], pos[1]],\n                        crs: recording.srs,\n                        yaw: orientation.yaw * Math.PI / 180,\n                        hFov: orientation.hFov * Math.PI / 180.0\n                    }\n                    posCallback(posData);\n                }\n            }\n            function changeMeasurement(e) {\n                measureCallback(e.detail.activeMeasurement);\n            }\n            function stopMeasurement() {\n                measureCallback(null);\n            }\n            function registerCallbacks(_initCallback, _posCallback, _measureCallback) {\n                initCallback = _initCallback;\n                posCallback = _posCallback;\n                measureCallback = _measureCallback;\n            }\n            </script>\n            <style>\n              html, body, #streetsmartApi {height: 100%;}\n            </style>\n            </head>\n            <body style=\"margin: 0\">\n            <div id=\"streetsmartApi\">\n            </div>\n            </body>\n            </html>\n        ");
     });
     _defineProperty(_this, "addRecordingsWFS", function () {
       var layer = {

package/plugins/ObliqueView.js

@@ -0,0 +1,410 @@
+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 2025 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 axios from 'axios';
+import ol from 'openlayers';
+import PropTypes from 'prop-types';
+import { setCurrentTask } from '../actions/task';
+import Icon from '../components/Icon';
+import ResizeableWindow from '../components/ResizeableWindow';
+import LayerRegistry from '../components/map/layers/index';
+import InputContainer from '../components/widgets/InputContainer';
+import ConfigUtils from '../utils/ConfigUtils';
+import LayerUtils from '../utils/LayerUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MapUtils from '../utils/MapUtils';
+import MiscUtils from '../utils/MiscUtils';
+import './style/ObliqueView.css';
+
+/**
+ * Display oblique satellite imagery.
+ */
+var ObliqueView = /*#__PURE__*/function (_React$Component) {
+  function ObliqueView(props) {
+    var _this;
+    _classCallCheck(this, ObliqueView);
+    _this = _callSuper(this, ObliqueView, [props]);
+    _defineProperty(_this, "onClose", function () {
+      _this.setState(ObliqueView.defaultState);
+    });
+    _defineProperty(_this, "renderScaleChooser", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-scalechooser"
+      }, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("bottombar.scale_label"), ":\xA0"), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement("span", {
+        role: "prefix"
+      }, " 1 : "), /*#__PURE__*/React.createElement("select", {
+        onChange: function onChange(ev) {
+          return _this.setState({
+            currentZoom: parseInt(ev.target.value, 10)
+          });
+        },
+        role: "input",
+        value: _this.state.currentZoom
+      }, _this.props.scales.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("option", {
+          key: index,
+          value: index
+        }, LocaleUtils.toLocaleFixed(item, 0));
+      }))));
+    });
+    _defineProperty(_this, "changeZoom", function (delta) {
+      _this.setState(function (state) {
+        return {
+          currentZoom: Math.max(0, Math.min(state.currentZoom + delta, _this.props.scales.length - 1))
+        };
+      });
+    });
+    _defineProperty(_this, "queryDatasetConfig", function () {
+      var obliqueImageryServiceUrl = ConfigUtils.getConfigProp('obliqueImageryServiceUrl');
+      if (_this.state.selectedDataset && obliqueImageryServiceUrl) {
+        var reqUrl = obliqueImageryServiceUrl.replace(/\/$/, '') + "/".concat(_this.state.selectedDataset, "/config");
+        axios.get(reqUrl).then(function (response) {
+          var datasetConfig = response.data;
+          var direction = 'n' in datasetConfig.image_centers ? 'n' : Object.keys(datasetConfig.image_centers)[0];
+          _this.setState({
+            datasetConfig: datasetConfig,
+            currentDirection: direction
+          });
+        })["catch"](function () {
+          /* eslint-disable-next-line */
+          console.warn("Failed to load dataset config");
+        });
+      }
+    });
+    _defineProperty(_this, "setupLayer", function () {
+      var datasetConfig = _this.state.datasetConfig;
+      var projection = new ol.proj.Projection({
+        code: datasetConfig.crs,
+        extent: datasetConfig.extent,
+        units: "m"
+      });
+      var targetScale = _this.props.initialScale;
+      var zoom = _this.props.scales.reduce(function (best, v, i) {
+        return Math.abs(v - targetScale) < Math.abs(_this.props.scales[best] - targetScale) ? i : best;
+      }, 0);
+      _this.map.setView(new ol.View({
+        projection: projection,
+        // extent: datasetConfig.extent,
+        center: ol.extent.getCenter(datasetConfig.extent),
+        rotation: _this.getRotation() / 180 * Math.PI,
+        zoom: zoom,
+        resolutions: MapUtils.getResolutionsForScales(_this.props.scales, datasetConfig.crs),
+        constrainResolution: true
+        // showFullExtent: true
+      }));
+      _this.setState({
+        currentZoom: zoom
+      });
+      _this.map.on('moveend', function () {
+        _this.setState(function (state) {
+          var newZoom = _this.map.getView().getZoom();
+          if (newZoom !== state.currentZoom) {
+            return {
+              currentZoom: newZoom
+            };
+          }
+          return null;
+        });
+      });
+      var layers = [];
+      var themeConfig = _this.props.theme.obliqueDatasets.find(function (entry) {
+        return entry.name === _this.state.selectedDataset;
+      });
+      if (themeConfig.backgroundLayer) {
+        var _themeConfig$backgrou;
+        var layerConfig = LayerUtils.splitLayerUrlParam(themeConfig.backgroundLayer);
+        layerConfig.version = _this.props.themes.defaultWMSVersion || "1.3.0";
+        layerConfig.opacity = (_themeConfig$backgrou = themeConfig.backgroundOpacity) !== null && _themeConfig$backgrou !== void 0 ? _themeConfig$backgrou : 127;
+        var layerCreator = LayerRegistry[layerConfig.type];
+        if (layerCreator) {
+          layers.push(layerCreator.create(layerConfig, _this.map));
+        }
+      }
+      _this.obliqueImageryLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          projection: projection,
+          tileGrid: new ol.tilegrid.TileGrid({
+            extent: datasetConfig.extent,
+            resolutions: datasetConfig.resolutions,
+            tileSize: datasetConfig.tileSize,
+            origin: datasetConfig.origin
+          }),
+          url: datasetConfig.url,
+          crossOrigin: "anonymous",
+          tileLoadFunction: function tileLoadFunction(tile, src) {
+            var _this$closestImage;
+            if (((_this$closestImage = _this.closestImage) !== null && _this$closestImage !== void 0 ? _this$closestImage : null) !== null) {
+              src += "?img=" + _this.closestImage;
+            }
+            tile.getImage().src = src.replace('{direction}', _this.state.currentDirection);
+          }
+        })
+      });
+      layers.push(_this.obliqueImageryLayer);
+      _this.map.setLayers(layers);
+    });
+    _defineProperty(_this, "searchClosestImage", function () {
+      var _this$state$datasetCo;
+      var best = null;
+      var imageCenters = (_this$state$datasetCo = _this.state.datasetConfig) === null || _this$state$datasetCo === void 0 || (_this$state$datasetCo = _this$state$datasetCo.image_centers) === null || _this$state$datasetCo === void 0 ? void 0 : _this$state$datasetCo[_this.state.currentDirection];
+      if (imageCenters) {
+        var center = _this.map.getView().getCenter();
+        var dsqr = function dsqr(p, q) {
+          return (p[0] - q[0]) * (p[0] - q[0]) + (p[1] - q[1]) * (p[1] - q[1]);
+        };
+        best = 0;
+        var bestDist = dsqr(center, imageCenters[0]);
+        for (var i = 1; i < imageCenters.length; ++i) {
+          var dist = dsqr(center, imageCenters[i]);
+          if (dist < bestDist) {
+            bestDist = dist;
+            best = i;
+          }
+        }
+      }
+      if (best !== _this.closestImage) {
+        if (_this.obliqueImageryLayer) {
+          _this.obliqueImageryLayer.getSource().refresh();
+        }
+        _this.closestImage = best;
+      }
+    });
+    _defineProperty(_this, "getRotation", function () {
+      return {
+        n: 0,
+        w: 90,
+        e: -90,
+        s: 180
+      }[_this.state.currentDirection];
+    });
+    var controls = ol.control.defaults({
+      zoom: false,
+      attribution: false,
+      rotate: false
+    });
+    var interactions = ol.interaction.defaults({
+      onFocusOnly: false
+    });
+    _this.map = new ol.Map({
+      controls: controls,
+      interactions: interactions
+    });
+    _this.map.on('moveend', _this.searchClosestImage);
+    _this.map.on('rotateend', _this.searchClosestImage);
+    _this.closestImage = null;
+    _this.obliqueImageryLayer = null;
+    _this.state = ObliqueView.defaultState;
+    return _this;
+  }
+  _inherits(ObliqueView, _React$Component);
+  return _createClass(ObliqueView, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.props.active && !prevProps.active) {
+        this.setState({
+          active: true
+        });
+        this.props.setCurrentTask(null);
+      }
+      if (this.props.active && this.props.theme && this.props.theme !== prevProps.theme || this.props.active && !prevProps.active) {
+        var _datasets$find$name, _datasets$find, _datasets$;
+        var datasets = this.props.theme.obliqueDatasets || [];
+        var defaultDataset = (_datasets$find$name = (_datasets$find = datasets.find(function (entry) {
+          return entry["default"];
+        })) === null || _datasets$find === void 0 ? void 0 : _datasets$find.name) !== null && _datasets$find$name !== void 0 ? _datasets$find$name : (_datasets$ = datasets[0]) === null || _datasets$ === void 0 ? void 0 : _datasets$.name;
+        this.setState({
+          selectedDataset: defaultDataset,
+          datasetConfig: null,
+          currentDirection: null
+        });
+      }
+      if (this.state.selectedDataset !== prevState.selectedDataset) {
+        this.closestImage = null;
+        this.obliqueImageryLayer = null;
+        this.queryDatasetConfig();
+      }
+      if (this.state.datasetConfig && this.state.datasetConfig !== prevState.datasetConfig) {
+        this.setupLayer();
+      }
+      if (this.state.datasetConfig && this.state.currentDirection !== prevState.currentDirection) {
+        var _this$obliqueImageryL, _this$obliqueImageryL2, _this$obliqueImageryL3, _this$map$getView, _this$map$getView$set;
+        (_this$obliqueImageryL = this.obliqueImageryLayer) === null || _this$obliqueImageryL === void 0 || (_this$obliqueImageryL2 = _this$obliqueImageryL.getSource) === null || _this$obliqueImageryL2 === void 0 || (_this$obliqueImageryL2 = _this$obliqueImageryL2.call(_this$obliqueImageryL)) === null || _this$obliqueImageryL2 === void 0 || (_this$obliqueImageryL3 = _this$obliqueImageryL2.refresh) === null || _this$obliqueImageryL3 === void 0 || _this$obliqueImageryL3.call(_this$obliqueImageryL2);
+        (_this$map$getView = this.map.getView()) === null || _this$map$getView === void 0 || (_this$map$getView$set = _this$map$getView.setRotation) === null || _this$map$getView$set === void 0 || _this$map$getView$set.call(_this$map$getView, this.getRotation() / 180 * Math.PI);
+      }
+      if (this.state.datasetConfig && this.state.currentZoom !== prevState.currentZoom) {
+        var _this$map$getView2, _this$map$getView2$se;
+        (_this$map$getView2 = this.map.getView()) === null || _this$map$getView2 === void 0 || (_this$map$getView2$se = _this$map$getView2.setZoom) === null || _this$map$getView2$se === void 0 || _this$map$getView2$se.call(_this$map$getView2, this.state.currentZoom);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.state.active) {
+        return null;
+      }
+      var rot = this.getRotation();
+      return /*#__PURE__*/React.createElement(ResizeableWindow, {
+        dockable: this.props.geometry.side,
+        icon: "oblique",
+        initialHeight: this.props.geometry.initialHeight,
+        initialWidth: this.props.geometry.initialWidth,
+        initialX: this.props.geometry.initialX,
+        initialY: this.props.geometry.initialY,
+        initiallyDocked: this.props.geometry.initiallyDocked,
+        onClose: this.onClose,
+        splitScreenWhenDocked: true,
+        splitTopAndBottomBar: true,
+        title: LocaleUtils.tr("obliqueview.title")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-body"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-map",
+        ref: function ref(el) {
+          return _this2.map.setTarget(el);
+        },
+        tabIndex: 0
+      }), !this.state.selectedDataset && /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-empty-overlay"
+      }, LocaleUtils.tr("obliqueview.nodataset")), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-nav-rotate",
+        style: {
+          transform: "rotate(".concat(rot, "deg)")
+        }
+      }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "n"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "N"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "w"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "W"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "e"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "E"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "s"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "S"), /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-nav-zoom"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "plus",
+        onClick: function onClick() {
+          return _this2.changeZoom(+1);
+        }
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "minus",
+        onClick: function onClick() {
+          return _this2.changeZoom(-1);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-bottombar"
+      }, this.renderScaleChooser())));
+    }
+  }]);
+}(React.Component);
+_defineProperty(ObliqueView, "propTypes", {
+  active: PropTypes.bool,
+  /** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */
+  geometry: PropTypes.shape({
+    initialWidth: PropTypes.number,
+    initialHeight: PropTypes.number,
+    initialX: PropTypes.number,
+    initialY: PropTypes.number,
+    initiallyDocked: PropTypes.bool,
+    side: PropTypes.string
+  }),
+  /** The initial map scale. */
+  initialScale: PropTypes.number,
+  mapBbox: PropTypes.object,
+  projection: PropTypes.string,
+  /** A list of allowed map scales, in decreasing order. */
+  scales: PropTypes.arrayOf(PropTypes.number),
+  setCurrentTask: PropTypes.func,
+  theme: PropTypes.object,
+  themes: PropTypes.object
+});
+_defineProperty(ObliqueView, "defaultProps", {
+  geometry: {
+    initialWidth: 480,
+    initialHeight: 640,
+    initialX: 0,
+    initialY: 0,
+    initiallyDocked: true,
+    side: 'left'
+  },
+  initialScale: 1000,
+  scales: [20000, 10000, 5000, 2500, 1000, 500, 250]
+});
+_defineProperty(ObliqueView, "defaultState", {
+  active: false,
+  selectedDataset: null,
+  datasetConfig: null,
+  currentDirection: null,
+  currentZoom: 0
+});
+export default connect(function (state) {
+  return {
+    active: state.task.id === "ObliqueView",
+    mapBbox: state.map.bbox,
+    theme: state.theme.current,
+    themes: state.theme.themes
+  };
+}, {
+  setCurrentTask: setCurrentTask
+})(ObliqueView);

package/plugins/style/Map.css

@@ -9,8 +9,10 @@ div.map-contents {
 /* Move and re-style rotation reset button */
 div.ol-rotate {
     padding: 0;
-    top: 4em!important;
-    right: 0.5em!important;
+    bottom: 2.75em!important;
+    left: 0.5em!important;
+    right: initial!important;
+    top: initial!important;
 }
 
 div.ol-rotate button {

package/plugins/style/ObliqueView.css

@@ -0,0 +1,112 @@
+div.obliqueview-body {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+div.obliqueview-empty-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(200, 200, 200);
+    z-index: 4;
+}
+
+div.obliqueview-map {
+    height: 100%;
+}
+
+div.obliqueview-nav-rotate {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 4em;
+    height: 4em;
+    border-radius: 3em;
+    color: var(--map-button-text-color);
+    background-color: var(--map-button-bg-color);
+    box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.5);
+    margin-bottom: 0.5em;
+    transition: transform 0.5s;
+}
+
+div.obliqueview-nav-rotate > span {
+    flex: 0 0 1.25em;
+}
+
+span.obliqueview-nav-dir {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.5s;
+}
+
+div.obliqueview-nav-zoom {
+    position: absolute;
+    right: 0.5em;
+    top: 6em;
+    width: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--map-button-text-color);
+    background-color: var(--map-button-bg-color);
+    box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.5);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.5s, color 0.5s;
+    flex-direction: column;
+    margin: 0 1.5em 0.5em 1em;
+}
+
+div.obliqueview-nav-zoom > span {
+    height: 2em;
+    width: 1.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+div.obliqueview-nav-zoom > span:first-child {
+    border-bottom: 1px solid var(--map-button-text-color);
+}
+
+div.obliqueview-bottombar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3em;
+    z-index: 100;
+    color: var(--panel-text-color);
+    background-color: var(--panel-bg-color);
+    box-shadow: 0 -2px 4px rgba(136, 136, 136, 0.5);
+    backdrop-filter: blur(3px);
+    font-size: 75%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+div.obliqueview-scalechooser {
+    width: 10em;
+    display: flex;
+    align-items: center;
+}
+
+div.obliqueview-scalechooser > div.input-container {
+    flex: 1 1 auto;
+}

package/scripts/themesConfig.js

@@ -588,6 +588,7 @@ function getTheme(config, configItem, result, resultItem, proxy) {
       resultItem.mapTips = configItem.mapTips;
       resultItem.userMap = configItem.userMap;
       resultItem.map3d = configItem.map3d;
+      resultItem.obliqueDatasets = configItem.obliqueDatasets;
       resultItem.viewMode = configItem.viewMode;
       resultItem.editConfig = getEditConfig(configItem.editConfig);
 

package/scripts/themesConfig.py

@@ -540,6 +540,8 @@ def getTheme(config, configItem, result, resultItem):
 
         if "map3d" in configItem:
             resultItem["map3d"] = configItem["map3d"]
+        if "obliqueDatasets" in configItem:
+            resultItem["obliqueDatasets"] = configItem["obliqueDatasets"]
         if "viewMode" in configItem:
             resultItem["viewMode"] = configItem["viewMode"]
 

package/static/translations/bg-BG.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Измерване на линия",
         "MeasurePolygon": "Измерване на полигон",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "Портал",
         "PrintScreen3D": "Експорт на мрежата",
@@ -461,6 +462,10 @@
       "width": "Ширина",
       "windowtitle": "Цифрово въвеждане"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/ca-ES.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Mesurar una línia",
         "MeasurePolygon": "Mesurar un polígon",
         "NewsPopup": "Notícies",
+        "ObliqueView": "",
         "Panoramax": "Panoramax",
         "Portal": "Portal",
         "PrintScreen3D": "Exportar ràster",
@@ -461,6 +462,10 @@
       "width": "Amplada",
       "windowtitle": "Entrada numèrica"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "No hi ha imatge disponible per a aquesta ubicació.",
       "title": "Visor Panoramax"

package/static/translations/cs-CZ.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Změřit úsek",
         "MeasurePolygon": "Měřit mnohoúhelník",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/de-CH.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Messen Linie",
         "MeasurePolygon": "Messen Polygon",
         "NewsPopup": "Aktuelles",
+        "ObliqueView": "Schrägluftbildansicht",
         "Panoramax": "Panoramax",
         "Portal": "Portal",
         "PrintScreen3D": "Raster Export",
@@ -461,6 +462,10 @@
       "width": "Breite",
       "windowtitle": "Numerische Eingabe"
     },
+    "obliqueview": {
+      "nodataset": "Keine Schrägluftbilder verfügbar",
+      "title": "Schrägluftbildansicht"
+    },
     "panoramax": {
       "notfound": "An diesem Ort ist kein Bild verfügbar.",
       "title": "Panoramax Viewer"

package/static/translations/de-DE.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Messen Linie",
         "MeasurePolygon": "Messen Polygon",
         "NewsPopup": "Aktuelles",
+        "ObliqueView": "Schrägluftbildansicht",
         "Panoramax": "Panoramax",
         "Portal": "Portal",
         "PrintScreen3D": "Raster Export",
@@ -461,6 +462,10 @@
       "width": "Breite",
       "windowtitle": "Numerische Eingabe"
     },
+    "obliqueview": {
+      "nodataset": "Keine Schrägluftbilder verfügbar",
+      "title": "Schrägluftbildansicht"
+    },
     "panoramax": {
       "notfound": "An diesem Ort ist kein Bild verfügbar.",
       "title": "Panoramax Viewer"

package/static/translations/en-US.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Measure a line",
         "MeasurePolygon": "Measure a polygon",
         "NewsPopup": "News",
+        "ObliqueView": "Oblique Aerial View",
         "Panoramax": "Panoramax",
         "Portal": "Portal",
         "PrintScreen3D": "Raster Export",
@@ -461,6 +462,10 @@
       "width": "Width",
       "windowtitle": "Numeric input"
     },
+    "obliqueview": {
+      "nodataset": "No oblique imagery available",
+      "title": "Oblique Aerial View"
+    },
     "panoramax": {
       "notfound": "There is no image available for this location.",
       "title": "Panoramax Viewer"

package/static/translations/es-ES.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Medir una línea",
         "MeasurePolygon": "Medir un polígono",
         "NewsPopup": "Noticias",
+        "ObliqueView": "",
         "Panoramax": "Panoramax",
         "Portal": "Portal",
         "PrintScreen3D": "Exportar ráster",
@@ -461,6 +462,10 @@
       "width": "Ancho",
       "windowtitle": "Entrada numérica"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "No hay imagen disponible para esta ubicación.",
       "title": "Visor Panoramax"

package/static/translations/fi-FI.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Mittaa viiva",
         "MeasurePolygon": "Mittaa monikulmion",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/fr-FR.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Mesurer une ligne",
         "MeasurePolygon": "Mesurer un polygone",
         "NewsPopup": "Actualités",
+        "ObliqueView": "Vue aérienne oblique",
         "Panoramax": "Panoramax",
         "Portal": "Portail",
         "PrintScreen3D": "Export raster",
@@ -461,6 +462,10 @@
       "width": "Largeur",
       "windowtitle": "Entrée numérique"
     },
+    "obliqueview": {
+      "nodataset": "Aucune image aérienne oblique disponible",
+      "title": "Vue aérienne oblique"
+    },
     "panoramax": {
       "notfound": "Il n'y a pas d'image disponible pour cet emplacement.",
       "title": "Visionneuse Panoramax"

package/static/translations/hu-HU.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Mérési vonal",
         "MeasurePolygon": "Mérési sokszög",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/it-IT.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Misura una linea",
         "MeasurePolygon": "Misura un poligono",
         "NewsPopup": "Attualità",
+        "ObliqueView": "Vista aerea obliqua",
         "Panoramax": "Panoramax",
         "Portal": "Portale",
         "PrintScreen3D": "Esporta raster",
@@ -461,6 +462,10 @@
       "width": "Larghezza",
       "windowtitle": "Formulario numerico"
     },
+    "obliqueview": {
+      "nodataset": "Nessuna immagine aerea obliqua disponibile",
+      "title": "Vista aerea obliqua"
+    },
     "panoramax": {
       "notfound": "Nessun immagine disponibile per questa posizione",
       "title": "Visualizzatore Panoramax"

package/static/translations/ja-JP.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "ラインを測る",
         "MeasurePolygon": "ポリゴンを測る",
         "NewsPopup": "ニュース",
+        "ObliqueView": "",
         "Panoramax": "Panoramax",
         "Portal": "ポータル",
         "PrintScreen3D": "ラスタ・エクスポート",
@@ -461,6 +462,10 @@
       "width": "幅",
       "windowtitle": "数値入力"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "この場所には表示できる画像がありません。",
       "title": "Panoramax Viewer"

package/static/translations/nl-NL.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "lengte meten",
         "MeasurePolygon": "Oppervlakte meten",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "Portal",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "Breedte",
       "windowtitle": "Numerieke invoer"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/no-NO.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Måle en linje",
         "MeasurePolygon": "Måle en polygon",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/pl-PL.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Zmierzyć linię",
         "MeasurePolygon": "Zmierzyć wielokąt",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/pt-BR.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Medir uma linha",
         "MeasurePolygon": "Medir um polígono",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "Largura",
       "windowtitle": "Título da janela"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/pt-PT.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Medir Linha",
         "MeasurePolygon": "Medir Polígono",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "Largura",
       "windowtitle": "Entrada Numérica"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/ro-RO.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Măsoară o linie",
         "MeasurePolygon": "Măsoară un poligon",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "Lățimea",
       "windowtitle": "Valori numerice"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/ru-RU.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "измерить линию",
         "MeasurePolygon": "измерить многоугольник",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/sv-SE.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Mäta en linje",
         "MeasurePolygon": "Mäta en polygon",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/tr-TR.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Çizgi Ölç",
         "MeasurePolygon": "Alan Ölç",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "Portal",
         "PrintScreen3D": "Görüntüyü ver",
@@ -461,6 +462,10 @@
       "width": "Genişlik",
       "windowtitle": "Sayısal giriş"
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/static/translations/tsconfig.json

@@ -45,6 +45,7 @@
     "appmenu.items.MeasureLineString",
     "appmenu.items.MeasurePolygon",
     "appmenu.items.NewsPopup",
+    "appmenu.items.ObliqueView",
     "appmenu.items.ObjectList",
     "appmenu.items.Panoramax",
     "appmenu.items.Portal",
@@ -401,6 +402,8 @@
     "numericinput.side",
     "numericinput.width",
     "numericinput.windowtitle",
+    "obliqueview.nodataset",
+    "obliqueview.title",
     "panoramax.notfound",
     "panoramax.title",
     "pickfeature.querying",

package/static/translations/uk-UA.json

@@ -50,6 +50,7 @@
         "MeasureLineString": "Поміряти відрізок",
         "MeasurePolygon": "Виміряти полігон",
         "NewsPopup": "",
+        "ObliqueView": "",
         "Panoramax": "",
         "Portal": "",
         "PrintScreen3D": "",
@@ -461,6 +462,10 @@
       "width": "",
       "windowtitle": ""
     },
+    "obliqueview": {
+      "nodataset": "",
+      "title": ""
+    },
     "panoramax": {
       "notfound": "",
       "title": ""

package/utils/VectorLayerUtils.js

@@ -19,6 +19,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * LICENSE file in the root directory of this source tree.
  */
 
+import cleanCords from '@turf/clean-coords';
 import geojsonBbox from 'geojson-bounding-box';
 import isEmpty from 'lodash.isempty';
 import { getDefaultImageStyle } from 'ol/format/KML';
@@ -74,8 +75,14 @@ var VectorLayerUtils = {
               })
             });
           }
-          return VectorLayerUtils.simplifyFeature(feature);
-        }).flat();
+          try {
+            return VectorLayerUtils.simplifyFeature(feature);
+          } catch (e) {
+            /* eslint-disable-next-line */
+            console.warn("Skipping invalid geometry");
+            return null;
+          }
+        }).filter(Boolean).flat();
         var _iterator2 = _createForOfIteratorHelper(features),
           _step2;
         try {
@@ -180,7 +187,7 @@ var VectorLayerUtils = {
         }));
       }).flat();
     } else if (feature.geometry.type === "Polygon") {
-      return simplepolygon(feature).features.map(function (feat, idx, features) {
+      return simplepolygon(cleanCords(feature)).features.map(function (feat, idx, features) {
         if (feat.properties.parent >= 0) {
           features[feat.properties.parent].geometry.coordinates.push(feat.geometry.coordinates[0]);
           return null;