From ac03bf27a38a92fd59087189717d8240514c6f99 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 6 Mar 2025 19:08:39 +0200 Subject: [PATCH] UI: Map - add show marker option for trips. --- .../lib/maps/data-layer/trips-data-layer.ts | 84 ++++++----- .../home/components/widget/lib/maps/map.ts | 38 ++--- .../map/map-data-layer-dialog.component.html | 119 +++++++++------- .../map/map-data-layer-dialog.component.ts | 131 +++++++++++------- .../shared/models/widget/maps/map.models.ts | 2 + 5 files changed, 217 insertions(+), 157 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts index 368ca42be8..1bc1e8a395 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts @@ -149,37 +149,41 @@ class TbTripDataItem extends TbDataLayerItem true); - updateTooltip(this.dataLayer.getMap(), this.markerTooltip, - this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData); - } - const clickAction = this.settings.click; - if (clickAction && clickAction.type !== WidgetActionType.doNothing) { - this.marker.on('click', (event) => { - this.dataLayer.getMap().dataItemClick(event.originalEvent, clickAction, this.pointData); + if (this.settings.showMarker) { + const dsData = this.dataLayer.getMap().getData(); + const location = this.dataLayer.dataProcessor.extractLocation(this.pointData, dsData); + this.marker = L.marker(location, { + tbMarkerData: this.pointData, + snapIgnore: true }); + this.marker.addTo(this.layer); + this.updateMarkerIcon(this.pointData, dsData); + if (this.settings.tooltip?.show) { + this.markerTooltip = createTooltip(this.dataLayer.getMap(), + this.marker, this.settings.tooltip, this.pointData, () => true); + updateTooltip(this.dataLayer.getMap(), this.markerTooltip, + this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData); + } + const clickAction = this.settings.click; + if (clickAction && clickAction.type !== WidgetActionType.doNothing) { + this.marker.on('click', (event) => { + this.dataLayer.getMap().dataItemClick(event.originalEvent, clickAction, this.pointData); + }); + } } } private updateMarker() { - const dsData = this.dataLayer.getMap().getData(); - this.marker.options.tbMarkerData = this.pointData; - this.updateMarkerLocation(this.pointData, dsData); - if (this.settings.tooltip.show) { - updateTooltip(this.dataLayer.getMap(), this.markerTooltip, - this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData); + if (this.settings.showMarker) { + const dsData = this.dataLayer.getMap().getData(); + this.marker.options.tbMarkerData = this.pointData; + this.updateMarkerLocation(this.pointData, dsData); + if (this.settings.tooltip.show) { + updateTooltip(this.dataLayer.getMap(), this.markerTooltip, + this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData); + } + this.updateMarkerIcon(this.pointData, dsData); } - this.updateMarkerIcon(this.pointData, dsData); } private createPath() { @@ -262,19 +266,21 @@ class TbTripDataItem extends TbDataLayerItem, dsData: FormattedData[]) { - this.dataLayer.dataProcessor.createMarkerIcon(data, dsData, data.rotationAngle).subscribe( - (iconInfo) => { - const options = deepClone(iconInfo.icon.options); - this.marker.setIcon(iconInfo.icon); - const anchor = options.iconAnchor; - if (anchor && Array.isArray(anchor)) { - this.labelOffset = [iconInfo.size[0] / 2 - anchor[0], 10 - anchor[1]]; - } else { - this.labelOffset = [0, -iconInfo.size[1] * this.dataLayer.markerOffset[1] + 10]; + if (this.settings.showMarker) { + this.dataLayer.dataProcessor.createMarkerIcon(data, dsData, data.rotationAngle).subscribe( + (iconInfo) => { + const options = deepClone(iconInfo.icon.options); + this.marker.setIcon(iconInfo.icon); + const anchor = options.iconAnchor; + if (anchor && Array.isArray(anchor)) { + this.labelOffset = [iconInfo.size[0] / 2 - anchor[0], 10 - anchor[1]]; + } else { + this.labelOffset = [0, -iconInfo.size[1] * this.dataLayer.markerOffset[1] + 10]; + } + this.updateMarkerLabel(data, dsData); } - this.updateMarkerLabel(data, dsData); - } - ); + ); + } } private updateMarkerLabel(data: FormattedData, dsData: FormattedData[]) { @@ -384,6 +390,10 @@ export class TbTripsDataLayer extends TbMapDataLayer[][], tripsLatestData: FormattedData[]): {minTime: number; maxTime: number} { let minTime = Infinity; let maxTime = -Infinity; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts index 64b02d83bd..7fc4cf5e54 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts @@ -148,23 +148,6 @@ export abstract class TbMap { this.mapLayoutElement = mapLayoutElement[0]; $(containerElement).append(mapLayoutElement); - if (this.settings.tripTimeline?.showTimelineControl) { - this.timeline = true; - this.timeStep = this.settings.tripTimeline.timeStep; - this.timeLineComponentRef = this.ctx.widgetContentContainer.createComponent(MapTimelinePanelComponent); - this.timeLineComponent = this.timeLineComponentRef.instance; - this.timeLineComponent.settings = this.settings.tripTimeline; - this.timeLineComponent.timeChanged.subscribe((time) => { - this.currentTime = time; - this.updateTripsTime(); - }); - const parentElement = this.timeLineComponentRef.instance.element.nativeElement; - const content = parentElement.firstChild; - parentElement.removeChild(content); - parentElement.style.display = 'none'; - containerElement.append(content); - } - const mapElement = $('
'); mapLayoutElement.append(mapElement); @@ -380,6 +363,27 @@ export abstract class TbMap { } private setupEditMode() { + + const tripsWithMarkers = this.tripDataLayers.filter(dl => dl.showMarker()); + const showTimeline = this.settings.tripTimeline?.showTimelineControl && tripsWithMarkers.length; + + if (showTimeline) { + this.timeline = true; + this.timeStep = this.settings.tripTimeline.timeStep; + this.timeLineComponentRef = this.ctx.widgetContentContainer.createComponent(MapTimelinePanelComponent); + this.timeLineComponent = this.timeLineComponentRef.instance; + this.timeLineComponent.settings = this.settings.tripTimeline; + this.timeLineComponent.timeChanged.subscribe((time) => { + this.currentTime = time; + this.updateTripsTime(); + }); + const parentElement = this.timeLineComponentRef.instance.element.nativeElement; + const content = parentElement.firstChild; + parentElement.removeChild(content); + parentElement.style.display = 'none'; + this.containerElement.append(content); + } + this.editToolbar = L.TB.bottomToolbar({ mapElement: $(this.mapElement), closeTitle: this.ctx.translate.instant('action.cancel'), diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html index 7cf5ba9a7f..8e634e178b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html @@ -176,58 +176,73 @@
{{ 'widget-config.appearance' | translate }}
-
-
-
{{ 'widgets.maps.data-layer.marker.marker' | translate }}
- - {{ 'widgets.maps.data-layer.marker.marker-type-shape' | translate }} - {{ 'widgets.maps.data-layer.marker.marker-type-icon' | translate }} - {{ 'widgets.maps.data-layer.marker.marker-type-image' | translate }} - -
-
-
widgets.maps.data-layer.marker.shape
- -
-
-
widgets.maps.data-layer.marker.icon
- -
-
-
widgets.maps.data-layer.marker.image
- -
-
-
widgets.maps.data-layer.marker.marker-offset
-
-
widgets.maps.data-layer.marker.offset-horizontal
- - - -
widgets.maps.data-layer.marker.offset-vertical
- - - -
-
-
- - {{ 'widgets.maps.data-layer.marker.rotate-marker' | translate }} - -
-
widgets.maps.data-layer.marker.offset-angle
- - -
deg
- -
-
- @if (dataLayerType === 'trips') { - - - } +
+ + + +
+ @if (dataLayerType === 'markers') { +
{{ 'widgets.maps.data-layer.marker.marker' | translate }}
+ } @else { + +
{{ 'widgets.maps.data-layer.marker.marker' | translate }}
+ + } + + {{ 'widgets.maps.data-layer.marker.marker-type-shape' | translate }} + {{ 'widgets.maps.data-layer.marker.marker-type-icon' | translate }} + {{ 'widgets.maps.data-layer.marker.marker-type-image' | translate }} + +
+ + + +
+
widgets.maps.data-layer.marker.shape
+ +
+
+
widgets.maps.data-layer.marker.icon
+ +
+
+
widgets.maps.data-layer.marker.image
+ +
+
+
widgets.maps.data-layer.marker.marker-offset
+
+
widgets.maps.data-layer.marker.offset-horizontal
+ + + +
widgets.maps.data-layer.marker.offset-vertical
+ + + +
+
+
+ + {{ 'widgets.maps.data-layer.marker.rotate-marker' | translate }} + +
+
widgets.maps.data-layer.marker.offset-angle
+ + +
deg
+ +
+
+ @if (dataLayerType === 'trips') { + + + } + +
widgets.maps.data-layer.marker.position-conversion
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts index 6771bdb226..b52e7b9013 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts @@ -168,6 +168,7 @@ export class MapDataLayerDialogComponent extends DialogComponent => mergeDeep( defaultBaseMarkersDataLayerSettings(mapType), { + showMarker: true, tooltip: { offsetY: -0.5, pattern: mapType === MapType.geoMap ?