Showing
5 changed files
with
71 additions
and
66 deletions
... | ... | @@ -27,11 +27,12 @@ import { |
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 | 29 | export type GetTooltip = (point: FormattedData, setTooltip?: boolean) => string; |
30 | +export type PosFuncton = (origXPos, origYPos) => { x, y }; | |
30 | 31 | |
31 | 32 | export type MapSettings = { |
32 | 33 | draggableMarker: boolean; |
33 | 34 | initCallback?: () => any; |
34 | - posFunction: (origXPos, origYPos) => { x, y }; | |
35 | + posFunction: PosFuncton; | |
35 | 36 | defaultZoomLevel?: number; |
36 | 37 | disableScrollZooming?: boolean; |
37 | 38 | minZoomLevel?: number; |
... | ... | @@ -176,8 +177,8 @@ export type TripAnimationSettings = { |
176 | 177 | rotationAngle: number; |
177 | 178 | label: string; |
178 | 179 | tooltipPattern: string; |
179 | - useTooltipFunction :boolean; | |
180 | - useLabelFunction:boolean; | |
180 | + useTooltipFunction: boolean; | |
181 | + useLabelFunction: boolean; | |
181 | 182 | pointAsAnchorFunction: GenericFunction; |
182 | 183 | tooltipFunction: GenericFunction; |
183 | 184 | labelFunction: GenericFunction; | ... | ... |
... | ... | @@ -58,14 +58,14 @@ export function getRatio(firsMoment: number, secondMoment: number, intermediateM |
58 | 58 | |
59 | 59 | export function interpolateOnLineSegment( |
60 | 60 | pointA: FormattedData, |
61 | - oointB: FormattedData, | |
61 | + pointB: FormattedData, | |
62 | 62 | latKeyName: string, |
63 | 63 | lngKeyName: string, |
64 | 64 | ratio: number |
65 | 65 | ): { [key: string]: number } { |
66 | 66 | return { |
67 | - [latKeyName]: (pointA[latKeyName] + (oointB[latKeyName] - pointA[latKeyName]) * ratio), | |
68 | - [lngKeyName]: (pointA[lngKeyName] + (oointB[lngKeyName] - pointA[lngKeyName]) * ratio) | |
67 | + [latKeyName]: (pointA[latKeyName] + (pointB[latKeyName] - pointA[latKeyName]) * ratio), | |
68 | + [lngKeyName]: (pointA[lngKeyName] + (pointB[lngKeyName] - pointA[lngKeyName]) * ratio) | |
69 | 69 | }; |
70 | 70 | } |
71 | 71 | ... | ... |
... | ... | @@ -16,7 +16,7 @@ |
16 | 16 | |
17 | 17 | import L, { LatLngLiteral, LatLngBounds, LatLngTuple } from 'leaflet'; |
18 | 18 | import LeafletMap from '../leaflet-map'; |
19 | -import { UnitedMapSettings } from '../map-models'; | |
19 | +import { UnitedMapSettings, PosFuncton } from '../map-models'; | |
20 | 20 | import { Observable } from 'rxjs'; |
21 | 21 | import { map, filter, switchMap } from 'rxjs/operators'; |
22 | 22 | import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/maps-utils'; |
... | ... | @@ -25,16 +25,16 @@ const maxZoom = 4;// ? |
25 | 25 | |
26 | 26 | export class ImageMap extends LeafletMap { |
27 | 27 | |
28 | - imageOverlay; | |
28 | + imageOverlay: L.ImageOverlay; | |
29 | 29 | aspect = 0; |
30 | 30 | width = 0; |
31 | 31 | height = 0; |
32 | - imageUrl; | |
33 | - posFunction; | |
32 | + imageUrl: string; | |
33 | + posFunction: PosFuncton; | |
34 | 34 | |
35 | 35 | constructor($container: HTMLElement, options: UnitedMapSettings) { |
36 | 36 | super($container, options); |
37 | - this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((origXPos, origYPos) => { x, y }); | |
37 | + this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as PosFuncton; | |
38 | 38 | this.imageUrl = options.mapUrl; |
39 | 39 | aspectCache(this.imageUrl).subscribe(aspect => { |
40 | 40 | this.aspect = aspect; |
... | ... | @@ -50,11 +50,12 @@ export class ImageMap extends LeafletMap { |
50 | 50 | return aspectCache(res); |
51 | 51 | })).subscribe(aspect => { |
52 | 52 | this.aspect = aspect; |
53 | + console.log("ImageMap -> setImageAlias -> aspect", aspect) | |
53 | 54 | this.onResize(true); |
54 | 55 | }); |
55 | 56 | } |
56 | 57 | |
57 | - updateBounds(updateImage?, lastCenterPos?) { | |
58 | + updateBounds(updateImage?: boolean, lastCenterPos?) { | |
58 | 59 | const w = this.width; |
59 | 60 | const h = this.height; |
60 | 61 | let southWest = this.pointToLatLng(0, h); |
... | ... | @@ -81,12 +82,12 @@ export class ImageMap extends LeafletMap { |
81 | 82 | lastCenterPos.y *= h; |
82 | 83 | const center = this.pointToLatLng(lastCenterPos.x, lastCenterPos.y); |
83 | 84 | setTimeout(() => { |
84 | - this.map.panTo(center, { animate: false }); | |
85 | + this.map.panTo(center, { animate: false }); | |
85 | 86 | }, 0); |
86 | 87 | } |
87 | 88 | } |
88 | 89 | |
89 | - onResize(updateImage?) { | |
90 | + onResize(updateImage?: boolean) { | |
90 | 91 | let width = this.$container.clientWidth; |
91 | 92 | if (width > 0 && this.aspect) { |
92 | 93 | let height = width / this.aspect; |
... | ... | @@ -117,7 +118,7 @@ export class ImageMap extends LeafletMap { |
117 | 118 | |
118 | 119 | fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { } |
119 | 120 | |
120 | - initMap(updateImage?) { | |
121 | + initMap(updateImage?: boolean) { | |
121 | 122 | if (!this.map && this.aspect > 0) { |
122 | 123 | const center = this.pointToLatLng(this.width / 2, this.height / 2); |
123 | 124 | this.map = L.map(this.$container, { |
... | ... | @@ -137,8 +138,8 @@ export class ImageMap extends LeafletMap { |
137 | 138 | if (isNaN(expression[this.options.xPosKeyName]) || isNaN(expression[this.options.yPosKeyName])) return null; |
138 | 139 | Object.assign(expression, this.posFunction(expression[this.options.xPosKeyName], expression[this.options.yPosKeyName])); |
139 | 140 | return this.pointToLatLng( |
140 | - expression.x * this.width, | |
141 | - expression.y * this.height); | |
141 | + expression.x * this.width, | |
142 | + expression.y * this.height); | |
142 | 143 | } |
143 | 144 | |
144 | 145 | pointToLatLng(x, y): L.LatLng { | ... | ... |
... | ... | @@ -644,7 +644,10 @@ export const markerClusteringSettingsSchema = |
644 | 644 | required: [] |
645 | 645 | }, |
646 | 646 | form: [ |
647 | - 'useClusterMarkers', | |
647 | + { | |
648 | + key: 'useClusterMarkers', | |
649 | + condition: 'model.provider !== "image-map"' | |
650 | + }, | |
648 | 651 | ] |
649 | 652 | }; |
650 | 653 | |
... | ... | @@ -844,57 +847,57 @@ export const pathSchema = |
844 | 847 | }; |
845 | 848 | |
846 | 849 | export const pointSchema = |
847 | - { | |
850 | +{ | |
848 | 851 | schema: { |
849 | - title: 'Trip Animation Path Configuration', | |
850 | - type: 'object', | |
851 | - properties: { | |
852 | - showPoints: { | |
853 | - title: 'Show points', | |
854 | - type: 'boolean', | |
855 | - default: false | |
856 | - }, | |
857 | - pointColor: { | |
858 | - title: 'Point color', | |
859 | - type: 'string' | |
860 | - }, | |
861 | - pointSize: { | |
862 | - title: 'Point size (px)', | |
863 | - type: 'number', | |
864 | - default: 10 | |
865 | - }, | |
866 | - usePointAsAnchor: { | |
867 | - title: 'Use point as anchor', | |
868 | - type: 'boolean', | |
869 | - default: false | |
870 | - }, | |
871 | - pointAsAnchorFunction: { | |
872 | - title: 'Point as anchor function: f(data, dsData, dsIndex)', | |
873 | - type: 'string' | |
874 | - }, | |
875 | - pointTooltipOnRightPanel: { | |
876 | - title: 'Independant point tooltip', | |
877 | - type: 'boolean', | |
878 | - default: true | |
852 | + title: 'Trip Animation Path Configuration', | |
853 | + type: 'object', | |
854 | + properties: { | |
855 | + showPoints: { | |
856 | + title: 'Show points', | |
857 | + type: 'boolean', | |
858 | + default: false | |
859 | + }, | |
860 | + pointColor: { | |
861 | + title: 'Point color', | |
862 | + type: 'string' | |
863 | + }, | |
864 | + pointSize: { | |
865 | + title: 'Point size (px)', | |
866 | + type: 'number', | |
867 | + default: 10 | |
868 | + }, | |
869 | + usePointAsAnchor: { | |
870 | + title: 'Use point as anchor', | |
871 | + type: 'boolean', | |
872 | + default: false | |
873 | + }, | |
874 | + pointAsAnchorFunction: { | |
875 | + title: 'Point as anchor function: f(data, dsData, dsIndex)', | |
876 | + type: 'string' | |
877 | + }, | |
878 | + pointTooltipOnRightPanel: { | |
879 | + title: 'Independant point tooltip', | |
880 | + type: 'boolean', | |
881 | + default: true | |
882 | + }, | |
879 | 883 | }, |
880 | - }, | |
881 | - required: [] | |
884 | + required: [] | |
882 | 885 | }, |
883 | 886 | form: [ |
884 | - 'showPoints', | |
885 | - { | |
886 | - key: 'pointColor', | |
887 | - type: 'color' | |
888 | - }, | |
889 | - 'pointSize', | |
890 | - 'usePointAsAnchor', | |
891 | - { | |
892 | - key: 'pointAsAnchorFunction', | |
893 | - type: 'javascript' | |
894 | - }, | |
895 | - 'pointTooltipOnRightPanel', | |
887 | + 'showPoints', | |
888 | + { | |
889 | + key: 'pointColor', | |
890 | + type: 'color' | |
891 | + }, | |
892 | + 'pointSize', | |
893 | + 'usePointAsAnchor', | |
894 | + { | |
895 | + key: 'pointAsAnchorFunction', | |
896 | + type: 'javascript' | |
897 | + }, | |
898 | + 'pointTooltipOnRightPanel', | |
896 | 899 | ] |
897 | - }; | |
900 | +}; | |
898 | 901 | |
899 | 902 | export const mapProviderSchema = |
900 | 903 | { | ... | ... |
... | ... | @@ -61,7 +61,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { |
61 | 61 | mainTooltip = ''; |
62 | 62 | visibleTooltip = false; |
63 | 63 | activeTrip: FormattedData; |
64 | - label; | |
64 | + label: string; | |
65 | 65 | minTime: number; |
66 | 66 | maxTime: number; |
67 | 67 | anchors: number[] = []; |
... | ... | @@ -173,7 +173,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { |
173 | 173 | } |
174 | 174 | } |
175 | 175 | |
176 | - calcTooltip = (point?: FormattedData) => { | |
176 | + calcTooltip = (point?: FormattedData): string => { | |
177 | 177 | const data = point ? point : this.activeTrip; |
178 | 178 | const tooltipPattern: string = this.settings.useTooltipFunction ? |
179 | 179 | safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; | ... | ... |