Commit 54a1b0da768aa2db82f24428183a7f997254d440

Authored by Artem Halushko
1 parent 24e04fea

fix tooltip with mu;tiple markers

@@ -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) => {