add scale for wider screens

src/actions/Actions.ts

@@ -238,7 +238,13 @@ export class InstructionClicked implements Action {
     }
 }
 
-export class ToggleDistanceUnits implements Action {}
+export class ToggleDistanceUnits implements Action {
+    readonly showDistanceInMiles: boolean
+
+    constructor(showDistanceInMiles: boolean) {
+        this.showDistanceInMiles = showDistanceInMiles
+    }
+}
 
 export class DrawAreas implements Action {
     readonly enabled: boolean

src/map/Map.module.css

@@ -7,6 +7,21 @@
     width: 100%;
 }
 
+.customScale {
+    position: absolute;
+    bottom: 18px;
+    padding: 2px;
+    background: var(--ol-partial-background-color);
+}
+
+.customScale-inner {
+    border: 1px solid gray;
+    border-top: none;
+    font-size: 10px;
+    text-align: center;
+    margin: 1px;
+}
+
 .customZoom {
     right: 17px;
     top: 115px;
@@ -17,14 +32,18 @@
         top: unset;
         bottom: 0.5em;
     }
+
+    .customScale {
+        display: none;
+    }
 }
 
 /* changing the position of the attribution is a bit complex as we have to repeat the other css */
 .customAttribution {
     left: 0;
     bottom: 0;
     padding: 1px 5px;
-    background-color: rgba(255, 255, 255, 0.8);
+    background: var(--ol-partial-background-color);
     border-radius: 0 4px 0 0;
 }
 

src/sidebar/SettingsBox.tsx

@@ -16,7 +16,7 @@ export default function SettingsBox() {
             <div className={styles.settingsTable}>
                 <PlainButton
                     style={{ color: showDistanceInMiles ? '' : 'lightgray' }} // todonow: move to css?
-                    onClick={() => Dispatcher.dispatch(new ToggleDistanceUnits())}
+                    onClick={() => Dispatcher.dispatch(new ToggleDistanceUnits(!showDistanceInMiles))}
                 >
                     {showDistanceInMiles ? <OnIcon /> : <OffIcon />}
                 </PlainButton>

src/stores/MapActionReceiver.ts

@@ -1,26 +1,37 @@
 import { Action, ActionReceiver } from '@/stores/Dispatcher'
 import { Map } from 'ol'
 import { fromLonLat } from 'ol/proj'
+import mapstyles from '@/map/Map.module.css'
+
 import {
     InfoReceived,
     PathDetailsRangeSelected,
     RouteRequestSuccess,
     SetBBox,
     SetSelectedPath,
+    ToggleDistanceUnits,
     ZoomMapToPoint,
 } from '@/actions/Actions'
 import RouteStore from '@/stores/RouteStore'
 import { Bbox } from '@/api/graphhopper'
+import { ScaleLine } from 'ol/control'
 
 export default class MapActionReceiver implements ActionReceiver {
     readonly map: Map
     private readonly routeStore: RouteStore
+    private readonly currentScaleControl: ScaleLine
     private readonly isSmallScreenQuery: () => boolean
 
     constructor(map: Map, routeStore: RouteStore, isSmallScreenQuery: () => boolean) {
         this.map = map
         this.routeStore = routeStore
         this.isSmallScreenQuery = isSmallScreenQuery
+        this.currentScaleControl = new ScaleLine({
+            className: mapstyles.customScale,
+            units: 'metric',
+            minWidth: 50,
+        })
+        this.map.addControl(this.currentScaleControl)
     }
 
     receive(action: Action) {
@@ -36,6 +47,8 @@ export default class MapActionReceiver implements ActionReceiver {
                 center: fromLonLat([action.coordinate.lng, action.coordinate.lat]),
                 duration: 400,
             })
+        } else if (action instanceof ToggleDistanceUnits) {
+            this.currentScaleControl.setUnits(action.showDistanceInMiles ? 'imperial' : 'metric')
         } else if (action instanceof RouteRequestSuccess) {
             // this assumes that always the first path is selected as result. One could use the
             // state of the routeStore as well, but then we would have to make sure that the route

src/stores/SettingsStore.ts

@@ -19,7 +19,7 @@ export default class SettingsStore extends Store<Settings> {
         if (action instanceof ToggleDistanceUnits) {
             return {
                 ...state,
-                showDistanceInMiles: !state.showDistanceInMiles,
+                showDistanceInMiles: action.showDistanceInMiles,
             }
         } else if (action instanceof SetCustomModelEnabled) {
             if (!action.enabled && state.drawAreasEnabled)