diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 40e3948ae3..78a5b916f6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/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); - poly.updatePolygon(polyData.data, dataSources, settings); + const poly = this.polygons.get(polyData.entityName); + poly.updatePolygon(polyData, dataSources, settings); }); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 1d28bf9845..1c198825df 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index aaaf6875c1..ff67072d4f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index 9e169f5b8c..9a220016a4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/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]); diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts index 94f974ab5b..a12feae0e0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts +++ b/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) => {