From 6d6d856447971a19a767dbcbf4981ab858aca661 Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Fri, 17 Oct 2025 15:28:25 +0300
Subject: [PATCH] added dragble overlay option on map widget

---
 .../common/map/map-data-layers.component.html | 19 +++++++++++++++++--
 .../common/map/map-data-layers.component.ts   | 12 ++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html
index 46a9235970..3c6622d142 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.html
@@ -29,8 +29,13 @@
       <div *ngIf="dataLayerType === 'circles'" class="tb-form-table-header-cell tb-key-header" translate>widgets.maps.data-layer.circle.circle-key</div>
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="dataLayersFormArray().controls.length; else noDataLayers" class="tb-form-table-body">
-      <div *ngFor="let dataLayerControl of dataLayersFormArray().controls; trackBy: trackByDataLayer; let $index = index;">
+    <div *ngIf="dataLayersFormArray().controls.length; else noDataLayers" class="tb-form-table-body tb-drop-list max-h-64 overflow-y-auto"
+         cdkDropList cdkDropListOrientation="vertical"
+         [cdkDropListDisabled]="!dragEnabled"
+         (cdkDropListDropped)="layerDrop($event)">
+      <div cdkDrag [cdkDragDisabled]="!dragEnabled"
+           class="tb-draggable-form-table-row" 
+           *ngFor="let dataLayerControl of dataLayersFormArray().controls; trackBy: trackByDataLayer; let $index = index;">
         <tb-map-data-layer-row class="flex-1"
                                [mapType]="mapType"
                                [dataLayerType]="dataLayerType"
@@ -38,6 +43,16 @@
                                [formControl]="dataLayerControl"
                                (dataLayerRemoved)="removeDataLayer($index)">
         </tb-map-data-layer-row>
+        <div class="tb-form-table-row-cell-buttons">
+          <button [class.tb-hidden]="!dragEnabled"
+                  mat-icon-button
+                  type="button"
+                  cdkDragHandle
+                  matTooltip="{{ 'action.drag' | translate }}"
+                  matTooltipPosition="above">
+            <mat-icon>drag_indicator</mat-icon>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.ts
index 747ef21681..6ddc984fc4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layers.component.ts
@@ -38,6 +38,7 @@ import {
 } from '@shared/models/widget/maps/map.models';
 import { MapSettingsComponent } from '@home/components/widget/lib/settings/common/map/map-settings.component';
 import { MapSettingsContext } from '@home/components/widget/lib/settings/common/map/map-settings.component.models';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'tb-map-data-layers',
@@ -79,6 +80,10 @@ export class MapDataLayersComponent implements ControlValueAccessor, OnInit, Val
 
   noDataLayersText: string;
 
+  get dragEnabled(): boolean {
+    return this.dataLayersFormArray().controls.length > 1;
+  }
+
   private propagateChange = (_val: any) => {};
 
   constructor(private mapSettingsComponent: MapSettingsComponent,
@@ -162,6 +167,13 @@ export class MapDataLayersComponent implements ControlValueAccessor, OnInit, Val
   removeDataLayer(index: number) {
     (this.dataLayersFormGroup.get('dataLayers') as UntypedFormArray).removeAt(index);
   }
+  
+  layerDrop(event: CdkDragDrop<string[]>) {
+    const layersArray = this.dataLayersFormArray();
+    const layer = layersArray.at(event.previousIndex);
+    layersArray.removeAt(event.previousIndex);
+    layersArray.insert(event.currentIndex, layer);
+  }
 
   addDataLayer() {
     const dataLayer = mergeDeep<MapDataLayerSettings>({} as MapDataLayerSettings,