diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index d0d81fca8a..90bdafb9a2 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -520,10 +520,6 @@ export function parseFunction(source: string, params: string[] = []): Function { } export function parseTemplate(template, data) { - function formatValue(value, pattern) { - - } - let res = ''; try { let variables = ''; 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 3177fbd1de..a8d10751f1 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 @@ -26,12 +26,14 @@ import { Marker } from './markers'; import { Observable, of, BehaviorSubject, Subject } from 'rxjs'; import { filter } from 'rxjs/operators'; import { Polyline } from './polyline'; +import { Polygon } from './polygon'; export default abstract class LeafletMap { markers: Map = new Map(); tooltips = []; poly: Polyline; + polygon: Polygon; map: L.Map; map$: BehaviorSubject = new BehaviorSubject(null); ready$: Observable = this.map$.pipe(filter(map => !!map)); @@ -189,12 +191,40 @@ export default abstract class LeafletMap { updatePolyline(data, dataSources, settings) { this.ready$.subscribe(() => { - this.poly.updatePolyline(settings, data, dataSources); - /* const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); - if (bounds.isValid()) { - this.map.fitBounds(bounds); - this.bounds = bounds; - }*/ + this.poly.updatePolyline(settings, data, dataSources); }); + } + + //polygon + + updatePolygon(polyData: Array>) { + polyData.forEach(data => { + if (data.length) { + let dataSource = polyData.map(arr => arr[0]); + if (this.poly) { + this.updatePolyline(data, dataSource, this.options); + } + else { + this.createPolyline(data, dataSource, this.options); + } + } + }) } + + createPolygon(data, dataSources, settings) { + this.ready$.subscribe(() => { + this.polygon = new Polygon(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings); + const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); + if (bounds.isValid()) { + this.map.fitBounds(bounds); + this.bounds = bounds; + } + }); + } + + updatePolygons(data, dataSources, settings) { + this.ready$.subscribe(() => { + this.poly.updatePolyline(settings, data, dataSources); + }); + } } \ No newline at end of file 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 d106724727..290694c4ea 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 @@ -39,6 +39,7 @@ export class MapWidgetController implements MapWidgetInterface { provider: MapProviders; schema; data; + settings; constructor(public mapProvider: MapProviders, private drawRoutes, public ctx, $element) { if (this.map) { @@ -50,13 +51,13 @@ export class MapWidgetController implements MapWidgetInterface { if (!$element) { $element = ctx.$container[0]; } - let settings = this.initSettings(ctx.settings); + this.settings = this.initSettings(ctx.settings); let MapClass = providerSets[this.provider]?.MapClass; if (!MapClass) { return; } - this.map = new MapClass($element, settings); + this.map = new MapClass($element, this.settings); } onInit() { @@ -88,6 +89,13 @@ export class MapWidgetController implements MapWidgetInterface { update() { if (this.drawRoutes) this.map.updatePolylines(parseArray(this.data)); + if(this.settings.showPolygon) + { + console.log(this.data); + + let dummy = [[37.771121,-22.510761],[37.774581,-22.454885],[37.766575,-22.453683],[37.764268,-22.509945]]; + this.map.updatePolygon(dummy); + } this.map.updateMarkers(parseData(this.data)); } @@ -114,11 +122,10 @@ export class MapWidgetController implements MapWidgetInterface { public static getProvidersSchema(){ return mergeSchemes([mapProviderSchema, ...Object.values(providerSets)?.map( - setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]) + setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]); } public static settingsSchema(mapProvider, drawRoutes): Object { - //const providerInfo = providerSets[mapProvider]; let schema = initSchema(); addToSchema(schema,this.getProvidersSchema()); addGroupInfo(schema, "Map Provider Settings"); @@ -133,8 +140,6 @@ export class MapWidgetController implements MapWidgetInterface { addToSchema(schema, clusteringSchema); addGroupInfo(schema, "Markers Clustering Settings"); } - console.log(11, schema); - return schema; } 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 be040fa20f..ac1c756dbb 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 @@ -18,7 +18,7 @@ import L from 'leaflet'; import { interpolateOnPointSegment } from 'leaflet-geometryutil'; import _ from 'lodash'; -export function createTooltip(target, settings, targetArgs?) { +export function createTooltip(target, settings) { const popup = L.popup(); popup.setContent(''); target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); @@ -31,12 +31,7 @@ export function createTooltip(target, settings, targetArgs?) { this.closePopup(); }); } - return popup/*{ - markerArgs: targetArgs, - popup: popup, - locationSettings: settings, - dsIndex: settings.dsIndex - };*/ + return popup; } 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 f8748a246f..2e8c99b451 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 @@ -29,7 +29,7 @@ export class Marker { data; dataSources; - constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, markerArgs?, onDragendListener?) { + constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, onDragendListener?) { //this.map = map; this.location = location; this.setDataSources(data, dataSources); @@ -45,7 +45,7 @@ export class Marker { }); if (settings.showTooltip) { - this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs); + this.tooltip = createTooltip(this.leafletMarker, settings); this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data)); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index e742d45555..c4d2498e55 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts @@ -19,13 +19,12 @@ import { createTooltip } from './maps-utils'; export class Polygon { - map: L.Map; leafletPoly: L.Polygon; tooltip; - constructor(latLangs, settings, location, onClickListener) { - this.leafletPoly = L.polygon(latLangs, { + constructor(public map, coordinates, dataSources, settings, onClickListener?) { + this.leafletPoly = L.polygon(coordinates, { fill: true, fillColor: settings.polygonColor, color: settings.polygonStrokeColor, @@ -35,7 +34,7 @@ export class Polygon { }).addTo(this.map); if (settings.showTooltip) { - this.tooltip = createTooltip(this.leafletPoly, location.dsIndex, settings); + this.tooltip = createTooltip(this.leafletPoly, settings); } if (onClickListener) { this.leafletPoly.on('click', onClickListener); 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 69882fa35f..3b28a2f54d 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 @@ -57,10 +57,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { let subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; if (subscription) subscription.callbacks.onDataUpdated = (updated) => { this.historicalData = parseArray(this.ctx.data); - this.historicalData.forEach(ds => ds.forEach(el => { - el.longitude += (Math.random() - 0.5) - el.latitude += (Math.random() - 0.5) - })); this.calculateIntervals(); this.timeUpdated(this.intervals[0]); this.mapWidget.map.map.invalidateSize();