selected trip on map

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

@@ -20,12 +20,12 @@ import 'leaflet-providers';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 
 import {
-  FormattedData,
+    FormattedData,
-  MapSettings,
+    MapSettings,
-  MarkerSettings,
+    MarkerSettings,
-  PolygonSettings,
+    PolygonSettings,
-  PolylineSettings,
+    PolylineSettings,
-  UnitedMapSettings
+    UnitedMapSettings
 } from './map-models';
 import { Marker } from './markers';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -346,26 +346,30 @@ export default abstract class LeafletMap {
     // Polyline
 
     updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
-        polyData.forEach((dataSource) => {
+        polyData.forEach((dataSource: FormattedData[]) => {
-            if (dataSource.length) {
+            data = data || dataSource[0];
-                data = data || dataSource[0];
+            if (dataSource.length && data.entityName === dataSource[0].entityName) {
-                if (this.polylines.get(data.$datasource.entityName)) {
+                if (this.polylines.get(data.entityName)) {
                     this.updatePolyline(data, dataSource, this.options);
                 }
                 else {
                     this.createPolyline(data, dataSource, this.options);
                 }
             }
+            else {
+                if (data)
+                    this.removePolyline(dataSource[0]?.entityName)
+            }
         })
     }
 
     createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
         this.ready$.subscribe(() => {
             const poly = new Polyline(this.map,
-              dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
+                dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
             const bounds = poly.leafletPoly.getBounds();
             this.fitBounds(bounds);
-            this.polylines.set(data.$datasource.entityName, poly);
+            this.polylines.set(data.entityName, poly);
         });
     }
 
@@ -373,13 +377,21 @@ export default abstract class LeafletMap {
         this.ready$.subscribe(() => {
             const poly = this.polylines.get(data.entityName);
             const oldBounds = poly.leafletPoly.getBounds();
-            poly.updatePolyline(settings, data.map(el => this.convertPosition(el)).filter(el => !!el), dataSources);
+            poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
             const newBounds = poly.leafletPoly.getBounds();
             if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
                 this.fitBounds(newBounds);
             }
         });
-    }Я
+    }
+
+    removePolyline(name: string) {
+        const poly = this.polylines.get(name);
+        if (poly) {
+            this.map.removeLayer(poly.leafletPoly);
+            this.polylines.delete(name);
+        }
+    }
 
     // Polygon
 

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

@@ -65,7 +65,6 @@ export class Polyline {
     this.dataSources = dataSources;
     this.leafletPoly.setLatLngs(locations);
     this.leafletPoly.setStyle(this.getPolyStyle(settings));
-    //  this.setPolylineLatLngs(data);
     if (this.polylineDecorator)
       this.polylineDecorator.setPaths(this.leafletPoly);
   }
@@ -92,8 +91,4 @@ export class Polyline {
   getPolylineLatLngs() {
     return this.leafletPoly.getLatLngs();
   }
-
-  setPolylineLatLngs(latLngs) {
-    this.leafletPoly.setLatLngs(latLngs);
-  }
 }

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

@@ -69,6 +69,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   maxTimeFormat: string;
   anchors: number[] = [];
   useAnchors: boolean;
+  currentTime: number;
 
   static getSettingsSchema(): JsonSettingsSchema {
     const schema = initSchema();
@@ -118,6 +119,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   }
 
   timeUpdated(time: number) {
+    this.currentTime = time;
     const currentPosition = this.interpolatedTimeData
       .map(dataSource => dataSource[time])
       .filter(ds => ds)
@@ -142,7 +144,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
         }
       }
     }
-    this.activeTrip = currentPosition[0];
     this.calcLabel();
     this.calcTooltip();
     if (this.mapWidget) {
@@ -153,7 +154,10 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       if (this.settings.showPoints) {
         this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip);
       }
-      this.mapWidget.map.updateMarkers(currentPosition, this.calcTooltip);
+      this.mapWidget.map.updateMarkers(currentPosition, (trip) => {
+        this.activeTrip = trip;
+        this.timeUpdated(this.currentTime)
+      });
     }
   }
 
@@ -193,6 +197,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
         SecurityContext.HTML, tooltipText);
       this.cd.detectChanges();
     }
+    this.activeTrip = point;
     return tooltipText;
   }