From 74ad6b3dbecea31b32b8bcf628b3e78fbaec0ad1 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 24 Apr 2024 16:57:32 +0200
Subject: [PATCH] adapt scale control units

---
 website/src/lib/components/Map.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
index 5c512a1f..2398f12a 100644
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -7,18 +7,21 @@
 	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 
-	import { map } from '$lib/stores';
+	import { map, settings } from '$lib/stores';
 
 	mapboxgl.accessToken =
 		'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg';
 
-	export let distanceUnits: 'metric' | 'imperial' = 'metric';
 	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
 		maxZoom: 15,
 		linear: true,
 		easing: () => 1
 	};
 
+	let scaleControl = new mapboxgl.ScaleControl({
+		unit: $settings.distanceUnits
+	});
+
 	function toggleTerrain() {
 		if ($map) {
 			if ($map.getPitch() > 0) {
@@ -85,15 +88,15 @@
 			})
 		);
 
-		$map.addControl(
-			new mapboxgl.ScaleControl({
-				unit: distanceUnits
-			})
-		);
+		$map.addControl(scaleControl);
 
 		$map.on('style.load', toggleTerrain);
 		$map.on('pitchstart', toggleTerrain);
 	});
+
+	$: if ($map) {
+		scaleControl.setUnit($settings.distanceUnits);
+	}
 </script>
 
 <div {...$$restProps}>