Add map scale control

3 files changed, 37 insertions, 0 deletions

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index a3d39b15..025bb405 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -35,6 +35,7 @@ import MapPositions from '../map/MapPositions';
 import MapDirection from '../map/MapDirection';
 import MapOverlay from '../map/overlay/MapOverlay';
 import MapGeocoder from '../map/geocoder/MapGeocoder';
+import MapScale from '../map/MapScale';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -213,6 +214,7 @@ const MainPage = () => {
         <MapSelectedDevice />
         <PoiMap />
       </MapView>
+      <MapScale />
       <MapCurrentLocation />
       <MapGeocoder />
       {desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
diff --git a/modern/src/map/MapScale.js b/modern/src/map/MapScale.js
new file mode 100644
index 00000000..c8a724c9
--- /dev/null
+++ b/modern/src/map/MapScale.js
@@ -0,0 +1,34 @@
+import maplibregl from 'maplibre-gl';
+import { useEffect, useMemo } from 'react';
+import { useAttributePreference } from '../common/util/preferences';
+import { map } from './core/MapView';
+
+const MapScale = () => {
+  const distanceUnit = useAttributePreference('distanceUnit');
+
+  const control = useMemo(() => new maplibregl.ScaleControl(), []);
+
+  useEffect(() => {
+    map.addControl(control, 'bottom-right');
+    return () => map.removeControl(control);
+  }, [control]);
+
+  useEffect(() => {
+    switch (distanceUnit) {
+      case 'mi':
+        control.setUnit('imperial');
+        break;
+      case 'nmi':
+        control.setUnit('nautical');
+        break;
+      case 'km':
+      default:
+        control.setUnit('metric');
+        break;
+    }
+  }, [control, distanceUnit]);
+
+  return null;
+};
+
+export default MapScale;
diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
index 98865157..068769d9 100644
--- a/modern/src/map/core/MapView.js
+++ b/modern/src/map/core/MapView.js
@@ -17,6 +17,7 @@ element.style.boxSizing = 'initial';
 
 export const map = new maplibregl.Map({
   container: element,
+  attributionControl: false,
 });
 
 let ready = false;