UI: Map - add map scale control.

ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts

@@ -20,6 +20,7 @@ import {
   DataKeyValuePair,
   MapBooleanFunction,
   mapDataLayerTypes,
+  MapScale,
   MapType,
   mergeMapDatasources,
   parseCenterPosition,
@@ -171,7 +172,12 @@ export abstract class TbMap<S extends BaseMapSettings> {
   }
 
   private setupControls(): Observable<any> {
-    //L.control.scale().addTo(this.map);
+    if (this.settings.scales?.length) {
+      L.control.scale({
+        metric: this.settings.scales.includes(MapScale.metric),
+        imperial: this.settings.scales.includes(MapScale.imperial)
+      }).addTo(this.map);
+    }
     if (this.map.zoomControl) {
       this.map.zoomControl.setPosition(this.settings.controlsPosition);
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html

@@ -99,6 +99,14 @@
         </mat-chip-option>
       </mat-chip-listbox>
     </div>
+    <div class="tb-form-row space-between column-lt-md">
+      <div translate>widgets.maps.control.scale</div>
+      <mat-chip-listbox multiple formControlName="scales">
+        <mat-chip-option *ngFor="let scale of mapScales" [value]="scale">
+          {{ mapScaleTranslationMap.get(scale) | translate }}
+        </mat-chip-option>
+      </mat-chip-listbox>
+    </div>
     <div *ngIf="showDragButtonModeButtonSettings" class="tb-form-row">
       <mat-slide-toggle class="mat-slide" formControlName="dragModeButton">
         {{ 'widgets.maps.control.switch-to-drag-mode-using-button' | translate }}

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts

@@ -33,7 +33,7 @@ import {
   mapControlPositions,
   mapControlsPositionTranslationMap,
   MapDataLayerSettings,
-  MapDataLayerType,
+  MapDataLayerType, mapScales, mapScaleTranslationMap,
   MapSetting,
   MapType,
   mapZoomActions,
@@ -74,12 +74,16 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
 
   mapControlPositions = mapControlPositions;
 
-  mapZoomActions = mapZoomActions;
-
   mapControlsPositionTranslationMap = mapControlsPositionTranslationMap;
 
+  mapZoomActions = mapZoomActions;
+
   mapZoomActionTranslationMap = mapZoomActionTranslationMap;
 
+  mapScales = mapScales;
+
+  mapScaleTranslationMap = mapScaleTranslationMap;
+
   MapType = MapType;
 
   @Input()
@@ -144,6 +148,7 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
       additionalDataSources: [null, []],
       controlsPosition: [null, []],
       zoomActions: [null, []],
+      scales: [null, []],
       dragModeButton: [null, []],
       fitMapBounds: [null, []],
       useDefaultCenterPosition: [null, []],

ui-ngx/src/app/shared/models/widget/maps/map.models.ts

@@ -640,6 +640,20 @@ export const mapZoomActionTranslationMap = new Map<MapZoomAction, string>(
   ]
 );
 
+export enum MapScale {
+  metric = 'metric',
+  imperial = 'imperial'
+}
+
+export const mapScales = Object.keys(MapScale) as MapScale[];
+
+export const mapScaleTranslationMap = new Map<MapScale, string>(
+  [
+    [MapScale.metric, 'widgets.maps.control.scale-metric'],
+    [MapScale.imperial, 'widgets.maps.control.scale-imperial'],
+  ]
+);
+
 export interface MapActionButtonSettings {
   label?: string;
   icon?: string;
@@ -666,6 +680,7 @@ export interface BaseMapSettings {
   additionalDataSources: AdditionalMapDataSourceSettings[];
   controlsPosition: MapControlsPosition;
   zoomActions: MapZoomAction[];
+  scales: MapScale[];
   dragModeButton: boolean;
   fitMapBounds: boolean;
   useDefaultCenterPosition: boolean;
@@ -689,6 +704,7 @@ export const defaultBaseMapSettings: BaseMapSettings = {
   additionalDataSources: [],
   controlsPosition: MapControlsPosition.topleft,
   zoomActions: [MapZoomAction.scroll, MapZoomAction.doubleClick, MapZoomAction.controlButtons],
+  scales: [],
   dragModeButton: false,
   fitMapBounds: true,
   useDefaultCenterPosition: false,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -7705,6 +7705,9 @@
                 "zoom-scroll": "Scroll",
                 "zoom-double-click": "Double click",
                 "zoom-control-buttons": "Control buttons",
+                "scale": "Scale",
+                "scale-metric": "Metric",
+                "scale-imperial": "Imperial",
                 "switch-to-drag-mode-using-button": "Switch to drag mode using button"
             },
             "timeline": {