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 244 }
245 245
246 246 // Markers
247   - updateMarkers(markersData) {
  247 + updateMarkers(markersData, callback?) {
248 248 markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => {
249 249 if (data.rotationAngle || data.rotationAngle === 0) {
250 250 const currentImage = this.options.useMarkerImageFunction ?
... ... @@ -265,7 +265,7 @@ export default abstract class LeafletMap {
265 265 this.updateMarker(data.entityName, data, markersData, this.options)
266 266 }
267 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 271 this.markersData = markersData;
... ... @@ -276,9 +276,11 @@ export default abstract class LeafletMap {
276 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 280 this.ready$.subscribe(() => {
281 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 284 if (this.bounds)
283 285 this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
284 286 this.markers.set(key, newMarker);
... ... @@ -380,7 +382,7 @@ export default abstract class LeafletMap {
380 382
381 383 updatePolygons(polyData: FormattedData[]) {
382 384 polyData.forEach((data: FormattedData) => {
383   - if (data.hasOwnProperty(this.options.polygonKeyName)) {
  385 + if (data && data.hasOwnProperty(this.options.polygonKeyName)) {
384 386 if (typeof (data[this.options.polygonKeyName]) === 'string') {
385 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 407
406 408 updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
407 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 26
27 27 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
28 28 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
  29 +export type GetTooltip= (point: FormattedData, setTooltip?: boolean) => string;
29 30
30 31 export type MapSettings = {
31 32 draggableMarker: boolean;
... ...
... ... @@ -57,7 +57,6 @@ export class MapWidgetController implements MapWidgetInterface {
57 57 this.settings.markerClick = this.getDescriptors('markerClick');
58 58 this.settings.polygonClick = this.getDescriptors('polygonClick');
59 59
60   - // this.settings.
61 60 const MapClass = providerSets[this.provider]?.MapClass;
62 61 if (!MapClass) {
63 62 return;
... ...
... ... @@ -61,7 +61,7 @@ export class Polygon {
61 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 65 this.data = data;
66 66 this.dataSources = dataSources;
67 67 this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]);
... ...
... ... @@ -47,7 +47,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
47 47
48 48 mapWidget: MapWidgetController;
49 49 historicalData;
50   - intervals;
  50 + intervals=[];
51 51 normalizationStep = 1000;
52 52 interpolatedData = [];
53 53 widgetConfig: WidgetConfig;
... ... @@ -91,10 +91,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
91 91 this.normalizationStep = this.settings.normalizationStep;
92 92 const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
93 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 96 this.activeTrip = this.historicalData[0][0];
96 97 this.calculateIntervals();
97 98 this.timeUpdated(this.intervals[0]);
  99 + }
98 100 this.mapWidget.map.map?.invalidateSize();
99 101 this.cd.detectChanges();
100 102 }
... ... @@ -128,7 +130,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
128 130 this.settings.usePointAsAnchor ||
129 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 146 this.intervals.push(dataSource[dataSource.length - 1]?.time);
145 147 this.interpolatedData[index] = this.interpolateArray(dataSource, this.intervals);
146 148 });
147   -
148 149 }
149 150
150 151 calcTooltip = (point?: FormattedData, setTooltip = true) => {
... ...