Merge pull request #6886 from ArtemDzhereleiko/AD/bug-fix/maps/double-click-zoom

[3.4] UI: Fix double click zooming on map widgets

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

@@ -219,6 +219,7 @@ export interface CommonMapSettings {
   defaultZoomLevel: number;
   defaultCenterPosition?: string;
   disableScrollZooming: boolean;
+  disableDoubleClickZooming: boolean;
   disableZoomControl: boolean;
   fitMapBounds: boolean;
   useDefaultCenterPosition: boolean;
@@ -242,6 +243,7 @@ export const defaultCommonMapSettings: CommonMapSettings = {
   defaultZoomLevel: null,
   defaultCenterPosition: '0,0',
   disableScrollZooming: false,
+  disableDoubleClickZooming: false,
   disableZoomControl: false,
   fitMapBounds: true,
   useDefaultCenterPosition: false,

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

@@ -37,6 +37,7 @@ export class GoogleMap extends LeafletMap {
     this.loadGoogle(() => {
       const map = L.map($container, {
         attributionControl: false,
+        doubleClickZoom: !this.options.disableDoubleClickZooming,
         zoomControl: !this.options.disableZoomControl,
         tap: L.Browser.safari && L.Browser.mobile
       }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);

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

@@ -24,6 +24,7 @@ export class HEREMap extends LeafletMap {
         super(ctx, $container, options);
         const map = L.map($container, {
           tap: L.Browser.safari && L.Browser.mobile,
+          doubleClickZoom: !this.options.disableDoubleClickZooming,
           zoomControl: !this.options.disableZoomControl
         }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
         const tileLayer = (L.tileLayer as any).provider(options.mapProviderHere || 'HERE.normalDay', options.credentials);

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

@@ -224,7 +224,7 @@ export class ImageMap extends LeafletMap {
           maxZoom,
           scrollWheelZoom: !this.options.disableScrollZooming,
           center,
-          doubleClickZoom: !this.options.disableZoomControl,
+          doubleClickZoom: !this.options.disableDoubleClickZooming,
           zoomControl: !this.options.disableZoomControl,
           zoom: 1,
           crs: L.CRS.Simple,

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

@@ -23,6 +23,7 @@ export class OpenStreetMap extends LeafletMap {
     constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) {
         super(ctx, $container, options);
         const map =  L.map($container, {
+          doubleClickZoom: !this.options.disableDoubleClickZooming,
           zoomControl: !this.options.disableZoomControl,
           tap: L.Browser.safari && L.Browser.mobile
         }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);

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

@@ -25,6 +25,7 @@ export class TencentMap extends LeafletMap {
     super(ctx, $container, options);
     const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
     const map = L.map($container, {
+      doubleClickZoom: !this.options.disableDoubleClickZooming,
       zoomControl: !this.options.disableZoomControl,
       tap: L.Browser.safari && L.Browser.mobile
     }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);

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

@@ -70,6 +70,9 @@
             <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
               {{ 'widgets.maps.disable-scroll-zooming' | translate }}
             </mat-slide-toggle>
+            <mat-slide-toggle formControlName="disableDoubleClickZooming" class="slide-block">
+              {{ 'widgets.maps.disable-double-click-zooming' | translate }}
+            </mat-slide-toggle>
             <mat-slide-toggle formControlName="disableZoomControl" class="slide-block">
               {{ 'widgets.maps.disable-zoom-control-buttons' | translate }}
             </mat-slide-toggle>

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

@@ -83,6 +83,7 @@ export class CommonMapSettingsComponent extends PageComponent implements OnInit,
       defaultZoomLevel: [null, [Validators.min(0), Validators.max(20)]],
       defaultCenterPosition: [null, []],
       disableScrollZooming: [null, []],
+      disableDoubleClickZooming: [null, []],
       disableZoomControl: [null, []],
       fitMapBounds: [null, []],
       useDefaultCenterPosition: [null, []],

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

@@ -4372,6 +4372,7 @@
             "default-map-zoom-level": "Default map zoom level (0 - 20)",
             "default-map-center-position": "Default map center position (0,0)",
             "disable-scroll-zooming": "Disable scroll zooming",
+            "disable-double-click-zooming": "Disable double click zooming",
             "disable-zoom-control-buttons": "Disable zoom control buttons",
             "fit-map-bounds": "Fit map bounds to cover all markers",
             "use-default-map-center-position": "Use default map center position",