diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 9e7934529d..b11dbda737 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -14,7 +14,7 @@
/// limitations under the License.
///
-import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';
+import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, MarkerClusterGroup } from 'leaflet';
import 'leaflet-providers';
import 'leaflet.markercluster/dist/leaflet.markercluster';
@@ -45,9 +45,9 @@ export default abstract class LeafletMap {
options: UnitedMapSettings;
bounds: L.LatLngBounds;
datasources: FormattedData[];
- markersCluster;
+ markersCluster: MarkerClusterGroup;
points: FeatureGroup;
- markersData = [];
+ markersData: FormattedData[] = [];
protected constructor(public $container: HTMLElement, options: UnitedMapSettings) {
this.options = options;
@@ -222,6 +222,7 @@ export default abstract class LeafletMap {
this.bounds = this.bounds.extend(this.options.defaultCenterPosition);
}
this.map.fitBounds(this.bounds, { padding: padding || [50, 50], animate: false });
+ this.map.invalidateSize();
}
}
}
@@ -244,7 +245,7 @@ export default abstract class LeafletMap {
}
// Markers
- updateMarkers(markersData, callback?) {
+ updateMarkers(markersData: FormattedData[], callback?) {
markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => {
if (data.rotationAngle || data.rotationAngle === 0) {
const currentImage = this.options.useMarkerImageFunction ?
@@ -271,7 +272,7 @@ export default abstract class LeafletMap {
this.markersData = markersData;
}
- dragMarker = (e, data?) => {
+ dragMarker = (e, data = {}) => {
if (e.type !== 'dragend') return;
this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) });
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index f27a094979..181bf9b186 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -34,7 +34,8 @@ import {
DatasourceType,
JsonSettingsSchema,
WidgetActionDescriptor,
- widgetType
+ widgetType,
+ DatasourceData
} from '@shared/models/widget.models';
import { EntityId } from '@shared/models/id/entity-id';
import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
@@ -83,7 +84,7 @@ export class MapWidgetController implements MapWidgetInterface {
map: LeafletMap;
provider: MapProviders;
schema: JsonSettingsSchema;
- data;
+ data: DatasourceData[];
settings: UnitedMapSettings;
public static dataKeySettingsSchema(): object {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index 7c8f50e13f..c4e932878c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
@@ -22,8 +22,8 @@ import { isDefined } from '@core/utils';
export class Marker {
leafletMarker: L.Marker;
- tooltipOffset: [number, number];
- markerOffset: [number, number];
+ tooltipOffset: L.LatLngTuple;
+ markerOffset: L.LatLngTuple;
tooltip: L.Popup;
location: L.LatLngExpression;
data: FormattedData;
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 a8f565a4cb..0619f01ca7 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
@@ -409,7 +409,10 @@ export const commonMapSettingsSchema =
condition: 'model.provider !== "image-map"'
},
'draggableMarker',
- 'disableScrollZooming',
+ {
+ key: 'disableScrollZooming',
+ condition: 'model.provider !== "image-map"'
+ },
{
key: 'latKeyName',
condition: 'model.provider !== "image-map"'
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 8690119e87..5b549528ff 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
@@ -159,10 +159,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
calculateIntervals() {
this.historicalData.forEach((dataSource, index) => {
this.minTime = dataSource[0]?.time || Infinity;
- const minTimeFormat = this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : '';
this.maxTime = dataSource[dataSource.length - 1]?.time || -Infinity;
- const maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : '';
- this.interpolatedTimeData[index] = this.interpolateArray(dataSource, minTimeFormat, maxTimeFormat);
+ this.interpolatedTimeData[index] = this.interpolateArray(dataSource);
});
if(!this.activeTrip){
this.activeTrip = this.interpolatedTimeData.map(dataSource => dataSource[this.minTime]).filter(ds => ds)[0];
@@ -194,7 +192,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
this.label = (parseWithTranslation.parseTemplate(labelText, data, true));
}
- interpolateArray(originData: FormattedData[], minTimeFormat?: string, maxTimeFormat?: string) {
+ interpolateArray(originData: FormattedData[]) {
const result = {};
const latKeyName = this.settings.latKeyName;
const lngKeyName = this.settings.lngKeyName;
@@ -203,8 +201,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
const normalizeTime = this.minTime + Math.ceil((currentTime - this.minTime) / this.normalizationStep) * this.normalizationStep;
result[normalizeTime] = {
...data,
- minTime: minTimeFormat,
- maxTime: maxTimeFormat,
+ minTime: this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : '',
+ maxTime: this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : '',
rotationAngle: this.settings.rotationAngle
};
}
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index 78c8957f44..2fb3bb1db5 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -37,19 +37,18 @@
-