Merge pull request #5882 from vvlladd28/improvements/map/zoom-control-disable

[3.3.3] UI: Add map new settings - "Disable zoom control" and fix disable edit buttons

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

@@ -494,12 +494,12 @@ export default abstract class LeafletMap {
         }
         this.updateMarkers(formattedData, false);
         this.updateBoundsInternal();
-        if (this.options.draggableMarker) {
+        if (this.options.draggableMarker && !this.options.hideDrawControlButton) {
           const foundEntityWithoutLocation = formattedData.some(mData => !this.convertPosition(mData));
           this.map.pm.Toolbar.setButtonDisabled('tbMarker', !foundEntityWithoutLocation);
           this.datasources = formattedData;
         }
-        if (this.editPolygons) {
+        if (this.editPolygons && !this.options.hideDrawControlButton) {
           const foundEntityWithoutPolygon = formattedData.some(pData => !this.isValidPolygonPosition(pData));
           this.map.pm.Toolbar.setButtonDisabled('tbPolygon', !foundEntityWithoutPolygon);
           this.map.pm.Toolbar.setButtonDisabled('tbRectangle', !foundEntityWithoutPolygon);

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

@@ -33,6 +33,7 @@ export type MapSettings = {
     posFunction: PosFuncton;
     defaultZoomLevel?: number;
     disableScrollZooming?: boolean;
+    disableZoomControl?: boolean;
     minZoomLevel?: number;
     useClusterMarkers: boolean;
     latKeyName?: string;

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

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

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

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

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

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

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: UnitedMapSettings) {
         super(ctx, $container, options);
         const map =  L.map($container, {
+          zoomControl: !this.options.disableZoomControl,
           tap: L.Browser.safari && L.Browser.mobile
         }).setView(options?.defaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
         let tileLayer;

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, {
+      zoomControl: !this.options.disableZoomControl,
       tap: L.Browser.safari && L.Browser.mobile
     }).setView(options?.defaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
     const txLayer = L.tileLayer(txUrl, {

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

@@ -269,6 +269,11 @@ export const commonMapSettingsSchema =
                 type: 'boolean',
                 default: false
             },
+            disableZoomControl: {
+                title: 'Disable zoom control buttons',
+                type: 'boolean',
+                default: false
+            },
             latKeyName: {
                 title: 'Latitude key name',
                 type: 'string',
@@ -424,6 +429,7 @@ export const commonMapSettingsSchema =
         'mapPageSize',
         'draggableMarker',
         'disableScrollZooming',
+        'disableZoomControl',
         {
             key: 'latKeyName',
             condition: 'model.provider !== "image-map"'
@@ -1329,7 +1335,7 @@ export const editorSettingSchema =
           default: false
         },
         hideAllControlButton: {
-          title: 'Hide all button',
+          title: 'Hide all edit control buttons',
           type: 'boolean',
           default: false
         },