# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1707926188 -3600
# Node ID b1a10654bf0f24b82cdba16bf3d38af72590195e
# Parent  4bfcbb7477687dd626d0e13934fda6faaa230a3e
feat: Add Scale to map

diff -r 4bfcbb747768 -r b1a10654bf0f client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Fri Dec 15 18:17:40 2023 +0100
+++ b/client/src/components/map/Map.vue	Wed Feb 14 16:56:28 2024 +0100
@@ -62,6 +62,7 @@
 import { pane } from "@/lib/mixins";
 import { layerFactory } from "@/components/layers/layers";
 import { ImageWMS as ImageSource } from "ol/source";
+import { ScaleLine } from "ol/control.js";
 import { styles } from "@/components/layers/styles";
 import "ol/ol.css";
 
@@ -331,7 +332,7 @@
       this.map = new Map({
         layers: this.layers.config,
         target: "map-" + this.paneId,
-        controls: [],
+        controls: [new ScaleLine()],
         view:
           this.syncedMaps.includes(this.paneId) || this.paneId === "main"
             ? this.syncedView
@@ -515,3 +516,14 @@
   }
 };
 </script>
+
+<style>
+.ol-scale-line {
+  background: rgba(0, 0, 0, 0.45);
+  border-radius: 4px;
+  bottom: 8px;
+  left: 8px;
+  padding: 2px;
+  position: absolute;
+}
+</style>