Add option to show scale bar

.coveragerc

@@ -1,6 +1,10 @@
 [run]
 source = oereb_client
 omit =
+    *.config.js
+    *.config.cjs
+    __mocks__/*
+    docs/*
     test/*
     samples/*
     */routes.py

CHANGELOG.rst

@@ -10,6 +10,7 @@ https://github.com/openoereb/oereb_client/milestone/13
 - Show message in user interface, if "getegrid" returns no results
 - Add option to hide real estate highlight
 - Add option to hide background map
+- Add option to show scale bar
 - Add web app manifest and icons
 - Update node version
 - Update to React 18

MANIFEST.in

@@ -2,4 +2,4 @@ include *.rst
 recursive-include oereb_client/static/build *.js *.css *.txt *.woff *.woff2
 recursive-include oereb_client/static/i18n *.json
 recursive-include oereb_client/static/images *.png *.jpg
-recursive-include oereb_client/templates *.html
+recursive-include oereb_client/templates *.html *.json

docs/src/Configuration.stories.mdx

@@ -272,6 +272,9 @@ oereb_client:
   # [OPTIONAL] Enable tiled WMS requests (default is False)
   use_tile_wms: True
 
+  # [OPTIONAL] Show scale bar (default is False)
+  show_scale_bar: True
+
   # [OPTIONAL] OeREB web service base URL
   # This parameter is only needed, if you are running your OeREB web
   # service in a separate application/container with a different base URL.

oereb_client.yml

@@ -122,3 +122,5 @@ oereb_client:
   user_guide: https://example.com/guide/{lang}
 
   custom_css_url: samples/static/custom.css
+
+  show_scale_bar: false

oereb_client/static/src/component/extract/extract.jsx

@@ -46,6 +46,15 @@ const OerebExtract = function () {
     }
   });
 
+  document.querySelectorAll('.ol-scale-bar').forEach((element) => {
+    if (extract.visible || extract.error) {
+      element.style.left = '513px';
+    }
+    else {
+      element.style.left = '8px';
+    }
+  });
+
   return (
     <div ref={wrapper} className="oereb-client-extract-wrapper">
       {content}

oereb_client/static/src/component/map/map.jsx

@@ -2,7 +2,7 @@ import './map.scss';
 
 import {isArray, isObject, isString} from 'lodash';
 import {Collection} from 'ol';
-import {Attribution, defaults} from 'ol/control';
+import {Attribution, defaults, ScaleLine} from 'ol/control';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import LayerGroup from 'ol/layer/Group';
 import ImageLayer from 'ol/layer/Image';
@@ -94,6 +94,7 @@ const OerebMap = function () {
   const serviceUrl = config.service_url;
   const [map, setMap] = useState(null);
   const tiled = config['use_tile_wms'];
+  const showScaleBar = config['show_scale_bar'];
 
   let LayerClass = ImageLayer;
   let SourceClass = ImageWMS;
@@ -167,15 +168,26 @@ const OerebMap = function () {
     const mapY = parseFloat(query.get('map_y')) || config.view.map_y;
     const mapZoom = parseFloat(query.get('map_zoom')) || config.view.map_zoom;
 
+    const controls = [];
+
     // Add attribution
-    const attribution = new Attribution({
+    controls.push(new Attribution({
       collapsible: document.body.offsetWidth < 1200
-    });
+    }));
+
+    // Add scale bar
+    if (showScaleBar) {
+      controls.push(new ScaleLine({
+        units: 'metric',
+        bar: true,
+        steps: 1
+      }));
+    }
 
     const newMap = new Map({
       controls: defaults({
         attribution: false
-      }).extend([attribution]),
+      }).extend(controls),
       view: new View({
         center: [mapX, mapY],
         zoom: mapZoom,

oereb_client/static/src/component/map/map.scss

@@ -4,6 +4,7 @@
 
 @import "ol/ol.css";
 @import "bootstrap/scss/bootstrap.scss";
+@import "../../oereb_client.scss";
 
 .oereb-client-map {
   position: absolute;
@@ -17,6 +18,10 @@
   visibility: hidden;
 }
 
+.ol-scale-bar {
+  transition: left $animation-duration linear;
+}
+
 .ol-control,
 .ol-attribution.ol-uncollapsible {
   border-radius: 0;

oereb_client/views/index.py

@@ -193,6 +193,7 @@ def get_config(self):
             'external_viewer': self.config_.get('external_viewer', {}),
             'user_guide': self.config_.get('user_guide'),
             'use_tile_wms': self.config_.get('use_tile_wms', False),
+            'show_scale_bar': self.config_.get('show_scale_bar', False),
             'extract_json_timeout': self.config_.get('extract_json_timeout', 60),
             'extract_pdf_timeout': self.config_.get('extract_pdf_timeout', 120)
         }