Showing
5 changed files
with
15 additions
and
12 deletions
@@ -244,7 +244,7 @@ export default abstract class LeafletMap { | @@ -244,7 +244,7 @@ export default abstract class LeafletMap { | ||
244 | } | 244 | } |
245 | 245 | ||
246 | // Markers | 246 | // Markers |
247 | - updateMarkers(markersData) { | 247 | + updateMarkers(markersData, callback?) { |
248 | markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => { | 248 | markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => { |
249 | if (data.rotationAngle || data.rotationAngle === 0) { | 249 | if (data.rotationAngle || data.rotationAngle === 0) { |
250 | const currentImage = this.options.useMarkerImageFunction ? | 250 | const currentImage = this.options.useMarkerImageFunction ? |
@@ -265,7 +265,7 @@ export default abstract class LeafletMap { | @@ -265,7 +265,7 @@ export default abstract class LeafletMap { | ||
265 | this.updateMarker(data.entityName, data, markersData, this.options) | 265 | this.updateMarker(data.entityName, data, markersData, this.options) |
266 | } | 266 | } |
267 | else { | 267 | else { |
268 | - this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings); | 268 | + this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, callback); |
269 | } | 269 | } |
270 | }); | 270 | }); |
271 | this.markersData = markersData; | 271 | this.markersData = markersData; |
@@ -276,9 +276,11 @@ export default abstract class LeafletMap { | @@ -276,9 +276,11 @@ export default abstract class LeafletMap { | ||
276 | this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }); | 276 | this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }); |
277 | } | 277 | } |
278 | 278 | ||
279 | - private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) { | 279 | + private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) { |
280 | this.ready$.subscribe(() => { | 280 | this.ready$.subscribe(() => { |
281 | const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); | 281 | const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); |
282 | + if(callback) | ||
283 | + newMarker.leafletMarker.on('click', ()=>{callback(data, true)}); | ||
282 | if (this.bounds) | 284 | if (this.bounds) |
283 | this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); | 285 | this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); |
284 | this.markers.set(key, newMarker); | 286 | this.markers.set(key, newMarker); |
@@ -380,7 +382,7 @@ export default abstract class LeafletMap { | @@ -380,7 +382,7 @@ export default abstract class LeafletMap { | ||
380 | 382 | ||
381 | updatePolygons(polyData: FormattedData[]) { | 383 | updatePolygons(polyData: FormattedData[]) { |
382 | polyData.forEach((data: FormattedData) => { | 384 | polyData.forEach((data: FormattedData) => { |
383 | - if (data.hasOwnProperty(this.options.polygonKeyName)) { | 385 | + if (data && data.hasOwnProperty(this.options.polygonKeyName)) { |
384 | if (typeof (data[this.options.polygonKeyName]) === 'string') { | 386 | if (typeof (data[this.options.polygonKeyName]) === 'string') { |
385 | data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[]; | 387 | data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[]; |
386 | } | 388 | } |
@@ -405,8 +407,8 @@ export default abstract class LeafletMap { | @@ -405,8 +407,8 @@ export default abstract class LeafletMap { | ||
405 | 407 | ||
406 | updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) { | 408 | updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) { |
407 | this.ready$.subscribe(() => { | 409 | this.ready$.subscribe(() => { |
408 | - const poly = this.polygons.get(polyData.datasource.entityName); | ||
409 | - poly.updatePolygon(polyData.data, dataSources, settings); | 410 | + const poly = this.polygons.get(polyData.entityName); |
411 | + poly.updatePolygon(polyData, dataSources, settings); | ||
410 | }); | 412 | }); |
411 | } | 413 | } |
412 | } | 414 | } |
@@ -26,6 +26,7 @@ import { | @@ -26,6 +26,7 @@ import { | ||
26 | 26 | ||
27 | export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; | 27 | export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; |
28 | export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; | 28 | export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; |
29 | +export type GetTooltip= (point: FormattedData, setTooltip?: boolean) => string; | ||
29 | 30 | ||
30 | export type MapSettings = { | 31 | export type MapSettings = { |
31 | draggableMarker: boolean; | 32 | draggableMarker: boolean; |
@@ -57,7 +57,6 @@ export class MapWidgetController implements MapWidgetInterface { | @@ -57,7 +57,6 @@ export class MapWidgetController implements MapWidgetInterface { | ||
57 | this.settings.markerClick = this.getDescriptors('markerClick'); | 57 | this.settings.markerClick = this.getDescriptors('markerClick'); |
58 | this.settings.polygonClick = this.getDescriptors('polygonClick'); | 58 | this.settings.polygonClick = this.getDescriptors('polygonClick'); |
59 | 59 | ||
60 | - // this.settings. | ||
61 | const MapClass = providerSets[this.provider]?.MapClass; | 60 | const MapClass = providerSets[this.provider]?.MapClass; |
62 | if (!MapClass) { | 61 | if (!MapClass) { |
63 | return; | 62 | return; |
@@ -61,7 +61,7 @@ export class Polygon { | @@ -61,7 +61,7 @@ export class Polygon { | ||
61 | this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); | 61 | this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); |
62 | } | 62 | } |
63 | 63 | ||
64 | - updatePolygon(data: LatLngTuple[], dataSources: FormattedData[], settings: PolygonSettings) { | 64 | + updatePolygon(data:{[coordinates:string]: LatLngTuple[]}, dataSources: FormattedData[], settings: PolygonSettings) { |
65 | this.data = data; | 65 | this.data = data; |
66 | this.dataSources = dataSources; | 66 | this.dataSources = dataSources; |
67 | this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]); | 67 | this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]); |
@@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
47 | 47 | ||
48 | mapWidget: MapWidgetController; | 48 | mapWidget: MapWidgetController; |
49 | historicalData; | 49 | historicalData; |
50 | - intervals; | 50 | + intervals=[]; |
51 | normalizationStep = 1000; | 51 | normalizationStep = 1000; |
52 | interpolatedData = []; | 52 | interpolatedData = []; |
53 | widgetConfig: WidgetConfig; | 53 | widgetConfig: WidgetConfig; |
@@ -91,10 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -91,10 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
91 | this.normalizationStep = this.settings.normalizationStep; | 91 | this.normalizationStep = this.settings.normalizationStep; |
92 | const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; | 92 | const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; |
93 | if (subscription) subscription.callbacks.onDataUpdated = () => { | 93 | if (subscription) subscription.callbacks.onDataUpdated = () => { |
94 | - this.historicalData = parseArray(this.ctx.data); | 94 | + this.historicalData = parseArray(this.ctx.data).filter(arr=>arr.length); |
95 | + if(this.historicalData.length){ | ||
95 | this.activeTrip = this.historicalData[0][0]; | 96 | this.activeTrip = this.historicalData[0][0]; |
96 | this.calculateIntervals(); | 97 | this.calculateIntervals(); |
97 | this.timeUpdated(this.intervals[0]); | 98 | this.timeUpdated(this.intervals[0]); |
99 | + } | ||
98 | this.mapWidget.map.map?.invalidateSize(); | 100 | this.mapWidget.map.map?.invalidateSize(); |
99 | this.cd.detectChanges(); | 101 | this.cd.detectChanges(); |
100 | } | 102 | } |
@@ -128,7 +130,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -128,7 +130,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
128 | this.settings.usePointAsAnchor || | 130 | this.settings.usePointAsAnchor || |
129 | safeExecute(this.settings.pointAsAnchorFunction, [this.historicalData, data, data.dsIndex])).map(data => data.time); | 131 | safeExecute(this.settings.pointAsAnchorFunction, [this.historicalData, data, data.dsIndex])).map(data => data.time); |
130 | } | 132 | } |
131 | - this.mapWidget.map.updateMarkers(currentPosition); | 133 | + this.mapWidget.map.updateMarkers(currentPosition, this.calcTooltip); |
132 | } | 134 | } |
133 | } | 135 | } |
134 | 136 | ||
@@ -144,7 +146,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -144,7 +146,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
144 | this.intervals.push(dataSource[dataSource.length - 1]?.time); | 146 | this.intervals.push(dataSource[dataSource.length - 1]?.time); |
145 | this.interpolatedData[index] = this.interpolateArray(dataSource, this.intervals); | 147 | this.interpolatedData[index] = this.interpolateArray(dataSource, this.intervals); |
146 | }); | 148 | }); |
147 | - | ||
148 | } | 149 | } |
149 | 150 | ||
150 | calcTooltip = (point?: FormattedData, setTooltip = true) => { | 151 | calcTooltip = (point?: FormattedData, setTooltip = true) => { |