add polygon support

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

@@ -27,6 +27,7 @@ import { Observable, of, BehaviorSubject, Subject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Polyline } from './polyline';
 import { Polygon } from './polygon';
+import { string } from 'prop-types';
 
 export default abstract class LeafletMap {
 
@@ -140,15 +141,10 @@ export default abstract class LeafletMap {
         this.map.invalidateSize(true);
     }
 
-
     onResize() {
 
     }
 
-    getTooltips() {
-        return this.tooltips;//rewrite
-    }
-
     getCenter() {
         return this.map.getCenter();
     }
@@ -247,21 +243,24 @@ export default abstract class LeafletMap {
 
     updatePolygons(polyData: Array<Array<any>>) {
         polyData.forEach((data: any) => {
-            if (data.data.length) {
+            if (data.data.length && data.dataKey.name === this.options.polygonKeyName) {
-                let dataSource = polyData.map(arr => arr[0]);
+                if (typeof (data?.data[0][1]) === 'string') {
+                    data.data = JSON.parse(data.data[0][1]);
+                }
                 if (this.polygon) {
-                    this.updatePolygon(data, dataSource, this.options);
+                    this.updatePolygon(data.data, polyData, this.options);
                 }
                 else {
-                    this.createPolygon(data, dataSource, this.options);
+                    this.createPolygon(data.data, polyData, this.options);
                 }
             }
-        })
+        });
     }
 
     createPolygon(data, dataSources, settings) {
         this.ready$.subscribe(() => {
-            this.polygon = new Polygon(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings);
+            //public map, coordinates, dataSources, settings, onClickListener?
+            this.polygon = new Polygon(this.map, data, dataSources, settings);
             const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds());
             if (bounds.isValid()) {
                 this.map.fitBounds(bounds);
@@ -272,7 +271,7 @@ export default abstract class LeafletMap {
 
     updatePolygon(data, dataSources, settings) {
         this.ready$.subscribe(() => {
-            this.poly.updatePolyline(settings, data, dataSources);
+            //   this.polygon.updatePolygon(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 {
+    polygonKeyName: any;
     draggebleMarker: any;
     initCallback?: Function,
     defaultZoomLevel?: number,

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

@@ -67,15 +67,7 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     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 => {
@@ -93,7 +85,6 @@ export class MapWidgetController implements MapWidgetInterface {
                     );
                 })).subscribe(res => {
                     console.log("MapWidgetController -> setMarkerLocation -> res", res)
-
                 });
     }
 
@@ -125,11 +116,7 @@ export class MapWidgetController implements MapWidgetInterface {
         if (this.drawRoutes)
             this.map.updatePolylines(parseArray(this.data));
         if (this.settings.showPolygon) {
-            //console.log(this.data, this.ctx);
+            this.map.updatePolygons(this.data);
-
-            //  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));
     }

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

@@ -20,10 +20,9 @@ import { createTooltip } from './maps-utils';
 export class Polygon {
 
     leafletPoly: L.Polygon;
-
     tooltip;
 
-    constructor(public map, coordinates, dataSources, settings, onClickListener?) {
+    constructor(public map, coordinates, dataSources, settings, onClickListener?) {     
         this.leafletPoly = L.polygon(coordinates, {
             fill: true,
             fillColor: settings.polygonColor,