labels support

Artem Halushko
1 parent 9eb68670
Showing 6 changed files with 59 additions and 38 deletions
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View file @5d33da4
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View file @5d33da4
@@ -61,24 +61,8 @@ export default abstract class LeafletMap {
     }
     getContainer() {
-        return /* this.isMarketCluster ? this.markersCluster :*/ this.map;
+        return this.map;
     }
-    /*
-        fitBounds(bounds, useDefaultZoom) {
-            if (bounds.isValid()) {
-                if ((this.dontFitMapBounds || useDefaultZoom) && this.defaultZoomLevel) {
-                    this.map.setZoom(this.defaultZoomLevel, { animate: false });
-                    this.map.panTo(bounds.getCenter(), { animate: false });
-                } else {
-                    this.map.once('zoomend', () => {
-                        if (!this.defaultZoomLevel && this.map.getZoom() > this.minZoomLevel) {
-                            this.map.setZoom(this.minZoomLevel, { animate: false });
-                        }
-                    });
-                    this.map.fitBounds(bounds, { padding: [50, 50], animate: false });
-                }
-            }
-        }*/
     createLatLng(lat, lng) {
         return L.latLng(lat, lng);
@@ -161,7 +145,8 @@ export default abstract class LeafletMap {
         if (!location.equals(marker.location)) {
             marker.updateMarkerPosition(location);
         }
-        marker.updateMarkerIcon(settings, data, dataSources);
+        marker.setDataSources(data, dataSources);
+        marker.updateMarkerIcon(settings);
     }
     private deleteMarker() {
@@ -173,7 +158,7 @@ export default abstract class LeafletMap {
     updatePolylines(polyData: Array<Array<any>>) {
         polyData.forEach(data => {
             if (data.length) {
-                let dataSource = polyData.map(arr=>arr[0]);
+                let dataSource = polyData.map(arr => arr[0]);
                 if (this.poly) {
                     this.updatePolyline(data, dataSource, this.options);
                 }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
View file @5d33da4
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
View file @5d33da4
@@ -15,7 +15,9 @@ export interface MapOptions {
     credentials?: any, // declare credentials format
     defaultCenterPosition?: LatLngTuple,
     markerClusteringSetting?,
-    useDefaultCenterPosition?: boolean
+    useDefaultCenterPosition?: boolean,
+    gmDefaultMapType?: string,
+    useLabelFunction: string;
 }
 export enum MapProviders {
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View file @5d33da4
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View file @5d33da4
@@ -50,7 +50,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
         const functionParams = ['data', 'dsData', 'dsIndex'];
         this.provider = settings.provider ? settings.provider : this.mapProvider;
         const customOptions = {
-            mapProvider: this.provider,
+            provider: this.provider,
             mapUrl: settings?.mapImageUrl,
             labelFunction: parseFunction(settings.labelFunction, functionParams),
             tooltipFunction: parseFunction(settings.tooltipFunction, functionParams),
@@ -59,8 +59,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
             markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
             tooltipPattern: settings.tooltipPattern ||
                 "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
-            label: settings.label || "${entityName}",
-            defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0,0],
+            defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0, 0],
             currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? {
                 url: settings.markerImage,
                 size: settings.markerImageSize || 34
@@ -82,7 +81,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
         this.map.onResize();//not work
     }
-
     resize() {
         this.map?.invalidateSize();
         this.map.onResize();
@@ -239,7 +237,8 @@ const defaultSettings = {
     latKeyName: 'latitude',
     lngKeyName: 'longitude',
     polygonKeyName: 'coordinates',
-    showLabel: false,
+    showLabel: true,
+    label: "${entityName}",
     showTooltip: false,
     useDefaultCenterPosition: false,
     showTooltipAction: "click",
@@ -252,7 +251,7 @@ const defaultSettings = {
     polygonOpacity: 0.5,
     polygonStrokeOpacity: 1,
     polygonStrokeWeight: 1,
-    useLabelFunction: true,
+    useLabelFunction: false,
     markerImages: [],
     strokeWeight: 2,
     strokeOpacity: 1.0,
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
View file @5d33da4
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
View file @5d33da4
@@ -34,6 +34,9 @@ export function parseArray(input: any[]): any[] {
             alliasArray.forEach(el => {
                 obj[el?.dataKey?.label] = el?.data[i][1];
                 obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
+                if (el?.dataKey?.label == 'type') {
+                    obj['deviceType'] = el?.data[0][1];
+                }
             });
             return obj;
         })
@@ -44,18 +47,22 @@ export function parseData(input: any[]): any[] {
     return _(input).groupBy(el => el?.datasource?.aliasName).values().value().map((alliasArray, i) => {
         const obj = {
             aliasName: alliasArray[0]?.datasource?.aliasName,
+            entityName: alliasArray[0]?.datasource?.entityName,
             $datasource: alliasArray[0]?.datasource,
             dsIndex: i
         };
         alliasArray.forEach(el => {
             obj[el?.dataKey?.label] = el?.data[0][1];
             obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
+            if (el?.dataKey?.label == 'type') {
+                obj['deviceType'] = el?.data[0][1];
+            }
         });
         return obj;
     });
 }
-export function safeExecute(func: Function, params = []) {  
+export function safeExecute(func: Function, params = []) {
     let res = null;
     if (func && typeof (func) == "function") {
         try {
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
View file @5d33da4
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
View file @5d33da4
 import L from 'leaflet';
-import { createTooltip, safeExecute } from './maps-utils';
+import { createTooltip, safeExecute, parseFunction } from './maps-utils';
 import { MarkerSettings } from './map-models';
 import { aspectCache } from '@app/core/utils';
@@ -16,13 +16,12 @@ export class Marker {
     constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, markerArgs?, onDragendListener?) {
         //this.map = map;
         this.location = location;
-        this.data = data;
-        this.dataSources = dataSources;
+        this.setDataSources(data, dataSources)
         this.leafletMarker = L.marker(location, {
             draggable: settings.draggable
         });
-        this.createMarkerIcon(dataSources, (iconInfo) => {
+        this.createMarkerIcon((iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
             if (settings.showLabel) {
                 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
@@ -47,15 +46,45 @@ export class Marker {
     }
+    setDataSources(data, dataSources) {
+        this.data = data;
+        this.dataSources = dataSources;
+    }
+
     updateMarkerPosition(position: L.LatLngExpression) {
         this.leafletMarker.setLatLng(position);
     }
+
+
     updateMarkerLabel(settings) {
+
+        function getText(template, data) {
+            let res = null;
+            try {
+                let variables = '';
+                for (let key in data) {
+                    if (!key.includes('|'))
+                        variables += `var ${key} = '${data[key]}';`;
+                }
+                res = safeExecute(parseFunction(variables + 'return' + '`' + template + '`'));
+            }
+            catch (ex) {
+            }
+            return res;
+        }
+
+        
         this.leafletMarker.unbindTooltip();
-        if (settings.showLabel)
+        if (settings.showLabel) {
+            if (settings.useLabelFunction) {
+                settings.labelText = safeExecute(settings.labelFunction, [this.data, this.dataSources, this.data.dsIndex])
+            }
+            else settings.labelText = getText(settings.label, this.data);
+
             this.leafletMarker.bindTooltip(`<div style="color: ${settings.labelColor};"><b>${settings.labelText}</b></div>`,
                 { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset });
+        }
     }
     updateMarkerColor(color) {
@@ -64,9 +93,8 @@ export class Marker {
         });
     }
-    updateMarkerIcon(settings, data, dataSources) {
-        this.data = data;
-        this.createMarkerIcon(dataSources, (iconInfo) => {
+    updateMarkerIcon(settings) {
+        this.createMarkerIcon((iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
             if (settings.showLabel) {
                 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
@@ -75,9 +103,9 @@ export class Marker {
         });
     }
-    createMarkerIcon(dataSources, onMarkerIconReady) {
+    createMarkerIcon(onMarkerIconReady) {
         const currentImage = this.settings.useMarkerImageFunction ?
-            safeExecute(this.settings.markerImageFunction, [this.data, this.settings.markerImages, dataSources, this.data.dsIndex]) : this.settings.currentImage;
+            safeExecute(this.settings.markerImageFunction, [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage;
         // var opMap = this;
         if (currentImage && currentImage.url) {
             aspectCache(currentImage.url).subscribe(
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
View file @5d33da4
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
View file @5d33da4
@@ -14,7 +14,7 @@ export class GoogleMap extends LeafletMap {
         this.loadGoogle(() => {
             const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
             var roads = (L.gridLayer as any).googleMutant({
-                type: 'roadmap'	// valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
+                type: options?.gmDefaultMapType || 'roadmap'	// valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
             }).addTo(map);
             super.setMap(map);
         }, options.credentials.apiKey);