Add scale

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;

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;