update map widget bendle && bugfixes

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

@@ -186,7 +186,7 @@ export default abstract class LeafletMap {
             if (this.convertPosition(data)) {
                 if (data.rotationAngle) {
                     this.options.icon = L.divIcon({
-                        html: `<div class="arrow" style="transform: rotate(${data.rotationAngle}deg)"><div>`
+                        html: `<div class="arrow" style="transform: translate(-10px, -10px) rotate(${data.rotationAngle}deg);"><div>`
                     })
                 }
                 else {
@@ -245,10 +245,10 @@ export default abstract class LeafletMap {
             if (data.length) {
                 const dataSource = polyData.map(arr => arr[0]);
                 if (this.poly) {
-                    this.updatePolyline(data, polyData, this.options);
+                    this.updatePolyline(data, dataSource, this.options);
                 }
                 else {
-                    this.createPolyline(data, polyData, this.options);
+                    this.createPolyline(data, dataSource, this.options);
                 }
             }
         })
@@ -259,7 +259,7 @@ export default abstract class LeafletMap {
             this.ready$.subscribe(() => {
                 this.poly = new Polyline(this.map,
                     data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
-                const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
+                const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds().pad(0.2));
                 if (bounds.isValid()) {
                     this.map.fitBounds(bounds);
                     this.bounds = bounds;
@@ -270,6 +270,11 @@ 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().pad(0.2));
+                if (bounds.isValid()) {
+                    this.map.fitBounds(bounds);
+                    this.bounds = bounds;
+                }
         });
     }
 
@@ -294,7 +299,7 @@ export default abstract class LeafletMap {
     createPolygon(data: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
             this.polygon = new Polygon(this.map, data, dataSources, settings);
-            const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds());
+            const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds().pad(0.2));
             if (bounds.isValid()) {
                 this.map.fitBounds(bounds);
                 this.bounds = bounds;
@@ -305,6 +310,11 @@ export default abstract class LeafletMap {
     updatePolygon(data, dataSources, settings) {
         this.ready$.subscribe(() => {
             // this.polygon.updatePolygon(settings, data, dataSources);
+            const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds().pad(0.2));
+            if (bounds.isValid()) {
+                this.map.fitBounds(bounds);
+                this.bounds = bounds;
+            }
         });
     }
 }

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

@@ -166,8 +166,6 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     update() {
-        console.log(parseArray(this.data));
-        
         if (this.drawRoutes)
             this.map.updatePolylines(parseArray(this.data));
         if (this.settings.showPolygon) {

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

@@ -34,7 +34,7 @@ export class Polyline {
         this.leafletPoly = L.polyline(locations,
             this.getPolyStyle(settings)
         ).addTo(this.map);
-        
+
         if (settings.usePolylineDecorator) {
             this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
         }
@@ -62,17 +62,15 @@ export class Polyline {
     }
 
     updatePolyline(settings, data, dataSources) {
+        this.data = data;
+        this.dataSources = dataSources;
         this.leafletPoly.setStyle(this.getPolyStyle(settings));
-        console.log( this.getPolyStyle(settings));
+        //  this.setPolylineLatLngs(data);
-
+        if (this.polylineDecorator)
-      //  this.setPolylineLatLngs(data);
+            this.polylineDecorator.setPaths(this.leafletPoly);
-      if(this.polylineDecorator)
-        this.polylineDecorator.setPaths(this.leafletPoly);
     }
 
     getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
-        console.log(this.data,this.dataSources, this.dataSources[this.data[0]?.dsIndex], this.data[0]?.dsIndex);
-        
         return {
             color: settings.useColorFunction ?
                 safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color,

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

@@ -33,5 +33,5 @@
         </div>
     </div>
     <tb-history-selector *ngIf="historicalData" [settings]="settings" [intervals]="intervals"
-        (onTimeUpdated)="timeUpdated($event)"></tb-history-selector>
+        (timeUpdated)="timeUpdated($event)"></tb-history-selector>
 </div>

ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts

@@ -55,8 +55,9 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
     if (!this.interval)
       this.interval = interval(1000 / this.speed)
         .pipe(
-          filter(() => this.playing),
+          filter(() => this.playing)).subscribe(() => {
-          tap(() => this.index++)).subscribe(() => {
+          this.index++;
+          console.log("HistorySelectorComponent -> play -> this.index", this.index, this.maxTimeIndex)
             if (this.index < this.maxTimeIndex) {
               this.cd.detectChanges();
               this.timeUpdated.emit(this.intervals[this.index]);

ui-ngx/src/app/shared/pipe/template.pipe.ts

@@ -20,7 +20,6 @@ import { parseTemplate } from '@app/core/utils';
 @Pipe({ name: 'tbParseTemplate' })
 export class TbTemplatePipe implements PipeTransform {
   transform(template, data): string {
-    console.log('TbTemplatePipe -> transform -> template, data', template, data)
     return parseTemplate(template, data);
   }
 }