UI: Improve image map position conversion function

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

@@ -188,7 +188,7 @@ export default abstract class LeafletMap {
           entities = this.datasources.filter(pData => !this.isValidPolygonPosition(pData));
           break;
         case 'Marker':
-          entities = this.datasources.filter(mData => !this.convertPosition(mData));
+          entities = this.datasources.filter(mData => !this.extractPosition(mData));
           break;
         case 'Circle':
           entities = this.datasources.filter(mData => !this.isValidCircle(mData));
@@ -616,16 +616,29 @@ export default abstract class LeafletMap {
         }
     }
 
-    convertPosition(expression: object): L.LatLng {
+    extractPosition(data: FormattedData): {x: number, y: number} {
-      if (!expression) {
+      if (!data) {
         return null;
       }
-      const lat = expression[this.options.latKeyName];
+      const lat = data[this.options.latKeyName];
-      const lng = expression[this.options.lngKeyName];
+      const lng = data[this.options.lngKeyName];
       if (!isDefinedAndNotNull(lat) || isString(lat) || isNaN(lat) || !isDefinedAndNotNull(lng) || isString(lng) || isNaN(lng)) {
         return null;
       }
-      return L.latLng(lat, lng) as L.LatLng;
+      return {x: lat, y: lng};
+    }
+
+    positionToLatLng(position: {x: number, y: number}): L.LatLng {
+      return L.latLng(position.x, position.y) as L.LatLng;
+    }
+
+    convertPosition(data: FormattedData, dsData: FormattedData[]): L.LatLng {
+      const position = this.extractPosition(data);
+      if (position) {
+        return this.positionToLatLng(position);
+      } else {
+        return null;
+      }
     }
 
     convertPositionPolygon(expression: (LatLngTuple | LatLngTuple[] | LatLngTuple[][])[]) {
@@ -707,7 +720,7 @@ export default abstract class LeafletMap {
           if (this.options.draggableMarker && !this.options.hideDrawControlButton && !this.options.hideAllControlButton) {
             let foundEntityWithoutLocation = false;
             for (const mData of formattedData) {
-              const position = this.convertPosition(mData);
+              const position = this.extractPosition(mData);
               if (!position) {
                 foundEntityWithoutLocation = true;
               } else if (!!position) {
@@ -836,7 +849,7 @@ export default abstract class LeafletMap {
 
   // Markers
     updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) {
-      const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata));
+      const rawMarkers = markersData.filter(mdata => !!this.extractPosition(mdata));
       const toDelete = new Set(Array.from(this.markers.keys()));
       const createdMarkers: Marker[] = [];
       const updatedMarkers: Marker[] = [];
@@ -900,7 +913,7 @@ export default abstract class LeafletMap {
 
     private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: Partial<WidgetMarkersSettings>,
                          updateBounds = true, callback?, snappable = false): Marker {
-      const newMarker = new Marker(this, this.convertPosition(data), settings, data, dataSources, this.dragMarker, snappable);
+      const newMarker = new Marker(this, this.convertPosition(data, dataSources), settings, data, dataSources, this.dragMarker, snappable);
       if (callback) {
         newMarker.leafletMarker.on('click', () => {
           callback(data, true);
@@ -921,7 +934,7 @@ export default abstract class LeafletMap {
 
     private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: Partial<WidgetMarkersSettings>): Marker {
         const marker: Marker = this.markers.get(key);
-        const location = this.convertPosition(data);
+        const location = this.convertPosition(data, dataSources);
         marker.updateMarkerPosition(location);
         marker.setDataSources(data, dataSources);
         if (settings.showTooltip) {
@@ -964,12 +977,12 @@ export default abstract class LeafletMap {
     for (const pointsList of pointsData) {
       for (let tsIndex = 0; tsIndex < pointsList.length; tsIndex++) {
         const pdata = pointsList[tsIndex];
-        if (!!this.convertPosition(pdata)) {
+        if (!!this.extractPosition(pdata)) {
           const dsData = pointsData.map(ds => ds[tsIndex]);
           if (this.options.useColorPointFunction) {
             pointColor = safeExecute(this.options.parsedColorPointFunction, [pdata, dsData, pdata.dsIndex]);
           }
-          const point = L.circleMarker(this.convertPosition(pdata), {
+          const point = L.circleMarker(this.convertPosition(pdata, dsData), {
             color: pointColor,
             radius: this.options.pointSize
           });
@@ -1017,7 +1030,7 @@ export default abstract class LeafletMap {
     createPolyline(data: FormattedData, tsData: FormattedData[], dsData: FormattedData[],
                    settings: Partial<WidgetPolylineSettings>, updateBounds = true) {
         const poly = new Polyline(this.map,
-          tsData.map(el => this.convertPosition(el)).filter(el => !!el), data, dsData, settings);
+          tsData.map(el => this.extractPosition(el)).filter(el => !!el).map(el => this.positionToLatLng(el)), data, dsData, settings);
         if (updateBounds) {
           const bounds = poly.leafletPoly.getBounds();
           this.fitBounds(bounds);
@@ -1029,7 +1042,8 @@ export default abstract class LeafletMap {
                    settings: Partial<WidgetPolylineSettings>, updateBounds = true) {
         const poly = this.polylines.get(data.entityName);
         const oldBounds = poly.leafletPoly.getBounds();
-        poly.updatePolyline(tsData.map(el => this.convertPosition(el)).filter(el => !!el), data, dsData, settings);
+        poly.updatePolyline(tsData.map(el => this.extractPosition(el)).filter(el => !!el)
+          .map(el => this.positionToLatLng(el)), data, dsData, settings);
         const newBounds = poly.leafletPoly.getBounds();
         if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
             this.fitBounds(newBounds);

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

@@ -48,8 +48,10 @@ export interface CircleData {
 }
 
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
-export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => MarkerImageInfo;
+export type MarkerImageFunction = (data: FormattedData, markerImages: string[],
-export type PosFuncton = (origXPos, origYPos) => { x, y };
+                                   dsData: FormattedData[], dsIndex: number) => MarkerImageInfo;
+export type PosFunction = (origXPos, origYPos, data: FormattedData,
+                           dsData: FormattedData[], dsIndex: number, aspect: number) => { x: number, y: number };
 export type MarkerIconReadyFunction = (icon: MarkerIconInfo) => void;
 
 export enum GoogleMapType {

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

@@ -20,7 +20,7 @@ import {
   CircleData,
   defaultImageMapProviderSettings,
   MapImage,
-  PosFuncton,
+  PosFunction,
   WidgetUnitedMapSettings
 } from '../map-models';
 import { Observable, ReplaySubject } from 'rxjs';
@@ -30,7 +30,7 @@ import {
   calculateNewPointCoordinate
 } from '@home/components/widget/lib/maps/common-maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models';
+import { DataSet, DatasourceType, FormattedData, widgetType } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { isDefinedAndNotNull, isEmptyStr, isNotEmptyStr, parseFunction } from '@core/utils';
@@ -45,11 +45,12 @@ export class ImageMap extends LeafletMap {
     width = 0;
     height = 0;
     imageUrl: string;
-    posFunction: PosFuncton;
+    posFunction: PosFunction;
 
     constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
         super(ctx, $container, options);
-        this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as PosFuncton;
+        this.posFunction = parseFunction(options.posFunction,
+          ['origXPos', 'origYPos', 'data', 'dsData', 'dsIndex', 'aspect']) as PosFunction;
         this.mapImage(options).subscribe((mapImage) => {
           this.imageUrl = mapImage.imageUrl;
           this.aspect = mapImage.aspect;
@@ -248,16 +249,32 @@ export class ImageMap extends LeafletMap {
       }
     }
 
-    convertPosition(expression): L.LatLng {
+    extractPosition(data: FormattedData): {x: number, y: number} {
-      const xPos = expression[this.options.xPosKeyName];
+      if (!data) {
-      const yPos = expression[this.options.yPosKeyName];
+        return null;
+      }
+      const xPos = data[this.options.xPosKeyName];
+      const yPos = data[this.options.yPosKeyName];
       if (!isDefinedAndNotNull(xPos) || isEmptyStr(xPos) || isNaN(xPos) || !isDefinedAndNotNull(yPos) || isEmptyStr(yPos) || isNaN(yPos)) {
         return null;
       }
-      Object.assign(expression, this.posFunction(xPos, yPos));
+      return {x: xPos, y: yPos};
+    }
+
+    positionToLatLng(position: {x: number, y: number}): L.LatLng {
       return this.pointToLatLng(
-        expression.x * this.width,
+        position.x * this.width,
-        expression.y * this.height);
+        position.y * this.height);
+    }
+
+    convertPosition(data, dsData: FormattedData[]): L.LatLng {
+      const position = this.extractPosition(data);
+      if (position) {
+        const converted = this.posFunction(position.x, position.y, data, dsData, data.dsIndex, this.aspect) || {x: 0, y: 0};
+        return this.positionToLatLng(converted);
+      } else {
+        return null;
+      }
     }
 
     convertPositionPolygon(expression: (LatLngTuple | LatLngTuple[] | LatLngTuple[][])[]){

ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html

@@ -32,7 +32,7 @@
                 formControlName="posFunction"
                 minHeight="100px"
                 [globalVariables]="functionScopeVariables"
-                [functionArgs]="['origXPos', 'origYPos']"
+                [functionArgs]="['origXPos', 'origYPos', 'data', 'dsData', 'dsIndex', 'aspect']"
                 functionTitle="{{ 'widgets.maps.position-function' | translate }}"
                 helpId="widget/lib/map/position_fn">
     </tb-js-func>

ui-ngx/src/assets/help/en_US/widget/lib/map/position_fn.md

@@ -3,14 +3,18 @@
 <div class="divider"></div>
 <br/>
 
-*function (origXPos, origYPos): {x: number, y: number}*
+*function (origXPos, origYPos, data, dsData, dsIndex, aspect): {x: number, y: number}*
 
 A JavaScript function used to convert original relative x, y coordinates of the marker.
 
 **Parameters:**
 
-- **origXPos:** <code>number</code> - original relative x coordinate as double from 0 to 1;
+<ul>
-- **origYPos:** <code>number</code> - original relative y coordinate as double from 0 to 1;
+  <li><b>origXPos:</b> <code>number</code> - original relative x coordinate as double from 0 to 1.</li>
+  <li><b>origYPos:</b> <code>number</code> - original relative y coordinate as double from 0 to 1.</li>
+  {% include widget/lib/map/map_fn_args %}
+  <li><b>aspect:</b> <code>number</code> - image map aspect ratio.</li>
+</ul>
 
 **Returns:**
 
@@ -37,5 +41,25 @@ return {x: origXPos / 2, y: origYPos / 2};
 {:copy-code}
 ```
 
+* Detect markers with same positions and place them with minimum overlap:
+
+```javascript
+var xPos = data.xPos;
+var yPos = data.yPos;
+var locationGroup = dsData.filter((item) => item.xPos === xPos && item.yPos === yPos);
+if (locationGroup.length > 1) {
+  const count = locationGroup.length;
+  const index = locationGroup.indexOf(data);
+  const radius = 0.035;
+  const angle = (360 / count) * index - 45;
+  const x = xPos + radius * Math.sin(angle*Math.PI/180) / aspect;
+  const y = yPos + radius * Math.cos(angle*Math.PI/180);
+  return {x: x, y: y};
+} else {
+  return {x: xPos, y: yPos};
+}
+{:copy-code}
+```
+
 <br>
 <br>