[3.0] Fixed polygon functionality (#2747)

* Add default setting and title for group

* Fix polygon: updateColor, functions tooltip and color polygon, update coordinate polygon

* Improvement code

* Refactoring code

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import L, { LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, FeatureGroup, LayerGroup } from 'leaflet';
+import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';
 
 import 'leaflet-providers';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
@@ -32,8 +32,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Polyline } from './polyline';
 import { Polygon } from './polygon';
-import { DatasourceData } from '@app/shared/models/widget.models';
-import { safeExecute, createTooltip } from '@home/components/widget/lib/maps/maps-utils';
+import { createTooltip, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
 
 export default abstract class LeafletMap {
 
@@ -379,13 +378,13 @@ export default abstract class LeafletMap {
 
     // Polygon
 
-    updatePolygons(polyData: DatasourceData[]) {
-        polyData.forEach((data: DatasourceData) => {
-            if (data.data.length && data.dataKey.name === this.options.polygonKeyName) {
-                if (typeof (data?.data[0][1]) === 'string') {
-                    data.data = JSON.parse(data.data[0][1]) as LatLngTuple[];
+    updatePolygons(polyData: FormattedData[]) {
+        polyData.forEach((data: FormattedData) => {
+            if (data.hasOwnProperty(this.options.polygonKeyName)) {
+                if (typeof (data[this.options.polygonKeyName]) === 'string') {
+                    data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[];
                 }
-                if (this.polygons.get(data.datasource.entityName)) {
+                if (this.polygons.get(data.$datasource.entityName)) {
                     this.updatePolygon(data, polyData, this.options);
                 }
                 else {
@@ -395,16 +394,16 @@ export default abstract class LeafletMap {
         });
     }
 
-    createPolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) {
+    createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
             const polygon = new Polygon(this.map, polyData, dataSources, settings);
             const bounds = polygon.leafletPoly.getBounds();
             this.fitBounds(bounds);
-            this.polygons.set(polyData.datasource.entityName, polygon);
+            this.polygons.set(polyData.$datasource.entityName, polygon);
         });
     }
 
-    updatePolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) {
+    updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
             const poly = this.polygons.get(polyData.datasource.entityName);
             poly.updatePolygon(polyData.data, dataSources, settings);

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

@@ -217,6 +217,7 @@ export class MapWidgetController implements MapWidgetInterface {
             tooltipFunction: parseFunction(settings.tooltipFunction, functionParams),
             colorFunction: parseFunction(settings.colorFunction, functionParams),
             polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
+            polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams),
             markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
             labelColor: this.ctx.widgetConfig.color,
             polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName,
@@ -236,7 +237,7 @@ export class MapWidgetController implements MapWidgetInterface {
         if (this.drawRoutes)
             this.map.updatePolylines(parseArray(this.data));
         if (this.settings.showPolygon) {
-            this.map.updatePolygons(this.data);
+            this.map.updatePolygons(parseData(this.data));
         }
         if (this.settings.draggableMarker) {
             this.map.setDataSources(parseData(this.data));

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

@@ -16,8 +16,7 @@
 
 import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet';
 import { createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
-import { PolygonSettings } from './map-models';
-import { DatasourceData } from '@app/shared/models/widget.models';
+import { FormattedData, PolygonSettings } from './map-models';
 
 export class Polygon {
 
@@ -26,19 +25,22 @@ export class Polygon {
     data;
     dataSources;
 
-    constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings) {
-        this.leafletPoly = L.polygon(polyData.data, {
-            fill: true,
-            fillColor: settings.polygonColor,
-            color: settings.polygonStrokeColor,
-            weight: settings.polygonStrokeWeight,
-            fillOpacity: settings.polygonOpacity,
-            opacity: settings.polygonStrokeOpacity
-        }).addTo(this.map);
+    constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) {
         this.dataSources = dataSources;
         this.data = polyData;
+        const polygonColor = this.getPolygonColor(settings);
+
+        this.leafletPoly = L.polygon(polyData[this.settings.polygonKeyName], {
+          fill: true,
+          fillColor: polygonColor,
+          color: settings.polygonStrokeColor,
+          weight: settings.polygonStrokeWeight,
+          fillOpacity: settings.polygonOpacity,
+          opacity: settings.polygonStrokeOpacity
+        }).addTo(this.map);
+
         if (settings.showPolygonTooltip) {
-            this.tooltip = createTooltip(this.leafletPoly, settings, polyData.datasource);
+            this.tooltip = createTooltip(this.leafletPoly, settings, polyData.$datasource);
             this.updateTooltip(polyData);
         }
         if (settings.polygonClick) {
@@ -52,17 +54,17 @@ export class Polygon {
         }
     }
 
-    updateTooltip(data: DatasourceData) {
+    updateTooltip(data: FormattedData) {
         const pattern = this.settings.usePolygonTooltipFunction ?
             safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) :
             this.settings.polygonTooltipPattern;
         this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
     }
 
-    updatePolygon(data: LatLngTuple[], dataSources: DatasourceData[], settings: PolygonSettings) {
+    updatePolygon(data: LatLngTuple[], dataSources: FormattedData[], settings: PolygonSettings) {
         this.data = data;
         this.dataSources = dataSources;
-        this.leafletPoly.setLatLngs(data);
+        this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]);
         if (settings.showPolygonTooltip)
             this.updateTooltip(this.data);
         this.updatePolygonColor(settings);
@@ -73,11 +75,10 @@ export class Polygon {
     }
 
     updatePolygonColor(settings: PolygonSettings) {
-        const color = settings.usePolygonColorFunction ?
-            safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor;
+        const polygonColor = this.getPolygonColor(settings);
         const style: L.PathOptions = {
             fill: true,
-            fillColor: color,
+            fillColor: polygonColor,
             color: settings.polygonStrokeColor,
             weight: settings.polygonStrokeWeight,
             fillOpacity: settings.polygonOpacity,
@@ -94,4 +95,12 @@ export class Polygon {
         this.leafletPoly.setLatLngs(latLngs);
         this.leafletPoly.redraw();
     }
+
+    private getPolygonColor(settings: PolygonSettings): string | null {
+      if (settings.usePolygonColorFunction) {
+        return safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]);
+      } else {
+        return settings.polygonColor;
+      }
+    }
 }

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

@@ -22,7 +22,8 @@ export const googleMapSettingsSchema =
         properties: {
             gmApiKey: {
                 title: 'Google Maps API Key',
-                type: 'string'
+                type: 'string',
+                default: 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q'
             },
             gmDefaultMapType: {
                 title: 'Default map type',
@@ -30,8 +31,7 @@ export const googleMapSettingsSchema =
                 default: 'roadmap'
             }
         },
-        required: [
-        ]
+        required: []
     },
     form: [
         'gmApiKey',
@@ -69,7 +69,8 @@ export const tencentMapSettingsSchema =
         properties: {
             tmApiKey: {
                 title: 'Tencent Maps API Key',
-                type: 'string'
+                type: 'string',
+                default: '84d6d83e0e51e481e50454ccbe8986b'
             },
             tmDefaultMapType: {
                 title: 'Default map type',
@@ -77,8 +78,7 @@ export const tencentMapSettingsSchema =
                 default: 'roadmap'
             }
         },
-        required: [
-        ]
+        required: []
     },
     form: [
         'tmApiKey',
@@ -117,6 +117,7 @@ export const hereMapSettingsSchema =
             },
             credentials: {
                 type: 'object',
+                title: 'Credentials',
                 properties: {
                     app_id: {
                         title: 'HERE app id',