Mercurial > gemma

changeset 5672:b1a10654bf0f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Add Scale to map
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 14 Feb 2024 16:56:28 +0100
parents 4bfcbb747768
children a23fabfd54bb 37c8feeecb4d
files client/src/components/map/Map.vue
diffstat 1 files changed, 13 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- 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>