Add map scale control

2 files changed, 35 insertions, 0 deletions

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;