Add map scale (fix #1266)

src/other/EmulatorPage.jsx

@@ -18,6 +18,7 @@ import SelectField from '../common/components/SelectField';
 import { devicesActions } from '../store';
 import MapPositions from '../map/MapPositions';
 import { useCatch } from '../reactHelper';
+import MapScale from '../map/MapScale';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -131,6 +132,7 @@ const EmulatorPage = () => {
               showStatus
             />
           </MapView>
+          <MapScale />
           <MapCurrentLocation />
           <MapGeocoder />
         </div>

src/other/EventPage.jsx

@@ -14,6 +14,7 @@ import MapPositions from '../map/MapPositions';
 import MapGeofence from '../map/MapGeofence';
 import StatusCard from '../common/components/StatusCard';
 import { formatNotificationTitle } from '../common/util/formatter';
+import MapScale from '../map/MapScale';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -91,6 +92,7 @@ const EventPage = () => {
           <MapGeofence />
           {position && <MapPositions positions={[position]} onClick={onMarkerClick} titleField="fixTime" />}
         </MapView>
+        <MapScale />
         {position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
         {position && showCard && (
           <StatusCard

src/other/GeofencesPage.jsx

@@ -17,6 +17,7 @@ import GeofencesList from './GeofencesList';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import MapGeocoder from '../map/geocoder/MapGeocoder';
 import { errorsActions } from '../store';
+import MapScale from '../map/MapScale';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -131,6 +132,7 @@ const GeofencesPage = () => {
           <MapView>
             <MapGeofenceEdit selectedGeofenceId={selectedGeofenceId} />
           </MapView>
+          <MapScale />
           <MapCurrentLocation />
           <MapGeocoder />
         </div>

src/other/ReplayPage.jsx

@@ -25,6 +25,7 @@ import { useCatch } from '../reactHelper';
 import MapCamera from '../map/MapCamera';
 import MapGeofence from '../map/MapGeofence';
 import StatusCard from '../common/components/StatusCard';
+import MapScale from '../map/MapScale';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -164,6 +165,7 @@ const ReplayPage = () => {
           <MapPositions positions={[positions[index]]} onClick={onMarkerClick} titleField="fixTime" />
         )}
       </MapView>
+      <MapScale />
       <MapCamera positions={positions} />
       <div className={classes.sidebar}>
         <Paper elevation={3} square>

src/reports/CombinedReportPage.jsx

@@ -17,6 +17,7 @@ import { formatTime } from '../common/util/formatter';
 import { prefixString } from '../common/util/stringUtils';
 import MapMarkers from '../map/MapMarkers';
 import MapRouteCoordinates from '../map/MapRouteCoordinates';
+import MapScale from '../map/MapScale';
 
 const CombinedReportPage = () => {
   const classes = useReportStyles();
@@ -71,6 +72,7 @@ const CombinedReportPage = () => {
               ))}
               <MapMarkers markers={createMarkers()} />
             </MapView>
+            <MapScale />
             <MapCamera coordinates={itemsCoordinates} />
           </div>
         )}

src/reports/EventReportPage.jsx

@@ -23,6 +23,7 @@ import MapGeofence from '../map/MapGeofence';
 import MapPositions from '../map/MapPositions';
 import MapCamera from '../map/MapCamera';
 import scheduleReport from './common/scheduleReport';
+import MapScale from '../map/MapScale';
 
 const columnsArray = [
   ['eventTime', 'positionFixTime'],
@@ -162,6 +163,7 @@ const EventReportPage = () => {
               <MapGeofence />
               {position && <MapPositions positions={[position]} titleField="fixTime" />}
             </MapView>
+            <MapScale />
             {position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
           </div>
         )}

src/reports/RouteReportPage.jsx

@@ -23,6 +23,7 @@ import TableShimmer from '../common/components/TableShimmer';
 import MapCamera from '../map/MapCamera';
 import MapGeofence from '../map/MapGeofence';
 import scheduleReport from './common/scheduleReport';
+import MapScale from '../map/MapScale';
 
 const RouteReportPage = () => {
   const navigate = useNavigate();
@@ -113,6 +114,7 @@ const RouteReportPage = () => {
               })}
               <MapPositions positions={[selectedItem]} titleField="fixTime" />
             </MapView>
+            <MapScale />
             <MapCamera positions={items} />
           </div>
         )}

src/reports/StopReportPage.jsx

@@ -25,6 +25,7 @@ import AddressValue from '../common/components/AddressValue';
 import TableShimmer from '../common/components/TableShimmer';
 import MapGeofence from '../map/MapGeofence';
 import scheduleReport from './common/scheduleReport';
+import MapScale from '../map/MapScale';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -124,6 +125,7 @@ const StopReportPage = () => {
                 titleField="fixTime"
               />
             </MapView>
+            <MapScale />
             <MapCamera latitude={selectedItem.latitude} longitude={selectedItem.longitude} />
           </div>
         )}

src/reports/TripReportPage.jsx

@@ -25,6 +25,7 @@ import MapMarkers from '../map/MapMarkers';
 import MapCamera from '../map/MapCamera';
 import MapGeofence from '../map/MapGeofence';
 import scheduleReport from './common/scheduleReport';
+import MapScale from '../map/MapScale';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -169,6 +170,7 @@ const TripReportPage = () => {
                 </>
               )}
             </MapView>
+            <MapScale />
           </div>
         )}
         <div className={classes.containerMain}>