marker dropping support

ui-ngx/src/app/core/utils.ts

@@ -498,7 +498,7 @@ export function safeExecute(func: Function, params = []) {
       res = func(...params);
     }
     catch (err) {
-      console.error(err);
+      console.log(err);
       res = null;
     }
   }

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

@@ -31,6 +31,7 @@ import { Polygon } from './polygon';
 export default abstract class LeafletMap {
 
     markers: Map<string, Marker> = new Map();
+    dragMode = false;
     tooltips = [];
     poly: Polyline;
     polygon: Polygon;
@@ -55,6 +56,7 @@ export default abstract class LeafletMap {
             mapProvider,
             credentials,
             defaultCenterPosition,
+            draggebleMarker,
             markerClusteringSetting }: MapOptions = options;
         if (disableScrollZooming) {
             this.map.scrollWheelZoom.disable();
@@ -64,6 +66,33 @@ export default abstract class LeafletMap {
         }
     }
 
+    addMarkerControl() {
+        if (this.options.draggebleMarker)
+            L.Control['AddMarker'] = L.Control.extend({
+                onAdd: function (map) {
+                    let img = L.DomUtil.create('img') as any;
+                    img.src = `assets/add_location.svg`;
+                    img.style.width = '32px';
+                    img.style.height = '32px';
+                    img.onclick = this.dragMarker;
+                    return img;
+                },
+                addHooks: function () {
+                    L.DomEvent.on(window as any, 'onclick', this.enableDragMode, this);
+                },
+                onRemove: function (map) {
+                },
+                dragMarker: ($event) => {
+                    this.dragMode = !this.dragMode;
+                }
+            });
+
+        L.control['addmarker'] = function (opts) {
+            return new L.Control['AddMarker'](opts);
+        }
+        L.control['addmarker']({ position: 'topright' }).addTo(this.map);
+    }
+
     inited() {
         return !!this.map;
     }
@@ -74,10 +103,21 @@ export default abstract class LeafletMap {
             this.map.panTo(this.options.defaultCenterPosition);
             this.bounds = map.getBounds();
         }
-        else this.bounds = new L.LatLngBounds(null, null)
+        else this.bounds = new L.LatLngBounds(null, null);
+        if (this.options.draggebleMarker) {
+            this.addMarkerControl();
+            this.map.on('click', (e: L.LeafletMouseEvent) => {
+                if (this.dragMode)
+                    this.saveMarkerLocation(this.convertToCustomFormat(e.latlng));
+            })
+        }
         this.map$.next(this.map);
     }
 
+    public saveMarkerLocation(e) {
+
+    }
+
     getContainer() {
         return this.map;
     }
@@ -117,6 +157,13 @@ export default abstract class LeafletMap {
         return L.latLng(expression[this.options.latKeyName], expression[this.options.lngKeyName]) as L.LatLng;
     }
 
+    convertToCustomFormat(position: L.LatLng): object {
+        return {
+            [this.options.latKeyName]: position.lat,
+            [this.options.lngKeyName]: position.lng
+        }
+    }
+
     ////Markers
     updateMarkers(markersData) {
         markersData.forEach(data => {
@@ -179,33 +226,34 @@ export default abstract class LeafletMap {
     }
 
     createPolyline(data, dataSources, settings) {
-        this.ready$.subscribe(() => {
-            this.poly = new Polyline(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings);
-            const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
-            if (bounds.isValid()) {
-                this.map.fitBounds(bounds);
-                this.bounds = bounds;
-            }
-        });
+        if (data.length)
+            this.ready$.subscribe(() => {
+                this.poly = new Polyline(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings);
+                const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
+                if (bounds.isValid()) {
+                    this.map.fitBounds(bounds);
+                    this.bounds = bounds;
+                }
+            });
     }
 
     updatePolyline(data, dataSources, settings) {
         this.ready$.subscribe(() => {
-            this.poly.updatePolyline(settings, data, dataSources);        
+            this.poly.updatePolyline(settings, data, dataSources);
         });
-    }  
+    }
 
-      //polygon
+    //polygon
 
-      updatePolygon(polyData: Array<Array<any>>) {
-        polyData.forEach(data => {
-            if (data.length) {
+    updatePolygons(polyData: Array<Array<any>>) {
+        polyData.forEach((data: any) => {
+            if (data.data.length) {
                 let dataSource = polyData.map(arr => arr[0]);
-                if (this.poly) {
-                    this.updatePolyline(data, dataSource, this.options);
+                if (this.polygon) {
+                    this.updatePolygon(data, dataSource, this.options);
                 }
                 else {
-                    this.createPolyline(data, dataSource, this.options);
+                    this.createPolygon(data, dataSource, this.options);
                 }
             }
         })
@@ -214,7 +262,7 @@ export default abstract class LeafletMap {
     createPolygon(data, dataSources, settings) {
         this.ready$.subscribe(() => {
             this.polygon = new Polygon(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings);
-            const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
+            const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds());
             if (bounds.isValid()) {
                 this.map.fitBounds(bounds);
                 this.bounds = bounds;
@@ -222,9 +270,9 @@ export default abstract class LeafletMap {
         });
     }
 
-    updatePolygons(data, dataSources, settings) {
+    updatePolygon(data, dataSources, settings) {
         this.ready$.subscribe(() => {
-            this.poly.updatePolyline(settings, data, dataSources);        
+            this.poly.updatePolyline(settings, data, dataSources);
         });
-    }  
+    }
 }

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

@@ -17,6 +17,7 @@
 import { LatLngExpression, LatLngTuple } from 'leaflet';
 
 export interface MapOptions {
+    draggebleMarker: any;
     initCallback?: Function,
     defaultZoomLevel?: number,
     dontFitMapBounds?: boolean,

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

@@ -32,6 +32,8 @@ import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.inter
 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
 import { parseFunction, parseArray, parseData } from '@app/core/utils';
 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@app/core/schema-utils';
+import { AttributeScope, EntityId } from '@app/shared/public-api';
+import { forkJoin } from 'rxjs';
 
 export class MapWidgetController implements MapWidgetInterface {
 
@@ -58,11 +60,43 @@ export class MapWidgetController implements MapWidgetInterface {
             return;
         }
         this.map = new MapClass($element, this.settings);
+        this.map.saveMarkerLocation = this.setMarkerLocation;
     }
 
     onInit() {
     }
 
+    setMarkerLocation = (e) => {
+        console.log("MapWidgetController -> setMarkerLocation -> e", e)
+        console.log(this.data);
+
+        let attributeService = this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('attributeService'));
+
+
+        let attributesLocation = [];
+        let timeseriesLocation = [];
+        let promises = [];
+        forkJoin(
+            this.data.filter(data => !!e[data.dataKey.name])
+                .map(data => {
+                    const entityId: EntityId = {
+                        entityType: data.datasource.entityType,
+                        id: data.datasource.entityId
+                    };
+                    return attributeService.saveEntityAttributes(
+                        entityId,
+                        AttributeScope.SHARED_SCOPE,
+                        [{
+                            key: data.dataKey.name,
+                            value: e[data.dataKey.name]
+                        }]
+                    );
+                })).subscribe(res => {
+                    console.log("MapWidgetController -> setMarkerLocation -> res", res)
+
+                });
+    }
+
     initSettings(settings: any) {
         const functionParams = ['data', 'dsData', 'dsIndex'];
         this.provider = settings.provider ? settings.provider : this.mapProvider;
@@ -78,6 +112,7 @@ export class MapWidgetController implements MapWidgetInterface {
             tooltipPattern: settings.tooltipPattern ||
                 "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
             defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0, 0],
+            useDraggableMarker: true,
             currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? {
                 url: settings.markerImage,
                 size: settings.markerImageSize || 34
@@ -89,20 +124,16 @@ export class MapWidgetController implements MapWidgetInterface {
     update() {
         if (this.drawRoutes)
             this.map.updatePolylines(parseArray(this.data));
-        if(this.settings.showPolygon)
-        {
-            console.log(this.data);
-            
-            let dummy = [[37.771121,-22.510761],[37.774581,-22.454885],[37.766575,-22.453683],[37.764268,-22.509945]];
-            this.map.updatePolygon(dummy);            
+        if (this.settings.showPolygon) {
+            //console.log(this.data, this.ctx);
+
+            //  let dummy = [[37.771121,-22.510761],[37.774581,-22.454885],[37.766575,-22.453683],[37.764268,-22.509945]];
+            //this.data[0].data = dummy
+            //this.map.updatePolygons(this.data);            
         }
         this.map.updateMarkers(parseData(this.data));
     }
 
-    public updateHistoryData(dataSources) {
-        dataSources.map()
-    }
-
     onDataUpdated() {
     }
 
@@ -119,15 +150,15 @@ export class MapWidgetController implements MapWidgetInterface {
         return {};
     }
 
-    public static getProvidersSchema(){
-     return   mergeSchemes([mapProviderSchema,
+    public static getProvidersSchema() {
+        return mergeSchemes([mapProviderSchema,
             ...Object.values(providerSets)?.map(
                 setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]);
-    } 
+    }
 
     public static settingsSchema(mapProvider, drawRoutes): Object {
         let schema = initSchema();
-        addToSchema(schema,this.getProvidersSchema());
+        addToSchema(schema, this.getProvidersSchema());
         addGroupInfo(schema, "Map Provider Settings");
         addToSchema(schema, commonMapSettingsSchema);
         addGroupInfo(schema, "Common Map Settings");
@@ -228,4 +259,5 @@ const defaultSettings = {
     minZoomLevel: 16,
     credentials: '',
     markerClusteringSetting: null,
+    draggebleMarker: true
 }

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

@@ -29,7 +29,7 @@ export class Marker {
     data;
     dataSources;
 
-    constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, onDragendListener?) {
+    constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) {
         //this.map = map;
         this.location = location;
         this.setDataSources(data, dataSources);

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

@@ -24,6 +24,7 @@ export class Polyline {
     data;
 
     constructor(private map: L.Map, locations, data, dataSources, settings) {
+        console.log("Polyline -> constructor -> data", data)
         this.dataSources = dataSources;
         this.data = data;
         this.leafletPoly = L.polyline(locations,

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

@@ -371,6 +371,11 @@ export const commonMapSettingsSchema =
                 "title": "Polygon Color function: f(data, dsData, dsIndex)",
                 "type": "string"
             },
+            "draggableMarker": {
+                "title": "Draggable Marker",
+                "type": "boolean",
+                "default": false
+            },
             "markerImage": {
                 "title": "Custom marker image",
                 "type": "string"
@@ -411,6 +416,7 @@ export const commonMapSettingsSchema =
         "showLabel",
         "label",
         "useLabelFunction",
+        "draggableMarker",
         {
             "key": "labelFunction",
             "type": "javascript"

ui-ngx/src/assets/add_location.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4c-7.72 0-14 6.28-14 14 0 10.5 14 26 14 26s14-15.5 14-26c0-7.72-6.28-14-14-14zm8 16h-6v6h-4v-6h-6v-4h6v-6h4v6h6v4z"/></svg>