qwc2 2025.12.4 → 2025.12.17

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/Print.js

@@ -1196,7 +1196,7 @@ _defineProperty(Print, "propTypes", {
   printExternalLayers: PropTypes.bool,
   /** Whether to print highlights on the map, e.g. selected features or redlining. */
   printMapHighlights: PropTypes.bool,
-  /** Restrict print scale to list of predefine print scales, if any. */
+  /** Restrict print scale to list of predefined print scales, if any. */
   restrictToPrintScales: PropTypes.bool,
   /** Scale factor to apply to line widths, font sizes, ... of redlining drawings passed to GetPrint.  */
   scaleFactor: PropTypes.number,

package/plugins/TopBar.js

@@ -243,6 +243,8 @@ _defineProperty(TopBar, "propTypes", {
   searchOptions: PropTypes.shape({
     /** Whether to show the search filter widget. */
     allowSearchFilters: PropTypes.bool,
+    /** Whether to focus the search field on startup. */
+    focusOnStartup: PropTypes.bool,
     /** Whether to hide the result labels on the map. */
     hideResultLabels: PropTypes.bool,
     /** The style used for highlighting search result geometries. */

package/plugins/map/MeasurementSupport.js

@@ -179,6 +179,7 @@ var MeasurementSupport = /*#__PURE__*/function (_React$Component) {
         opts.headmarker = _this.props.measurement.bearingHeadMarker;
         opts.tailmarker = _this.props.measurement.bearingTailMarker;
       }
+      opts.markerscale = _this.props.measurement.markerScale;
       return [].concat(_toConsumableArray(FeatureStyles.measureInteraction(feature, opts)), [FeatureStyles.measureInteractionVertex({
         geometryFunction: geometryFunction
       })]);

package/plugins/map/RedliningSupport.js

@@ -181,7 +181,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       var isText = feature.get("shape") === "Text";
       var styleName = isText ? "text" : "default";
       var opts = _this.styleOptions(styleProps, isText);
-      if (!feature.get('measurements')) {
+      if (!feature.get('measurements') && _this.selectedFeatures.length <= 1 && !(isText && !styleProps.text)) {
         feature.set('label', styleProps.text);
       }
       feature.set('styleName', styleName);
@@ -559,7 +559,6 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         cloneIds.push(featureObj.id);
         return featureObj;
       });
-      _this.updateRedliningState(true);
       var layer = {
         id: _this.props.redlining.layer,
         title: _this.props.redlining.layerTitle,
@@ -570,7 +569,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         var features = cloneIds.map(function (id) {
           return l.getSource().getFeatureById(id);
         });
-        _this.selectFeatures(features);
+        _this.selectFeatures(features, false);
         while (_this.interactions.length > 0) {
           _this.props.map.removeInteraction(_this.interactions.shift());
         }
@@ -606,13 +605,16 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this, "selectFeatures", function (features) {
+      var updateState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var firstSelection = isEmpty(_this.selectedFeatures);
       features.forEach(function (feature) {
         feature.setStyle(_this.styleFunction);
         feature.on('change', _this.updateMeasurements);
         _this.selectedFeatures.push(feature);
       });
-      _this.updateRedliningState(firstSelection);
+      if (updateState) {
+        _this.updateRedliningState(firstSelection);
+      }
     });
     _defineProperty(_this, "deselectFeature", function (feature, updateState) {
       var styleName = feature.get("shape") === "Text" ? "text" : "default";
@@ -655,7 +657,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         return featureObj;
       }).filter(Boolean);
       if (isEmpty(featureObjects)) {
-        return null;
+        return [];
       }
       var layer = {
         id: redliningProps.layer,

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;
+}