fix tooltip with mu;tiple markers

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

@@ -244,7 +244,7 @@ export default abstract class LeafletMap {
     }
 
     // Markers
-    updateMarkers(markersData) {
+    updateMarkers(markersData, callback?) {
         markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => {
             if (data.rotationAngle || data.rotationAngle === 0) {
                 const currentImage = this.options.useMarkerImageFunction ?
@@ -265,7 +265,7 @@ export default abstract class LeafletMap {
                 this.updateMarker(data.entityName, data, markersData, this.options)
             }
             else {
-                this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings);
+                this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, callback);
             }
         });
         this.markersData = markersData;
@@ -276,9 +276,11 @@ export default abstract class LeafletMap {
         this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) });
     }
 
-    private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) {
+    private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) {
         this.ready$.subscribe(() => {
             const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
+            if(callback)
+            newMarker.leafletMarker.on('click', ()=>{callback(data, true)});
             if (this.bounds)
                 this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
             this.markers.set(key, newMarker);
@@ -380,7 +382,7 @@ export default abstract class LeafletMap {
 
     updatePolygons(polyData: FormattedData[]) {
         polyData.forEach((data: FormattedData) => {
-            if (data.hasOwnProperty(this.options.polygonKeyName)) {
+            if (data && data.hasOwnProperty(this.options.polygonKeyName)) {
                 if (typeof (data[this.options.polygonKeyName]) === 'string') {
                     data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[];
                 }
@@ -405,8 +407,8 @@ export default abstract class LeafletMap {
 
     updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
-            const poly = this.polygons.get(polyData.datasource.entityName);
+            const poly = this.polygons.get(polyData.entityName);
-            poly.updatePolygon(polyData.data, dataSources, settings);
+            poly.updatePolygon(polyData, dataSources, settings);
         });
     }
 }

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

@@ -26,6 +26,7 @@ import {
 
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
+export type GetTooltip= (point: FormattedData, setTooltip?: boolean) => string;
 
 export type MapSettings = {
     draggableMarker: boolean;

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

@@ -57,7 +57,6 @@ export class MapWidgetController implements MapWidgetInterface {
         this.settings.markerClick = this.getDescriptors('markerClick');
         this.settings.polygonClick = this.getDescriptors('polygonClick');
 
-        // this.settings.
         const MapClass = providerSets[this.provider]?.MapClass;
         if (!MapClass) {
             return;

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

@@ -61,7 +61,7 @@ export class Polygon {
         this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
     }
 
-    updatePolygon(data: LatLngTuple[], dataSources: FormattedData[], settings: PolygonSettings) {
+    updatePolygon(data:{[coordinates:string]: LatLngTuple[]}, dataSources: FormattedData[], settings: PolygonSettings) {
         this.data = data;
         this.dataSources = dataSources;
         this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]);

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

@@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
 
   mapWidget: MapWidgetController;
   historicalData;
-  intervals;
+  intervals=[];
   normalizationStep = 1000;
   interpolatedData = [];
   widgetConfig: WidgetConfig;
@@ -91,10 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     this.normalizationStep = this.settings.normalizationStep;
     const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
     if (subscription) subscription.callbacks.onDataUpdated = () => {
-      this.historicalData = parseArray(this.ctx.data);
+      this.historicalData = parseArray(this.ctx.data).filter(arr=>arr.length);
+      if(this.historicalData.length){
       this.activeTrip = this.historicalData[0][0];
       this.calculateIntervals();
       this.timeUpdated(this.intervals[0]);
+    }
       this.mapWidget.map.map?.invalidateSize();
       this.cd.detectChanges();
     }
@@ -128,7 +130,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
             this.settings.usePointAsAnchor ||
             safeExecute(this.settings.pointAsAnchorFunction, [this.historicalData, data, data.dsIndex])).map(data => data.time);
       }
-      this.mapWidget.map.updateMarkers(currentPosition);
+      this.mapWidget.map.updateMarkers(currentPosition, this.calcTooltip);
     }
   }
 
@@ -144,7 +146,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       this.intervals.push(dataSource[dataSource.length - 1]?.time);
       this.interpolatedData[index] = this.interpolateArray(dataSource, this.intervals);
     });
-
   }
 
   calcTooltip = (point?: FormattedData, setTooltip = true) => {