From 238001ae93e586f3eff5592ba763444a8aa339bf Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Tue, 12 May 2026 15:10:05 +0200
Subject: [PATCH] Add scale

---
 src/components/project.vue          |  3 ++-
 src/styles/_page.project.panel.scss | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/project.vue b/src/components/project.vue
index bfd3d8e..93c5076 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -1,6 +1,6 @@
 <script>
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Map, Marker, LngLatBounds, LngLat, Popup } from 'maplibre-gl';
+import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl } from 'maplibre-gl';
 import { createApp } from 'vue';
 import Simplebar from 'simplebar-vue';
 
@@ -199,6 +199,7 @@ export default {
 				},
 				attributionControl: false
 			});
+			if(!this.isMobile()) this.map.addControl(new ScaleControl({unit: 'metric'}), 'bottom-right');
 
 			//Get default basemap
 			this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
diff --git a/src/styles/_page.project.panel.scss b/src/styles/_page.project.panel.scss
index abcf4b1..05d485c 100644
--- a/src/styles/_page.project.panel.scss
+++ b/src/styles/_page.project.panel.scss
@@ -18,6 +18,10 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			transform: translateX(calc($panel-actual-width / -2));
 		}
 
+		#map .maplibregl-ctrl-bottom-right {
+			transform: translateX(calc($panel-actual-width * -1));
+		}
+
 		.map-container-right {
 			transform: translateX(calc(100vw - $panel-actual-width));
 		}
@@ -209,6 +213,20 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 		right: 0;
 	}
 
+	#map .maplibregl-ctrl-bottom-right {
+		margin: var.$block-spacing;
+		transition: transform 0.5s;
+		@extend .map-control;
+
+		.maplibregl-ctrl-scale {
+			margin: 0;
+			background-color: transparent;
+			border-color: color.$default;
+			color: color.$default;
+			font-family: "Ubuntu", sans-serif;
+		}
+	}
+
 	#submap {
 		position: absolute;
 		left: 0;