zoom fix

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

@@ -158,9 +158,9 @@ export default abstract class LeafletMap {
         this.map = map;
         if (this.options.useDefaultCenterPosition) {
             this.map.panTo(this.options.defaultCenterPosition);
-              this.bounds = map.getBounds();
+            this.bounds = map.getBounds();
         }
-          else this.bounds = new L.LatLngBounds(null, null);
+        else this.bounds = new L.LatLngBounds(null, null);
         if (this.options.draggableMarker) {
             this.addMarkerControl();
         }
@@ -279,8 +279,8 @@ export default abstract class LeafletMap {
     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)
+            if (callback)
-            newMarker.leafletMarker.on('click', ()=>{callback(data, true)});
+                newMarker.leafletMarker.on('click', () => { callback(data, true) });
             if (this.bounds)
                 this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
             this.markers.set(key, newMarker);
@@ -373,8 +373,12 @@ export default abstract class LeafletMap {
     updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
         this.ready$.subscribe(() => {
             const poly = this.polylines.get(key);
+            const oldBounds = poly.leafletPoly.getBounds();
             poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);
-            const bounds = poly.leafletPoly.getBounds();
+            const newBounds = poly.leafletPoly.getBounds();
+            if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
+                this.fitBounds(newBounds);
+            }
         });
     }
 
@@ -408,7 +412,12 @@ export default abstract class LeafletMap {
     updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
             const poly = this.polygons.get(polyData.entityName);
+            const oldBounds = poly.leafletPoly.getBounds();
             poly.updatePolygon(polyData, dataSources, settings);
+            const newBounds = poly.leafletPoly.getBounds();
+            if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
+                this.fitBounds(newBounds);
+            }
         });
     }
 }

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

@@ -198,7 +198,7 @@ export function parseArray(input: any[]): any[] {
           time: el[0],
           deviceType: null
         };
-        entityArray.filter(e => e.data.length).forEach(entity => {
+        entityArray.filter(e => e.data.length && e.data[i]).forEach(entity => {
           obj[entity?.dataKey?.label] = entity?.data[i][1];
           obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0];
           if (entity?.dataKey?.label === 'type') {

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,12 +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).filter(arr=>arr.length);
+      this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length);
-      if(this.historicalData.length){
+      if (this.historicalData.length) {
-      this.activeTrip = this.historicalData[0][0];
+        this.activeTrip = this.historicalData[0][0];
-      this.calculateIntervals();
+        this.calculateIntervals();
-      this.timeUpdated(this.intervals[0]);
+        this.timeUpdated(this.intervals[0]);
-    }
+      }
       this.mapWidget.map.map?.invalidateSize();
       this.cd.detectChanges();
     }
@@ -110,11 +110,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   timeUpdated(time: number) {
     this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss');
     this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss');
-    const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]).map(ds => {
+    const currentPosition = this.interpolatedData
-      ds.minTime = this.minTime;
+      .map(dataSource => dataSource[time])
-      ds.maxTime = this.maxTime;
+      .filter(ds => ds)
-      return ds;
+      .map(ds => {
-    });
+        ds.minTime = this.minTime;
+        ds.maxTime = this.maxTime;
+        return ds;
+      });
     this.activeTrip = currentPosition[0];
     this.calcLabel();
     this.calcTooltip();