Showing
5 changed files
with
18 additions
and
16 deletions
@@ -14,7 +14,7 @@ | @@ -14,7 +14,7 @@ | ||
14 | /// limitations under the License. | 14 | /// limitations under the License. |
15 | /// | 15 | /// |
16 | 16 | ||
17 | -import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions } from 'leaflet'; | 17 | +import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, MarkerClusterGroup } from 'leaflet'; |
18 | 18 | ||
19 | import 'leaflet-providers'; | 19 | import 'leaflet-providers'; |
20 | import 'leaflet.markercluster/dist/leaflet.markercluster'; | 20 | import 'leaflet.markercluster/dist/leaflet.markercluster'; |
@@ -45,9 +45,9 @@ export default abstract class LeafletMap { | @@ -45,9 +45,9 @@ export default abstract class LeafletMap { | ||
45 | options: UnitedMapSettings; | 45 | options: UnitedMapSettings; |
46 | bounds: L.LatLngBounds; | 46 | bounds: L.LatLngBounds; |
47 | datasources: FormattedData[]; | 47 | datasources: FormattedData[]; |
48 | - markersCluster; | 48 | + markersCluster: MarkerClusterGroup; |
49 | points: FeatureGroup; | 49 | points: FeatureGroup; |
50 | - markersData = []; | 50 | + markersData: FormattedData[] = []; |
51 | 51 | ||
52 | protected constructor(public $container: HTMLElement, options: UnitedMapSettings) { | 52 | protected constructor(public $container: HTMLElement, options: UnitedMapSettings) { |
53 | this.options = options; | 53 | this.options = options; |
@@ -245,7 +245,7 @@ export default abstract class LeafletMap { | @@ -245,7 +245,7 @@ export default abstract class LeafletMap { | ||
245 | } | 245 | } |
246 | 246 | ||
247 | // Markers | 247 | // Markers |
248 | - updateMarkers(markersData, callback?) { | 248 | + updateMarkers(markersData: FormattedData[], callback?) { |
249 | markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => { | 249 | markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => { |
250 | if (data.rotationAngle || data.rotationAngle === 0) { | 250 | if (data.rotationAngle || data.rotationAngle === 0) { |
251 | const currentImage = this.options.useMarkerImageFunction ? | 251 | const currentImage = this.options.useMarkerImageFunction ? |
@@ -272,7 +272,7 @@ export default abstract class LeafletMap { | @@ -272,7 +272,7 @@ export default abstract class LeafletMap { | ||
272 | this.markersData = markersData; | 272 | this.markersData = markersData; |
273 | } | 273 | } |
274 | 274 | ||
275 | - dragMarker = (e, data?) => { | 275 | + dragMarker = (e, data = {}) => { |
276 | if (e.type !== 'dragend') return; | 276 | if (e.type !== 'dragend') return; |
277 | this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }); | 277 | this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }); |
278 | } | 278 | } |
@@ -34,7 +34,8 @@ import { | @@ -34,7 +34,8 @@ import { | ||
34 | DatasourceType, | 34 | DatasourceType, |
35 | JsonSettingsSchema, | 35 | JsonSettingsSchema, |
36 | WidgetActionDescriptor, | 36 | WidgetActionDescriptor, |
37 | - widgetType | 37 | + widgetType, |
38 | + DatasourceData | ||
38 | } from '@shared/models/widget.models'; | 39 | } from '@shared/models/widget.models'; |
39 | import { EntityId } from '@shared/models/id/entity-id'; | 40 | import { EntityId } from '@shared/models/id/entity-id'; |
40 | import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; | 41 | import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; |
@@ -83,7 +84,7 @@ export class MapWidgetController implements MapWidgetInterface { | @@ -83,7 +84,7 @@ export class MapWidgetController implements MapWidgetInterface { | ||
83 | map: LeafletMap; | 84 | map: LeafletMap; |
84 | provider: MapProviders; | 85 | provider: MapProviders; |
85 | schema: JsonSettingsSchema; | 86 | schema: JsonSettingsSchema; |
86 | - data; | 87 | + data: DatasourceData[]; |
87 | settings: UnitedMapSettings; | 88 | settings: UnitedMapSettings; |
88 | 89 | ||
89 | public static dataKeySettingsSchema(): object { | 90 | public static dataKeySettingsSchema(): object { |
@@ -22,8 +22,8 @@ import { isDefined } from '@core/utils'; | @@ -22,8 +22,8 @@ import { isDefined } from '@core/utils'; | ||
22 | 22 | ||
23 | export class Marker { | 23 | export class Marker { |
24 | leafletMarker: L.Marker; | 24 | leafletMarker: L.Marker; |
25 | - tooltipOffset: [number, number]; | ||
26 | - markerOffset: [number, number]; | 25 | + tooltipOffset: L.LatLngTuple; |
26 | + markerOffset: L.LatLngTuple; | ||
27 | tooltip: L.Popup; | 27 | tooltip: L.Popup; |
28 | location: L.LatLngExpression; | 28 | location: L.LatLngExpression; |
29 | data: FormattedData; | 29 | data: FormattedData; |
@@ -409,7 +409,10 @@ export const commonMapSettingsSchema = | @@ -409,7 +409,10 @@ export const commonMapSettingsSchema = | ||
409 | condition: 'model.provider !== "image-map"' | 409 | condition: 'model.provider !== "image-map"' |
410 | }, | 410 | }, |
411 | 'draggableMarker', | 411 | 'draggableMarker', |
412 | - 'disableScrollZooming', | 412 | + { |
413 | + key: 'disableScrollZooming', | ||
414 | + condition: 'model.provider !== "image-map"' | ||
415 | + }, | ||
413 | { | 416 | { |
414 | key: 'latKeyName', | 417 | key: 'latKeyName', |
415 | condition: 'model.provider !== "image-map"' | 418 | condition: 'model.provider !== "image-map"' |
@@ -159,10 +159,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -159,10 +159,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
159 | calculateIntervals() { | 159 | calculateIntervals() { |
160 | this.historicalData.forEach((dataSource, index) => { | 160 | this.historicalData.forEach((dataSource, index) => { |
161 | this.minTime = dataSource[0]?.time || Infinity; | 161 | this.minTime = dataSource[0]?.time || Infinity; |
162 | - const minTimeFormat = this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : ''; | ||
163 | this.maxTime = dataSource[dataSource.length - 1]?.time || -Infinity; | 162 | this.maxTime = dataSource[dataSource.length - 1]?.time || -Infinity; |
164 | - const maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : ''; | ||
165 | - this.interpolatedTimeData[index] = this.interpolateArray(dataSource, minTimeFormat, maxTimeFormat); | 163 | + this.interpolatedTimeData[index] = this.interpolateArray(dataSource); |
166 | }); | 164 | }); |
167 | if(!this.activeTrip){ | 165 | if(!this.activeTrip){ |
168 | this.activeTrip = this.interpolatedTimeData.map(dataSource => dataSource[this.minTime]).filter(ds => ds)[0]; | 166 | this.activeTrip = this.interpolatedTimeData.map(dataSource => dataSource[this.minTime]).filter(ds => ds)[0]; |
@@ -194,7 +192,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -194,7 +192,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
194 | this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); | 192 | this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); |
195 | } | 193 | } |
196 | 194 | ||
197 | - interpolateArray(originData: FormattedData[], minTimeFormat?: string, maxTimeFormat?: string) { | 195 | + interpolateArray(originData: FormattedData[]) { |
198 | const result = {}; | 196 | const result = {}; |
199 | const latKeyName = this.settings.latKeyName; | 197 | const latKeyName = this.settings.latKeyName; |
200 | const lngKeyName = this.settings.lngKeyName; | 198 | const lngKeyName = this.settings.lngKeyName; |
@@ -203,8 +201,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | @@ -203,8 +201,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { | ||
203 | const normalizeTime = this.minTime + Math.ceil((currentTime - this.minTime) / this.normalizationStep) * this.normalizationStep; | 201 | const normalizeTime = this.minTime + Math.ceil((currentTime - this.minTime) / this.normalizationStep) * this.normalizationStep; |
204 | result[normalizeTime] = { | 202 | result[normalizeTime] = { |
205 | ...data, | 203 | ...data, |
206 | - minTime: minTimeFormat, | ||
207 | - maxTime: maxTimeFormat, | 204 | + minTime: this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : '', |
205 | + maxTime: this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : '', | ||
208 | rotationAngle: this.settings.rotationAngle | 206 | rotationAngle: this.settings.rotationAngle |
209 | }; | 207 | }; |
210 | } | 208 | } |