UI: Map - handle layer snapping

ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts

@@ -91,6 +91,9 @@ class TbCircleDataLayerItem extends TbDataLayerItem<CirclesDataLayerSettings, Tb
   }
 
   protected enableDrag(): void {
+    this.circle.pm.setOptions({
+      snappable: this.dataLayer.isSnappable()
+    });
     this.circle.pm.enableLayerDrag();
     this.circle.on('pm:dragstart', () => {
       this.editing = true;

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

@@ -314,6 +314,7 @@ export abstract class TbMapDataLayer<S extends MapDataLayerSettings, D extends T
 
       this.selectable = this.removeEnabled || this.editEnabled;
       this.hoverable = this.selectable || this.dragEnabled;
+      this.snappable = this.settings.edit.snappable;
     }
 
     this.dataLayerContainer = this.createDataLayerContainer();

ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts

@@ -76,7 +76,8 @@ class TbMarkerDataLayerItem extends TbDataLayerItem<MarkersDataLayerSettings, Tb
     this.iconClassList = [];
     const location = this.dataLayer.extractLocation(data, dsData);
     this.marker = L.marker(location, {
-      tbMarkerData: data
+      tbMarkerData: data,
+      snapIgnore: !this.dataLayer.isSnappable()
     });
 
     this.updateMarkerIcon(data, dsData);
@@ -129,20 +130,40 @@ class TbMarkerDataLayerItem extends TbDataLayerItem<MarkersDataLayerSettings, Tb
   }
 
   protected enableDrag(): void {
-    this.marker.options.draggable = true;
+    if (this.settings.markerClustering?.enable) {
-    this.marker.on('dragstart', () => {
+      this.marker.options.draggable = true;
-      this.moving = true;
+      this.marker.on('dragstart', () => {
-    });
+        this.moving = true;
-    this.marker.on('dragend', () => {
+      });
-      this.saveMarkerLocation();
+      this.marker.on('dragend', () => {
-      this.moving = false;
+        this.saveMarkerLocation();
-    });
+        this.moving = false;
+      });
+    } else {
+      this.marker.pm.setOptions({
+        snappable: this.dataLayer.isSnappable()
+      });
+      this.marker.pm.enableLayerDrag();
+      this.marker.on('pm:dragstart', () => {
+        this.moving = true;
+      });
+      this.marker.on('pm:dragend', () => {
+        this.saveMarkerLocation();
+        this.moving = false;
+      });
+    }
   }
 
   protected disableDrag(): void {
-    this.marker.options.draggable = false;
+    if (this.settings.markerClustering?.enable) {
-    this.marker.off('dragstart');
+      this.marker.options.draggable = false;
-    this.marker.off('dragend');
+      this.marker.off('dragstart');
+      this.marker.off('dragend');
+    } else {
+      this.marker.pm.disableLayerDrag();
+      this.marker.off('pm:dragstart');
+      this.marker.off('pm:dragend');
+    }
   }
 
   private saveMarkerLocation() {

ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/polygons-data-layer.ts

@@ -96,6 +96,9 @@ class TbPolygonDataLayerItem extends TbDataLayerItem<PolygonsDataLayerSettings,
   }
 
   protected enableDrag(): void {
+    this.polygon.pm.setOptions({
+      snappable: this.dataLayer.isSnappable()
+    });
     this.polygon.pm.enableLayerDrag();
     this.polygon.on('pm:dragstart', () => {
       this.editing = true;