Merge pull request #2819 from ArtemHalushko/map/3.0

Map/3.0

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';
+import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, MarkerClusterGroup } from 'leaflet';
 
 import 'leaflet-providers';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
@@ -45,9 +45,9 @@ export default abstract class LeafletMap {
     options: UnitedMapSettings;
     bounds: L.LatLngBounds;
     datasources: FormattedData[];
-    markersCluster;
+    markersCluster: MarkerClusterGroup;
     points: FeatureGroup;
-    markersData = [];
+    markersData: FormattedData[] = [];
 
     protected constructor(public $container: HTMLElement, options: UnitedMapSettings) {
         this.options = options;
@@ -222,6 +222,7 @@ export default abstract class LeafletMap {
                     this.bounds = this.bounds.extend(this.options.defaultCenterPosition);
                 }
                 this.map.fitBounds(this.bounds, { padding: padding || [50, 50], animate: false });
+                this.map.invalidateSize();
             }
         }
     }
@@ -244,7 +245,7 @@ export default abstract class LeafletMap {
     }
 
     // Markers
-    updateMarkers(markersData, callback?) {
+    updateMarkers(markersData: FormattedData[], callback?) {
         markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => {
             if (data.rotationAngle || data.rotationAngle === 0) {
                 const currentImage = this.options.useMarkerImageFunction ?
@@ -271,7 +272,7 @@ export default abstract class LeafletMap {
         this.markersData = markersData;
     }
 
-    dragMarker = (e, data?) => {
+    dragMarker = (e, data = {}) => {
         if (e.type !== 'dragend') return;
         this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) });
     }

@@ -34,7 +34,8 @@ import {
     DatasourceType,
     JsonSettingsSchema,
     WidgetActionDescriptor,
-    widgetType
+    widgetType,
+    DatasourceData
 } from '@shared/models/widget.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
@@ -83,7 +84,7 @@ export class MapWidgetController implements MapWidgetInterface {
     map: LeafletMap;
     provider: MapProviders;
     schema: JsonSettingsSchema;
-    data;
+    data: DatasourceData[];
     settings: UnitedMapSettings;
 
     public static dataKeySettingsSchema(): object {

@@ -22,8 +22,8 @@ import { isDefined } from '@core/utils';
 
 export class Marker {
     leafletMarker: L.Marker;
-    tooltipOffset: [number, number];
-    markerOffset: [number, number];
+    tooltipOffset: L.LatLngTuple;
+    markerOffset: L.LatLngTuple;
     tooltip: L.Popup;
     location: L.LatLngExpression;
     data: FormattedData;

@@ -409,7 +409,10 @@ export const commonMapSettingsSchema =
             condition: 'model.provider !== "image-map"'
         },
         'draggableMarker',
-        'disableScrollZooming',
+        {
+            key: 'disableScrollZooming',
+            condition: 'model.provider !== "image-map"'
+        },
         {
             key: 'latKeyName',
             condition: 'model.provider !== "image-map"'

@@ -159,10 +159,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   calculateIntervals() {
     this.historicalData.forEach((dataSource, index) => {
       this.minTime = dataSource[0]?.time || Infinity;
-      const minTimeFormat = this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : '';
       this.maxTime = dataSource[dataSource.length - 1]?.time || -Infinity;
-      const maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : '';
-      this.interpolatedTimeData[index] = this.interpolateArray(dataSource, minTimeFormat, maxTimeFormat);
+      this.interpolatedTimeData[index] = this.interpolateArray(dataSource);
     });
     if(!this.activeTrip){
       this.activeTrip = this.interpolatedTimeData.map(dataSource => dataSource[this.minTime]).filter(ds => ds)[0];
@@ -194,7 +192,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     this.label = (parseWithTranslation.parseTemplate(labelText, data, true));
   }
 
-  interpolateArray(originData: FormattedData[], minTimeFormat?: string, maxTimeFormat?: string) {
+  interpolateArray(originData: FormattedData[]) {
     const result = {};
     const latKeyName = this.settings.latKeyName;
     const lngKeyName = this.settings.lngKeyName;
@@ -203,8 +201,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       const normalizeTime = this.minTime + Math.ceil((currentTime - this.minTime) / this.normalizationStep) * this.normalizationStep;
       result[normalizeTime] = {
         ...data,
-        minTime: minTimeFormat,
-        maxTime: maxTimeFormat,
+        minTime: this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : '',
+        maxTime: this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : '',
         rotationAngle: this.settings.rotationAngle
       };
     }

@@ -37,19 +37,18 @@
         <button mat-icon-button class="mat-icon-button" aria-label="End" (click)="moveEnd()">
             <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_forward</mat-icon>
         </button>
-        <button mat-icon-button class="mat-icon-button" aria-label="Play">
-            <mat-icon (click)="play()" *ngIf="!playing" class="material-icons"
-                [ngStyle]="{'color': settings.buttonColor}">
+        <button mat-icon-button class="mat-icon-button" *ngIf="!playing" (click)="play()" aria-label="Play">
+            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">
                 play_circle_outline
             </mat-icon>
-            <mat-icon (click)="pause()" *ngIf="playing" class="material-icons"
-                [ngStyle]="{'color': settings.buttonColor}">
+        </button>
+        <button mat-icon-button class="mat-icon-button" *ngIf="playing" (click)="pause()" aria-label="Stop">
+            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">
                 pause_circle_outline
             </mat-icon>
         </button>
-        <mat-select [(ngModel)]="speed" (selectionChange)="reeneble()" class="speed-select"
-            aria-label="Speed selector">
+        <mat-select [(ngModel)]="speed" (selectionChange)="reeneble()" class="speed-select" aria-label="Speed selector">
             <mat-option [value]="speedValue" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option>
         </mat-select>
     </div>
-</div>
+</div>
\ No newline at end of file