WIP on polygons

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

@@ -520,10 +520,6 @@ export function parseFunction(source: string, params: string[] = []): Function {
 }
 
 export function parseTemplate(template, data) {
-  function formatValue(value, pattern) {
-
-  }
-
   let res = '';
   try {
     let variables = '';

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

@@ -26,12 +26,14 @@ import { Marker } from './markers';
 import { Observable, of, BehaviorSubject, Subject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Polyline } from './polyline';
+import { Polygon } from './polygon';
 
 export default abstract class LeafletMap {
 
     markers: Map<string, Marker> = new Map();
     tooltips = [];
     poly: Polyline;
+    polygon: Polygon;
     map: L.Map;
     map$: BehaviorSubject<L.Map> = new BehaviorSubject(null);
     ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map));
@@ -189,12 +191,40 @@ export default abstract class LeafletMap {
 
     updatePolyline(data, dataSources, settings) {
         this.ready$.subscribe(() => {
-            this.poly.updatePolyline(settings, data, dataSources);
-            /*   const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
-               if (bounds.isValid()) {
-                   this.map.fitBounds(bounds);
-                   this.bounds = bounds;
-               }*/
+            this.poly.updatePolyline(settings, data, dataSources);        
         });
+    }  
+
+      //polygon
+
+      updatePolygon(polyData: Array<Array<any>>) {
+        polyData.forEach(data => {
+            if (data.length) {
+                let dataSource = polyData.map(arr => arr[0]);
+                if (this.poly) {
+                    this.updatePolyline(data, dataSource, this.options);
+                }
+                else {
+                    this.createPolyline(data, dataSource, this.options);
+                }
+            }
+        })
     }
+
+    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());
+            if (bounds.isValid()) {
+                this.map.fitBounds(bounds);
+                this.bounds = bounds;
+            }
+        });
+    }
+
+    updatePolygons(data, dataSources, settings) {
+        this.ready$.subscribe(() => {
+            this.poly.updatePolyline(settings, data, dataSources);        
+        });
+    }  
 }

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

@@ -39,6 +39,7 @@ export class MapWidgetController implements MapWidgetInterface {
     provider: MapProviders;
     schema;
     data;
+    settings;
 
     constructor(public mapProvider: MapProviders, private drawRoutes, public ctx, $element) {
         if (this.map) {
@@ -50,13 +51,13 @@ export class MapWidgetController implements MapWidgetInterface {
         if (!$element) {
             $element = ctx.$container[0];
         }
-        let settings = this.initSettings(ctx.settings);
+        this.settings = this.initSettings(ctx.settings);
 
         let MapClass = providerSets[this.provider]?.MapClass;
         if (!MapClass) {
             return;
         }
-        this.map = new MapClass($element, settings);
+        this.map = new MapClass($element, this.settings);
     }
 
     onInit() {
@@ -88,6 +89,13 @@ 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);            
+        }
         this.map.updateMarkers(parseData(this.data));
     }
 
@@ -114,11 +122,10 @@ export class MapWidgetController implements MapWidgetInterface {
     public static getProvidersSchema(){
      return   mergeSchemes([mapProviderSchema,
             ...Object.values(providerSets)?.map(
-                setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))])
+                setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]);
     } 
 
     public static settingsSchema(mapProvider, drawRoutes): Object {
-        //const providerInfo = providerSets[mapProvider];
         let schema = initSchema();
         addToSchema(schema,this.getProvidersSchema());
         addGroupInfo(schema, "Map Provider Settings");
@@ -133,8 +140,6 @@ export class MapWidgetController implements MapWidgetInterface {
             addToSchema(schema, clusteringSchema);
             addGroupInfo(schema, "Markers Clustering Settings");
         }
-        console.log(11, schema);
-
         return schema;
     }
 

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

@@ -18,7 +18,7 @@ import L from 'leaflet';
 import { interpolateOnPointSegment } from 'leaflet-geometryutil';
 import _ from 'lodash';
 
-export function createTooltip(target, settings, targetArgs?) {
+export function createTooltip(target, settings) {
     const popup = L.popup();
     popup.setContent('');
     target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
@@ -31,12 +31,7 @@ export function createTooltip(target, settings, targetArgs?) {
             this.closePopup();
         });
     }
-    return popup/*{
-        markerArgs: targetArgs,
-        popup: popup,
-        locationSettings: settings,
-        dsIndex: settings.dsIndex
-    };*/
+    return popup;
 }
 
 

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?, markerArgs?, 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);
@@ -45,7 +45,7 @@ export class Marker {
         });
 
         if (settings.showTooltip) {
-            this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs);
+            this.tooltip = createTooltip(this.leafletMarker, settings);
             this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
         }
 

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

@@ -19,13 +19,12 @@ import { createTooltip } from './maps-utils';
 
 export class Polygon {
 
-    map: L.Map;
     leafletPoly: L.Polygon;
 
     tooltip;
 
-    constructor(latLangs, settings, location, onClickListener) {
-        this.leafletPoly = L.polygon(latLangs, {
+    constructor(public map, coordinates, dataSources, settings, onClickListener?) {
+        this.leafletPoly = L.polygon(coordinates, {
             fill: true,
             fillColor: settings.polygonColor,
             color: settings.polygonStrokeColor,
@@ -35,7 +34,7 @@ export class Polygon {
         }).addTo(this.map);
 
         if (settings.showTooltip) {
-            this.tooltip = createTooltip(this.leafletPoly, location.dsIndex, settings);
+            this.tooltip = createTooltip(this.leafletPoly,  settings);
         }
         if (onClickListener) {
             this.leafletPoly.on('click', onClickListener);

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

@@ -57,10 +57,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     let subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
     if (subscription) subscription.callbacks.onDataUpdated = (updated) => {
       this.historicalData = parseArray(this.ctx.data);
-      this.historicalData.forEach(ds => ds.forEach(el => {
-        el.longitude += (Math.random() - 0.5)
-        el.latitude += (Math.random() - 0.5)
-      }));
       this.calculateIntervals();
       this.timeUpdated(this.intervals[0]);
       this.mapWidget.map.map.invalidateSize();