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 8567110a76..32e6049a4b 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 @@ -27,11 +27,12 @@ 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 PosFuncton = (origXPos, origYPos) => { x, y }; export type MapSettings = { draggableMarker: boolean; initCallback?: () => any; - posFunction: (origXPos, origYPos) => { x, y }; + posFunction: PosFuncton; defaultZoomLevel?: number; disableScrollZooming?: boolean; minZoomLevel?: number; @@ -177,8 +178,8 @@ export type TripAnimationSettings = { rotationAngle: number; label: string; tooltipPattern: string; - useTooltipFunction :boolean; - useLabelFunction:boolean; + useTooltipFunction: boolean; + useLabelFunction: boolean; pointAsAnchorFunction: GenericFunction; tooltipFunction: GenericFunction; labelFunction: GenericFunction; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index 48e840dfd7..1baf0a4b8c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -58,14 +58,14 @@ export function getRatio(firsMoment: number, secondMoment: number, intermediateM export function interpolateOnLineSegment( pointA: FormattedData, - oointB: FormattedData, + pointB: FormattedData, latKeyName: string, lngKeyName: string, ratio: number ): { [key: string]: number } { return { - [latKeyName]: (pointA[latKeyName] + (oointB[latKeyName] - pointA[latKeyName]) * ratio), - [lngKeyName]: (pointA[lngKeyName] + (oointB[lngKeyName] - pointA[lngKeyName]) * ratio) + [latKeyName]: (pointA[latKeyName] + (pointB[latKeyName] - pointA[latKeyName]) * ratio), + [lngKeyName]: (pointA[lngKeyName] + (pointB[lngKeyName] - pointA[lngKeyName]) * ratio) }; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index ac46c2772b..07f94fbb3f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -16,7 +16,7 @@ import L, { LatLngLiteral, LatLngBounds, LatLngTuple } from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { UnitedMapSettings } from '../map-models'; +import { UnitedMapSettings, PosFuncton } from '../map-models'; import { Observable } from 'rxjs'; import { map, filter, switchMap } from 'rxjs/operators'; import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/maps-utils'; @@ -25,16 +25,16 @@ const maxZoom = 4;// ? export class ImageMap extends LeafletMap { - imageOverlay; + imageOverlay: L.ImageOverlay; aspect = 0; width = 0; height = 0; - imageUrl; - posFunction; + imageUrl: string; + posFunction: PosFuncton; constructor($container: HTMLElement, options: UnitedMapSettings) { super($container, options); - this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((origXPos, origYPos) => { x, y }); + this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as PosFuncton; this.imageUrl = options.mapUrl; aspectCache(this.imageUrl).subscribe(aspect => { this.aspect = aspect; @@ -50,11 +50,12 @@ export class ImageMap extends LeafletMap { return aspectCache(res); })).subscribe(aspect => { this.aspect = aspect; + console.log("ImageMap -> setImageAlias -> aspect", aspect) this.onResize(true); }); } - updateBounds(updateImage?, lastCenterPos?) { + updateBounds(updateImage?: boolean, lastCenterPos?) { const w = this.width; const h = this.height; let southWest = this.pointToLatLng(0, h); @@ -81,12 +82,12 @@ export class ImageMap extends LeafletMap { lastCenterPos.y *= h; const center = this.pointToLatLng(lastCenterPos.x, lastCenterPos.y); setTimeout(() => { - this.map.panTo(center, { animate: false }); + this.map.panTo(center, { animate: false }); }, 0); } } - onResize(updateImage?) { + onResize(updateImage?: boolean) { let width = this.$container.clientWidth; if (width > 0 && this.aspect) { let height = width / this.aspect; @@ -117,7 +118,7 @@ export class ImageMap extends LeafletMap { fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { } - initMap(updateImage?) { + initMap(updateImage?: boolean) { if (!this.map && this.aspect > 0) { const center = this.pointToLatLng(this.width / 2, this.height / 2); this.map = L.map(this.$container, { @@ -137,8 +138,8 @@ export class ImageMap extends LeafletMap { if (isNaN(expression[this.options.xPosKeyName]) || isNaN(expression[this.options.yPosKeyName])) return null; Object.assign(expression, this.posFunction(expression[this.options.xPosKeyName], expression[this.options.yPosKeyName])); return this.pointToLatLng( - expression.x * this.width, - expression.y * this.height); + expression.x * this.width, + expression.y * this.height); } pointToLatLng(x, y): L.LatLng { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 0619f01ca7..b8d953394a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -644,7 +644,10 @@ export const markerClusteringSettingsSchema = required: [] }, form: [ - 'useClusterMarkers', + { + key: 'useClusterMarkers', + condition: 'model.provider !== "image-map"' + }, ] }; @@ -844,57 +847,57 @@ export const pathSchema = }; export const pointSchema = - { +{ schema: { - title: 'Trip Animation Path Configuration', - type: 'object', - properties: { - showPoints: { - title: 'Show points', - type: 'boolean', - default: false + title: 'Trip Animation Path Configuration', + type: 'object', + properties: { + showPoints: { + title: 'Show points', + type: 'boolean', + default: false + }, + pointColor: { + title: 'Point color', + type: 'string' + }, + pointSize: { + title: 'Point size (px)', + type: 'number', + default: 10 + }, + usePointAsAnchor: { + title: 'Use point as anchor', + type: 'boolean', + default: false + }, + pointAsAnchorFunction: { + title: 'Point as anchor function: f(data, dsData, dsIndex)', + type: 'string' + }, + pointTooltipOnRightPanel: { + title: 'Independant point tooltip', + type: 'boolean', + default: true + }, }, - pointColor: { - title: 'Point color', - type: 'string' - }, - pointSize: { - title: 'Point size (px)', - type: 'number', - default: 10 - }, - usePointAsAnchor: { - title: 'Use point as anchor', - type: 'boolean', - default: false - }, - pointAsAnchorFunction: { - title: 'Point as anchor function: f(data, dsData, dsIndex)', - type: 'string' - }, - pointTooltipOnRightPanel: { - title: 'Independant point tooltip', - type: 'boolean', - default: true - }, - }, - required: [] + required: [] }, form: [ - 'showPoints', - { - key: 'pointColor', - type: 'color' - }, - 'pointSize', - 'usePointAsAnchor', - { - key: 'pointAsAnchorFunction', - type: 'javascript' - }, - 'pointTooltipOnRightPanel', + 'showPoints', + { + key: 'pointColor', + type: 'color' + }, + 'pointSize', + 'usePointAsAnchor', + { + key: 'pointAsAnchorFunction', + type: 'javascript' + }, + 'pointTooltipOnRightPanel', ] - }; +}; export const mapProviderSchema = { 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 5b549528ff..d1bccc9534 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 @@ -61,7 +61,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { mainTooltip = ''; visibleTooltip = false; activeTrip: FormattedData; - label; + label: string; minTime: number; maxTime: number; anchors: number[] = []; @@ -173,7 +173,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } } - calcTooltip = (point?: FormattedData) => { + calcTooltip = (point?: FormattedData): string => { const data = point ? point : this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern;