From e8e2f2119352193d06614c7ea554fecca6ae063e Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 10 Aug 2020 20:05:11 +0300 Subject: [PATCH] Map widgets fixes --- .../components/widget/lib/maps/leaflet-map.ts | 291 +++++++++--------- .../components/widget/lib/maps/map-models.ts | 45 +-- .../components/widget/lib/maps/map-widget2.ts | 9 +- .../components/widget/lib/maps/markers.ts | 8 +- .../widget/lib/maps/providers/google-map.ts | 2 +- .../widget/lib/maps/providers/here-map.ts | 2 +- .../widget/lib/maps/providers/image-map.ts | 2 +- .../widget/lib/maps/providers/index.ts | 52 +++- .../lib/maps/providers/openstreet-map.ts | 2 +- .../widget/lib/maps/providers/tencent-map.ts | 2 +- .../trip-animation.component.ts | 2 +- 11 files changed, 204 insertions(+), 213 deletions(-) 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 e9d1170412..bf40ff3d82 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 @@ -38,13 +38,17 @@ import { UnitedMapSettings } from './map-models'; import { Marker } from './markers'; -import { BehaviorSubject, Observable, of } from 'rxjs'; -import { filter } from 'rxjs/operators'; +import { Observable, of } from 'rxjs'; import { Polyline } from './polyline'; import { Polygon } from './polygon'; -import { createLoadingDiv, createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils'; +import { + createLoadingDiv, + createTooltip, + parseArray, + parseData, + safeExecute +} from '@home/components/widget/lib/maps/maps-utils'; import { WidgetContext } from '@home/models/widget-component.models'; -import { DatasourceData } from '@shared/models/widget.models'; import { deepClone, isDefinedAndNotEmptyStr } from '@core/utils'; export default abstract class LeafletMap { @@ -53,8 +57,6 @@ export default abstract class LeafletMap { polylines: Map = new Map(); polygons: Map = new Map(); map: L.Map; - map$: BehaviorSubject = new BehaviorSubject(null); - ready$: Observable = this.map$.pipe(filter(map => !!map)); options: UnitedMapSettings; bounds: L.LatLngBounds; datasources: FormattedData[]; @@ -69,6 +71,9 @@ export default abstract class LeafletMap { markerLabelText: string; replaceInfoTooltipMarker: Array = []; markerTooltipText: string; + drawRoutes: boolean; + showPolygon: boolean; + updatePending = false; protected constructor(public ctx: WidgetContext, public $container: HTMLElement, @@ -78,8 +83,7 @@ export default abstract class LeafletMap { public initSettings(options: MapSettings) { this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color); - const { initCallback, - disableScrollZooming, + const { disableScrollZooming, useClusterMarkers, zoomOnClick, showCoverageOnHover, @@ -91,9 +95,6 @@ export default abstract class LeafletMap { if (disableScrollZooming) { this.map.scrollWheelZoom.disable(); } - if (initCallback) { - setTimeout(options.initCallback, 0); - } if (useClusterMarkers) { const clusteringSettings: MarkerClusterGroupOptions = { zoomToBoundsOnClick: zoomOnClick, @@ -109,7 +110,6 @@ export default abstract class LeafletMap { clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom); } this.markersCluster = markerClusterGroup(clusteringSettings); - this.ready$.subscribe(map => map.addLayer(this.markersCluster)); } } @@ -182,18 +182,16 @@ export default abstract class LeafletMap { public setLoading(loading: boolean) { if (this.loading !== loading) { this.loading = loading; - this.ready$.subscribe(() => { - if (this.loading) { - if (!this.loadingDiv) { - this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading')); - } - this.$container.append(this.loadingDiv[0]); - } else { - if (this.loadingDiv) { - this.loadingDiv.remove(); - } + if (this.loading) { + if (!this.loadingDiv) { + this.loadingDiv = createLoadingDiv(this.ctx.translate.instant('common.loading')); } - }); + this.$container.append(this.loadingDiv[0]); + } else { + if (this.loadingDiv) { + this.loadingDiv.remove(); + } + } } } @@ -207,11 +205,13 @@ export default abstract class LeafletMap { if (this.options.draggableMarker) { this.addMarkerControl(); } - this.map$.next(this.map); - } - - public setDataSources(dataSources: FormattedData[]) { - this.datasources = dataSources; + if (this.options.useClusterMarkers) { + this.map.addLayer(this.markersCluster); + } + if (this.updatePending) { + this.updatePending = false; + this.updateData(this.drawRoutes, this.showPolygon); + } } public saveMarkerLocation(_e: FormattedData, lat?: number, lng?: number): Observable { @@ -259,7 +259,7 @@ export default abstract class LeafletMap { this.map.once('zoomend', () => { let minZoom = this.options.minZoomLevel; if (this.options.defaultZoomLevel) { - minZoom = Math.min(minZoom, this.options.defaultZoomLevel); + minZoom = Math.max(minZoom, this.options.defaultZoomLevel); } if (this.map.getZoom() > minZoom) { this.map.setZoom(minZoom, { animate: false }); @@ -297,8 +297,12 @@ export default abstract class LeafletMap { } } - updateData(data: DatasourceData[], formattedData: FormattedData[], drawRoutes: boolean, showPolygon: boolean) { - this.ready$.subscribe(() => { + updateData(drawRoutes: boolean, showPolygon: boolean) { + this.drawRoutes = drawRoutes; + this.showPolygon = showPolygon; + if (this.map) { + const data = this.ctx.data; + const formattedData = parseData(this.ctx.data); if (drawRoutes) { this.updatePolylines(parseArray(data), false); } @@ -306,23 +310,28 @@ export default abstract class LeafletMap { this.updatePolygons(formattedData, false); } this.updateMarkers(formattedData, false); - this.updateBoundsInternal(drawRoutes, showPolygon); - }); + this.updateBoundsInternal(); + if (this.options.draggableMarker) { + this.datasources = formattedData; + } + } else { + this.updatePending = true; + } } - private updateBoundsInternal(drawRoutes: boolean, showPolygon: boolean) { + private updateBoundsInternal() { const bounds = new L.LatLngBounds(null, null); - if (drawRoutes) { + if (this.drawRoutes) { this.polylines.forEach((polyline) => { bounds.extend(polyline.leafletPoly.getBounds()); }); } - if (showPolygon) { + if (this.showPolygon) { this.polygons.forEach((polygon) => { bounds.extend(polygon.leafletPoly.getBounds()); }); } - if ((this.options as MarkerSettings).useClusterMarkers) { + if ((this.options as MarkerSettings).useClusterMarkers && this.markersCluster.getBounds().isValid()) { bounds.extend(this.markersCluster.getBounds()); } else { this.markers.forEach((marker) => { @@ -331,7 +340,7 @@ export default abstract class LeafletMap { } const mapBounds = this.map.getBounds(); - if (bounds.isValid() && (!this.bounds || !mapBounds.contains(bounds))) { + if (bounds.isValid() && (!this.bounds || !this.bounds.isValid() || !this.bounds.equals(bounds) && !mapBounds.contains(bounds))) { this.bounds = bounds; this.fitBounds(bounds); } @@ -340,59 +349,57 @@ export default abstract class LeafletMap { // Markers updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) { const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata)); - this.ready$.subscribe(() => { - const toDelete = new Set(Array.from(this.markers.keys())); - const createdMarkers: Marker[] = []; - const updatedMarkers: Marker[] = []; - const deletedMarkers: Marker[] = []; - let m: Marker; - rawMarkers.forEach(data => { - if (data.rotationAngle || data.rotationAngle === 0) { - const currentImage = this.options.useMarkerImageFunction ? - safeExecute(this.options.markerImageFunction, - [data, this.options.markerImages, markersData, data.dsIndex]) : this.options.currentImage; - const style = currentImage ? 'background-image: url(' + currentImage.url + ');' : ''; - this.options.icon = L.divIcon({ - html: `
` - }); - } else { - this.options.icon = null; - } - if (this.markers.get(data.entityName)) { - m = this.updateMarker(data.entityName, data, markersData, this.options); - if (m) { - updatedMarkers.push(m); - } - } else { - m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback); - if (m) { - createdMarkers.push(m); - } - } - toDelete.delete(data.entityName); + const toDelete = new Set(Array.from(this.markers.keys())); + const createdMarkers: Marker[] = []; + const updatedMarkers: Marker[] = []; + const deletedMarkers: Marker[] = []; + let m: Marker; + rawMarkers.forEach(data => { + if (data.rotationAngle || data.rotationAngle === 0) { + const currentImage = this.options.useMarkerImageFunction ? + safeExecute(this.options.markerImageFunction, + [data, this.options.markerImages, markersData, data.dsIndex]) : this.options.currentImage; + const style = currentImage ? 'background-image: url(' + currentImage.url + ');' : ''; + this.options.icon = L.divIcon({ + html: `
` }); - toDelete.forEach((key) => { - m = this.deleteMarker(key); - if (m) { - deletedMarkers.push(m); - } - }); - this.markersData = markersData; - if ((this.options as MarkerSettings).useClusterMarkers) { - if (createdMarkers.length) { - this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker)); - } - if (updatedMarkers.length) { - this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker)) - } - if (deletedMarkers.length) { - this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker)); - } + } else { + this.options.icon = null; + } + if (this.markers.get(data.entityName)) { + m = this.updateMarker(data.entityName, data, markersData, this.options); + if (m) { + updatedMarkers.push(m); } - }); + } else { + m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback); + if (m) { + createdMarkers.push(m); + } + } + toDelete.delete(data.entityName); + }); + toDelete.forEach((key) => { + m = this.deleteMarker(key); + if (m) { + deletedMarkers.push(m); + } + }); + this.markersData = markersData; + if ((this.options as MarkerSettings).useClusterMarkers) { + if (createdMarkers.length) { + this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker)); + } + if (updatedMarkers.length) { + this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker)) + } + if (deletedMarkers.length) { + this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker)); + } + } } dragMarker = (e, data = {} as FormattedData) => { @@ -420,10 +427,8 @@ export default abstract class LeafletMap { private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings): Marker { const marker: Marker = this.markers.get(key); - const location = this.convertPosition(data) - if (!location.equals(marker.location)) { - marker.updateMarkerPosition(location); - } + const location = this.convertPosition(data); + marker.updateMarkerPosition(location); if (settings.showTooltip) { marker.updateMarkerTooltip(data); } @@ -445,26 +450,24 @@ export default abstract class LeafletMap { } updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) { - this.map$.subscribe(map => { - if (this.points) { - map.removeLayer(this.points); - } - this.points = new FeatureGroup(); - pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { - const point = L.circleMarker(this.convertPosition(data), { - color: this.options.pointColor, - radius: this.options.pointSize - }); - if (!this.options.pointTooltipOnRightPanel) { - point.on('click', () => getTooltip(data)); - } - else { - createTooltip(point, this.options, data.$datasource, getTooltip(data, false)); - } - this.points.addLayer(point); - }); - map.addLayer(this.points); - }); + if (this.points) { + this.map.removeLayer(this.points); + } + this.points = new FeatureGroup(); + pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { + const point = L.circleMarker(this.convertPosition(data), { + color: this.options.pointColor, + radius: this.options.pointSize + }); + if (!this.options.pointTooltipOnRightPanel) { + point.on('click', () => getTooltip(data)); + } + else { + createTooltip(point, this.options, data.$datasource, getTooltip(data, false)); + } + this.points.addLayer(point); + }); + this.map.addLayer(this.points); } // Polyline @@ -494,27 +497,23 @@ export default abstract class LeafletMap { } createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { - this.ready$.subscribe(() => { - const poly = new Polyline(this.map, - dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); - if (updateBounds) { - const bounds = poly.leafletPoly.getBounds(); - this.fitBounds(bounds); - } - this.polylines.set(data.entityName, poly); - }); + const poly = new Polyline(this.map, + dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); + if (updateBounds) { + const bounds = poly.leafletPoly.getBounds(); + this.fitBounds(bounds); + } + this.polylines.set(data.entityName, poly); } updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { - this.ready$.subscribe(() => { - const poly = this.polylines.get(data.entityName); - const oldBounds = poly.leafletPoly.getBounds(); - poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); - const newBounds = poly.leafletPoly.getBounds(); - if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { - this.fitBounds(newBounds); - } - }); + const poly = this.polylines.get(data.entityName); + const oldBounds = poly.leafletPoly.getBounds(); + poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); + const newBounds = poly.leafletPoly.getBounds(); + if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { + this.fitBounds(newBounds); + } } removePolyline(name: string) { @@ -560,26 +559,22 @@ export default abstract class LeafletMap { } createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { - this.ready$.subscribe(() => { - const polygon = new Polygon(this.map, polyData, dataSources, settings); - if (updateBounds) { - const bounds = polygon.leafletPoly.getBounds(); - this.fitBounds(bounds); - } - this.polygons.set(polyData.entityName, polygon); - }); + const polygon = new Polygon(this.map, polyData, dataSources, settings); + if (updateBounds) { + const bounds = polygon.leafletPoly.getBounds(); + this.fitBounds(bounds); + } + this.polygons.set(polyData.entityName, polygon); } updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) { - this.ready$.subscribe(() => { - const poly = this.polygons.get(polyData.entityName); - const oldBounds = poly.leafletPoly.getBounds(); - poly.updatePolygon(polyData, dataSources, settings); - const newBounds = poly.leafletPoly.getBounds(); - if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { - this.fitBounds(newBounds); - } - }); + const poly = this.polygons.get(polyData.entityName); + const oldBounds = poly.leafletPoly.getBounds(); + poly.updatePolygon(polyData, dataSources, settings); + const newBounds = poly.leafletPoly.getBounds(); + if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { + this.fitBounds(newBounds); + } } removePolygon(name: string) { 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 d0da933e8a..445f7e6835 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 @@ -15,14 +15,7 @@ /// import { LatLngTuple } from 'leaflet'; -import { Datasource, JsonSettingsSchema } from '@app/shared/models/widget.models'; -import { Type } from '@angular/core'; -import LeafletMap from './leaflet-map'; -import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; -import { - openstreetMapSettingsSchema, tencentMapSettingsSchema, - googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema -} from './schemes'; +import { Datasource } from '@app/shared/models/widget.models'; import { EntityType } from '@shared/models/entity-type.models'; import tinycolor from 'tinycolor2'; @@ -30,12 +23,10 @@ export const DEFAULT_MAP_PAGE_SIZE = 16384; 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: PosFuncton; defaultZoomLevel?: number; disableScrollZooming?: boolean; @@ -209,40 +200,6 @@ export type actionsHandler = ($event: Event, datasource: Datasource) => void; export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings & TripAnimationSettings; -interface IProvider { - MapClass: Type, - schema: JsonSettingsSchema, - name: string -} - -export const providerSets: { [key: string]: IProvider } = { - 'openstreet-map': { - MapClass: OpenStreetMap, - schema: openstreetMapSettingsSchema, - name: 'openstreet-map', - }, - 'tencent-map': { - MapClass: TencentMap, - schema: tencentMapSettingsSchema, - name: 'tencent-map' - }, - 'google-map': { - MapClass: GoogleMap, - schema: googleMapSettingsSchema, - name: 'google-map' - }, - here: { - MapClass: HEREMap, - schema: hereMapSettingsSchema, - name: 'here' - }, - 'image-map': { - MapClass: ImageMap, - schema: imageMapSettingsSchema, - name: 'image-map' - } -}; - export const defaultSettings: any = { xPosKeyName: 'xPos', yPosKeyName: 'yPos', 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 7acc6e92e5..27d8b56585 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 @@ -15,12 +15,10 @@ /// import { - DEFAULT_MAP_PAGE_SIZE, defaultSettings, FormattedData, hereProviders, MapProviders, - providerSets, UnitedMapSettings } from './map-models'; import LeafletMap from './leaflet-map'; @@ -46,6 +44,7 @@ import _ from 'lodash'; import { EntityDataPageLink } from '@shared/models/query/query.models'; import { isDefined } from '@core/utils'; import { forkJoin, Observable, of } from 'rxjs'; +import { providerSets } from '@home/components/widget/lib/maps/providers'; // @dynamic export class MapWidgetController implements MapWidgetInterface { @@ -275,11 +274,7 @@ export class MapWidgetController implements MapWidgetInterface { } update() { - const formattedData = parseData(this.data); - this.map.updateData(this.data, formattedData, this.drawRoutes, this.settings.showPolygon); - if (this.settings.draggableMarker) { - this.map.setDataSources(formattedData); - } + this.map.updateData(this.drawRoutes, this.settings.showPolygon); this.map.setLoading(false); } 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 efad5931c9..f5f7663c39 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 @@ -34,11 +34,10 @@ export class Marker { tooltipOffset: L.LatLngTuple; markerOffset: L.LatLngTuple; tooltip: L.Popup; - location: L.LatLngExpression; data: FormattedData; dataSources: FormattedData[]; - constructor(private map: LeafletMap, location: L.LatLngExpression, public settings: MarkerSettings, + constructor(private map: LeafletMap, private location: L.LatLng, public settings: MarkerSettings, data?: FormattedData, dataSources?, onDragendListener?) { this.setDataSources(data, dataSources); this.leafletMarker = L.marker(location, { @@ -94,8 +93,11 @@ export class Marker { } } - updateMarkerPosition(position: L.LatLngExpression) { + updateMarkerPosition(position: L.LatLng) { + if (!this.location.equals(position)) { + this.location = position; this.leafletMarker.setLatLng(position); + } } updateMarkerLabel(settings: MarkerSettings) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts index b0254ee2c2..021695d860 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts @@ -35,6 +35,7 @@ export class GoogleMap extends LeafletMap { constructor(ctx: WidgetContext, $container, options: UnitedMapSettings) { super(ctx, $container, options); this.resource = ctx.$injector.get(ResourcesService); + super.initSettings(options); this.loadGoogle(() => { const map = L.map($container, {attributionControl: false}).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); (L.gridLayer as any).googleMutant({ @@ -42,7 +43,6 @@ export class GoogleMap extends LeafletMap { }).addTo(map); super.setMap(map); }, options.gmApiKey); - super.initSettings(options); } private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts index 17a8f61801..882c85861b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts @@ -25,7 +25,7 @@ export class HEREMap extends LeafletMap { const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); const tileLayer = (L.tileLayer as any).provider(options.mapProviderHere || 'HERE.normalDay', options.credentials); tileLayer.addTo(map); - super.setMap(map); super.initSettings(options); + super.setMap(map); } } 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 82f8120bac..9ffe891a51 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 @@ -47,8 +47,8 @@ export class ImageMap extends LeafletMap { this.onResize(true); } else { this.onResize(); - super.setMap(this.map); super.initSettings(options); + super.setMap(this.map); } }); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts index 16d411c167..c9e7bbe8f9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts @@ -14,8 +14,50 @@ /// limitations under the License. /// -export * from './tencent-map'; -export * from './google-map'; -export * from './here-map'; -export * from './image-map'; -export * from './openstreet-map'; +import { + googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema, + openstreetMapSettingsSchema, + tencentMapSettingsSchema +} from '@home/components/widget/lib/maps/schemes'; +import { OpenStreetMap } from './openstreet-map'; +import { TencentMap } from './tencent-map'; +import { GoogleMap } from './google-map'; +import { HEREMap } from './here-map'; +import { ImageMap } from './image-map'; +import { Type } from '@angular/core'; +import LeafletMap from '@home/components/widget/lib/maps/leaflet-map'; +import { JsonSettingsSchema } from '@shared/models/widget.models'; + +interface IProvider { + MapClass: Type, + schema: JsonSettingsSchema, + name: string +} + +export const providerSets: { [key: string]: IProvider } = { + 'openstreet-map': { + MapClass: OpenStreetMap, + schema: openstreetMapSettingsSchema, + name: 'openstreet-map', + }, + 'tencent-map': { + MapClass: TencentMap, + schema: tencentMapSettingsSchema, + name: 'tencent-map' + }, + 'google-map': { + MapClass: GoogleMap, + schema: googleMapSettingsSchema, + name: 'google-map' + }, + here: { + MapClass: HEREMap, + schema: hereMapSettingsSchema, + name: 'here' + }, + 'image-map': { + MapClass: ImageMap, + schema: imageMapSettingsSchema, + name: 'image-map' + } +}; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts index d1e2379dbd..0d5e4c68dd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts @@ -29,7 +29,7 @@ export class OpenStreetMap extends LeafletMap { else tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'OpenStreetMap.Mapnik'); tileLayer.addTo(map); - super.setMap(map); super.initSettings(options); + super.setMap(map); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts index a615de883a..74a2447726 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts @@ -31,7 +31,7 @@ export class TencentMap extends LeafletMap { attribution: '©2020 Tencent - GS(2018)2236号- Data© NavInfo' }).addTo(map); txLayer.addTo(map); - super.setMap(map); super.initSettings(options); + super.setMap(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 25912c1747..99c399d3f2 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,7 +159,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy } this.calcLabel(); this.calcTooltip(currentPosition.find(position => position.entityName === this.activeTrip.entityName)); - if (this.mapWidget) { + if (this.mapWidget && this.mapWidget.map && this.mapWidget.map.map) { this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), true, this.activeTrip); if (this.settings.showPolygon) { this.mapWidget.map.updatePolygons(this.interpolatedTimeData);