diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts index 66475705f7..83dca0338f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts +++ b/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 { } private setupControls(): Observable { - //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); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html index 97c686732a..a7b725cb3f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html @@ -99,6 +99,14 @@ +
+
widgets.maps.control.scale
+ + + {{ mapScaleTranslationMap.get(scale) | translate }} + + +
{{ 'widgets.maps.control.switch-to-drag-mode-using-button' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts index 2abaab17f7..f38f2a042c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts +++ b/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, []], diff --git a/ui-ngx/src/app/shared/models/widget/maps/map.models.ts b/ui-ngx/src/app/shared/models/widget/maps/map.models.ts index 295876e326..20f69bac0f 100644 --- a/ui-ngx/src/app/shared/models/widget/maps/map.models.ts +++ b/ui-ngx/src/app/shared/models/widget/maps/map.models.ts @@ -640,6 +640,20 @@ export const mapZoomActionTranslationMap = new Map( ] ); +export enum MapScale { + metric = 'metric', + imperial = 'imperial' +} + +export const mapScales = Object.keys(MapScale) as MapScale[]; + +export const mapScaleTranslationMap = new Map( + [ + [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, diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 48272ada9e..53ddc5a924 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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": {