image map alias image support

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -257,8 +257,6 @@ export default abstract class LeafletMap {
     private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) {
         this.ready$.subscribe(() => {
             const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
-            console.log(this.bounds);
-            
             this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size < 2);
             this.markers.set(key, newMarker);
             if (this.options.useClusterMarkers) {
@@ -294,7 +292,7 @@ export default abstract class LeafletMap {
         }
     }
 
-    setImageAlias(alias:Observable<any>){       
+    setImageAlias(alias:Observable<any>){
     }
 
     // Polyline

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts

@@ -31,9 +31,9 @@ import {
 } from './schemes';
 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
-import { parseFunction, parseArray, parseData, safeExecute, parseWithTranslation } from '@core/utils';
+import { parseFunction, parseArray, parseData, parseWithTranslation } from '@core/utils';
 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
-import { forkJoin, of, Observable } from 'rxjs';
+import { of, Subject } from 'rxjs';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 import { getDefCenterPosition } from './maps-utils';
 import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models';
@@ -48,7 +48,6 @@ import { UtilsService } from '@core/services/utils.service';
 export class MapWidgetController implements MapWidgetInterface {
 
     constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
-        console.log('MapWidgetController -> constructor -> ctx', ctx)
         if (this.map) {
             this.map.map.remove();
             delete this.map;
@@ -85,7 +84,6 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     public static getProvidersSchema(mapProvider: MapProviders) {
-        console.log('MapWidgetController -> getProvidersSchema -> mapProvider', mapProvider)
         mapProviderSchema.schema.properties.provider.default = mapProvider;
         return mergeSchemes([mapProviderSchema,
             ...Object.keys(providerSets)?.map(
@@ -178,7 +176,7 @@ export class MapWidgetController implements MapWidgetInterface {
             entityId,
             AttributeScope.SHARED_SCOPE,
             keys
-        ).subscribe(res => {
+        ).subscribe(() => {
         });
     }
 
@@ -255,15 +253,19 @@ export class MapWidgetController implements MapWidgetInterface {
                 ]
             }
         ];
+        const result = new Subject();
         const imageUrlSubscriptionOptions = {
             datasources,
             useDashboardTimewindow: false,
             type: widgetType.latest,
             callbacks: {
-                onDataUpdated: (subscription, apply) => { }
+                onDataUpdated: (subscription) => {
+                    result.next(subscription.data[0].data[0]);
+                }
             }
         };
-        return this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true);
+        this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true).subscribe(() => { });
+        return result;
     }
 
     onDestroy() {

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts

@@ -16,10 +16,10 @@
 
 import L, { LatLngLiteral } from 'leaflet';
 import LeafletMap from '../leaflet-map';
-import { MapSettings, UnitedMapSettings } from '../map-models';
+import { UnitedMapSettings } from '../map-models';
 import { aspectCache, parseFunction } from '@app/core/utils';
 import { Observable } from 'rxjs';
-import { skipLast, map, filter, switchMap } from 'rxjs/operators';
+import { map, filter } from 'rxjs/operators';
 
 const maxZoom = 4;// ?
 
@@ -29,11 +29,13 @@ export class ImageMap extends LeafletMap {
     aspect = 0;
     width = 0;
     height = 0;
+    imageUrl;
 
     constructor($container: HTMLElement, options: UnitedMapSettings) {
         super($container, options);
         options.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((rigXPos, origYPos) => { x, y });
-        aspectCache(options.mapUrl).subscribe(aspect => {
+        this.imageUrl = options.mapUrl;
+        aspectCache(this.imageUrl).subscribe(aspect => {
             this.aspect = aspect;
             this.onResize();
             super.setMap(this.map);
@@ -43,9 +45,12 @@ export class ImageMap extends LeafletMap {
 
     setImageAlias(alias: Observable<any>) {
         alias.pipe(filter(result => result),
-            map(subscription => subscription.data[1])).subscribe(res => {
-                console.log("ImageMap -> setImageAlias -> res", res)
-
+            filter(result => result), map(el => el[1])).subscribe(res => {
+                this.imageUrl = res;
+                aspectCache(res).subscribe(aspect => {
+                    this.aspect = aspect;
+                    this.onResize(true);
+                })
             })
     }
 
@@ -64,8 +69,7 @@ export class ImageMap extends LeafletMap {
         if (this.imageOverlay) {
             this.imageOverlay.setBounds(bounds);
         } else {
-            this.imageOverlay = L.imageOverlay(this.options.mapUrl, bounds).addTo(this.map);
-
+            this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map);
         }
         const padding = 200 * maxZoom;
         southWest = this.pointToLatLng(-padding, h + padding);
@@ -127,7 +131,6 @@ export class ImageMap extends LeafletMap {
     }
 
     convertPosition(expression): L.LatLng {
-        console.log("ImageMap -> expression", expression)
         return this.pointToLatLng(
             expression[this.options.xPosKeyName] * this.width,
             expression[this.options.yPosKeyName] * this.height);

ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts

@@ -335,7 +335,7 @@ export const commonMapSettingsSchema =
             colorFunction: {
                 title: 'Color function: f(data, dsData, dsIndex)',
                 type: 'string'
-            },            
+            },
             markerImage: {
                 title: 'Custom marker image',
                 type: 'string'
@@ -434,7 +434,7 @@ export const commonMapSettingsSchema =
                     type: 'image'
                 }
             ]
-        }        
+        }
     ]
 };
 

ui-ngx/src/tslint.json

@@ -12,10 +12,6 @@
       "element",
       "tb",
       "kebab-case"
-    ],
-    "import-blacklist": [
-      true,
-      ["^.*/public-api$"]
-  ]
+    ]
   }
 }

ui-ngx/tslint.json

@@ -11,7 +11,8 @@
     },
     "import-blacklist": [
       true,
-      "rxjs/Rx"
+      "rxjs/Rx",
+      "^.*/public-api$"
     ],
     "interface-name": false,
     "max-classes-per-file": false,