Removed polygon latLnag dependency and added polygon marker and click event

ui/src/app/locale/locale.constant-de_DE.json

@@ -1559,6 +1559,7 @@
     "widget-action": {
       "action-cell-button": "Aktionszellenschaltfläche",
       "row-click": "Klick auf Zeile",
+      "polygon-click": "Klick auf Polygon",
       "marker-click": "Klick auf Marker",
       "tooltip-tag-action": "Tooltip-Tag-Aktion"
     }

ui/src/app/locale/locale.constant-en_US.json

@@ -1559,6 +1559,7 @@
         "widget-action": {
             "action-cell-button": "Action cell button",
             "row-click": "On row click",
+            "polygon-click": "On polygon click",
             "marker-click": "On marker click",
             "tooltip-tag-action": "Tooltip tag action"
         }

ui/src/app/locale/locale.constant-es_ES.json

@@ -1559,7 +1559,8 @@
         "widget-action": {
             "action-cell-button": "Botón de acción de celda",
             "row-click": "Clic en la fila",
-            "marker-click": "Clic en el marcador",
+            "polygon-click": "Clic en la fila",
+            "marker-click": "Clic en el polígono",
             "tooltip-tag-action": "Acción de etiqueta para globo de ayuda"
         }
     },

ui/src/app/locale/locale.constant-fr_FR.json

@@ -336,6 +336,7 @@
             "action-cell-button": "Action cell button",
             "marker-click": "On marker click",
             "row-click": "On row click",
+            "polygon-click": "On polygon click",
             "tooltip-tag-action": "Tooltip tag action"
         }
     },

ui/src/app/locale/locale.constant-it_IT.json

@@ -1425,6 +1425,7 @@
         "widget-action": {
             "action-cell-button": "Action cell button",
             "row-click": "On row click",
+            "polygon-click": "On polygon click",
             "marker-click": "On marker click",
             "tooltip-tag-action": "Tooltip tag action"
         }

ui/src/app/locale/locale.constant-ja_JA.json

@@ -1442,6 +1442,7 @@
 		"widget-action": {
 			"action-cell-button": "アクションセルボタン",
 			"row-click": "行のクリック",
+			"polygon-click": "ポリゴンクリック",
 			"marker-click": "マーカークリック",
 			"tooltip-tag-action": "ツールチップのタグアクション"
 		}

ui/src/app/locale/locale.constant-ko_KR.json

@@ -1318,6 +1318,7 @@
         "widget-action": {
             "action-cell-button": "Action cell button",
             "row-click": "On row click",
+            "polygon-click": "On polygon click",
             "marker-click": "On marker click",
             "tooltip-tag-action": "Tooltip tag action"
         }

ui/src/app/locale/locale.constant-ru_RU.json

@@ -1558,6 +1558,7 @@
             "action-cell-button": "Кнопка действия ячейки",
             "row-click": "Действий при щелчке на строку",
             "marker-click": "Действия при щелчке на указателе",
+            "polygon-click": "Действия при щелчке на полигон",
             "tooltip-tag-action": "Действие при подсказке"
         }
     },

ui/src/app/locale/locale.constant-tr_TR.json

@@ -1524,7 +1524,8 @@
         "widget-action": {
             "action-cell-button": "Eylem hücre butonu",
             "row-click": "Satır tıklama eylemi",
-            "marker-click": "İşaretçi tıklama eylemi",
+            "polygon-click": "Satır tıklama eylemi",
+            "marker-click": "Çokgen tıklama eylemi",
             "tooltip-tag-action": "İpucu etiket eylemi"
         }
     },

ui/src/app/locale/locale.constant-zh_CN.json

@@ -1429,6 +1429,7 @@
             "action-cell-button": "动作单元格按钮",
             "row-click": "点击行",
             "marker-click": "点击标记",
+            "polygon-click": "单击多边形",
             "tooltip-tag-action": "提示标签动作"
         }
     },

ui/src/app/widget/lib/google-map.js

@@ -315,7 +315,7 @@ export default class TbGoogleMap {
     }
 
 
-	createPolygon(latLangs, settings) {
+	createPolygon(latLangs, settings, location,  onClickListener, markerArgs) {
 		let polygon = new google.maps.Polygon({
 			map: this.map,
 			paths: latLangs,
@@ -325,6 +325,32 @@ export default class TbGoogleMap {
 			fillOpacity: settings.polygonOpacity,
 			strokeWeight: settings.polygonStrokeWeight
 		});
+
+		//initialize-tooltip
+
+		let popup = new google.maps.InfoWindow({
+			content: ''
+		});
+		if (!this.tooltips) this.tooltips = [];
+		this.tooltips.push({
+			markerArgs: markerArgs,
+			popup: popup,
+			locationSettings: settings,
+			dsIndex: location.dsIndex
+		});
+
+		if (onClickListener) {
+			google.maps.event.addListener(polygon, 'click', function (event) {
+				if (settings.displayTooltip) {
+					if (!polygon.anchor) {
+						polygon.anchor = new google.maps.MVCObject();
+					}
+					polygon.anchor.set("position", event.latLng);
+					popup.open(this.map, polygon.anchor);
+				}
+				onClickListener();
+			});
+		}
 		return polygon;
 	}
 	/* eslint-disable no-undef */

ui/src/app/widget/lib/map-widget2.js

@@ -233,7 +233,6 @@ export default class TbMapWidgetV2 {
 	}
 
 	update() {
-
 		var tbMap = this;
 
 
@@ -381,6 +380,17 @@ export default class TbMapWidgetV2 {
 				tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName);
 			}
 		}
+		function locationPolygonClick($event, location) {
+			var descriptors = tbMap.ctx.actionsApi.getActionDescriptors('polygonClick');
+			if (descriptors.length) {
+				var datasource = tbMap.subscription.datasources[location.dsIndex];
+				var entityId = {};
+				entityId.id = datasource.entityId;
+				entityId.entityType = datasource.entityType;
+				var entityName = datasource.entityName;
+				tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName);
+			}
+		}
 
 		function updateLocation(location, data, dataMap) {
 			var locationChanged = false;
@@ -427,21 +437,6 @@ export default class TbMapWidgetV2 {
 								locationChanged = true;
 							}
 						}
-
-
-						if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
-							let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
-							let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
-							if (!location.polygon && polygonLatLngs.length > 0) {
-								location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings);
-								tbMap.polygons.push(location.polygon);
-							} else if (polygonLatLngs.length > 0) {
-								let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
-								if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) {
-									tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs);
-								}
-							}
-						}
 					}
 					if (location.marker) {
 						updateLocationStyle(location, dataMap);
@@ -451,6 +446,25 @@ export default class TbMapWidgetV2 {
 			return locationChanged;
 		}
 
+		function createUpdatePolygon(location, dataMap) {
+			if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
+				let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
+				let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
+				if (!location.polygon && polygonLatLngs.length > 0) {
+					location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
+						tbMap.callbacks.onLocationClick(location);
+						locationPolygonClick(event, location);
+					}, [location.dsIndex]);
+					tbMap.polygons.push(location.polygon);
+				} else if (polygonLatLngs.length > 0) {
+					let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
+					if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) {
+						tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs);
+					}
+				}
+			}
+		}
+
 		function loadLocations(data, datasources) {
 			var bounds = tbMap.map.createBounds();
 			tbMap.locations = [];
@@ -459,7 +473,6 @@ export default class TbMapWidgetV2 {
 			var currentDatasourceIndex = -1;
 			var latIndex = -1;
 			var lngIndex = -1;
-
 			for (var i = 0; i < data.length; i++) {
 				var dataKeyData = data[i];
 				var dataKey = dataKeyData.dataKey;
@@ -480,7 +493,6 @@ export default class TbMapWidgetV2 {
 				} else if (nameToCheck === tbMap.locationSettings.lngKeyName) {
 					lngIndex = i;
 				}
-
 				if (latIndex > -1 && lngIndex > -1) {
 					var location = {
 						latIndex: latIndex,
@@ -499,6 +511,7 @@ export default class TbMapWidgetV2 {
 					}
 					tbMap.locations.push(location);
 					updateLocation(location, data, dataMap);
+
 					if (location.polyline) {
 						tbMap.map.extendBounds(bounds, location.polyline);
 					} else if (location.marker) {
@@ -507,8 +520,28 @@ export default class TbMapWidgetV2 {
 					latIndex = -1;
 					lngIndex = -1;
 				}
-
 			}
+			data.forEach(function (dataEl, index) {
+				let nameToCheck;
+				if (dataEl.dataKey.locationAttrName) {
+					nameToCheck = dataEl.dataKey.locationAttrName;
+				} else {
+					nameToCheck = dataEl.dataKey.label;
+				}
+				if (nameToCheck === tbMap.locationSettings.polygonKeyName) {
+					let location = {
+						polIndex: index,
+						settings: angular.copy(tbMap.locationSettings)
+					};
+					location.dsIndex = datasources.findIndex(function (ds) {
+						return dataEl.datasource.entityId === ds.entityId;
+					});
+					tbMap.locations.push(location);
+					createUpdatePolygon(location, dataMap);
+					tbMap.map.extendBounds(bounds, location.polygon);
+				}
+			});
+
 			tbMap.map.fitBounds(bounds);
 		}
 
@@ -532,10 +565,13 @@ export default class TbMapWidgetV2 {
 			for (var p = 0; p < tbMap.locations.length; p++) {
 				var location = tbMap.locations[p];
 				locationsChanged |= updateLocation(location, data, dataMap);
+				createUpdatePolygon(location, dataMap);
 				if (location.polyline) {
 					tbMap.map.extendBounds(bounds, location.polyline);
 				} else if (location.marker) {
 					tbMap.map.extendBoundsWithMarker(bounds, location.marker);
+				} else if (location.polygon) {
+					tbMap.map.extendBounds(bounds, location.polygon);
 				}
 			}
 			if (locationsChanged && tbMap.initBounds) {
@@ -581,23 +617,30 @@ export default class TbMapWidgetV2 {
 				}
 			}
 		}
-
 	}
 
 	resize() {
 		if (this.map && this.map.inited()) {
-			this.map.invalidateSize();
+			let map = this.map;
 			if (this.locations && this.locations.length > 0) {
-				var bounds = this.map.createBounds();
-				for (var m = 0; m < this.markers.length; m++) {
-					this.map.extendBoundsWithMarker(bounds, this.markers[m]);
+				map.invalidateSize();
+				var bounds = map.createBounds();
+				if (this.markers && this.markers.length>0) {
+					this.markers.forEach(function (marker) {
+						map.extendBoundsWithMarker(bounds, marker);
+					});
 				}
-				if (this.polylines) {
-					for (var p = 0; p < this.polylines.length; p++) {
-						this.map.extendBounds(bounds, this.polylines[p]);
-					}
+				if (this.polylines && this.polylines.length>0) {
+					this.polylines.forEach(function (polyline) {
+						map.extendBounds(bounds, polyline);
+					})
+				}
+				if (this.polygons && this.polygons.length > 0) {
+					this.polygons.forEach(function (polygon) {
+						map.extendBounds(bounds, polygon);
+					})
 				}
-				this.map.fitBounds(bounds);
+				map.fitBounds(bounds);
 			}
 		}
 	}
@@ -634,6 +677,10 @@ export default class TbMapWidgetV2 {
 				name: 'widget-action.marker-click',
 				multiple: false
 			},
+			'polygonClick': {
+				name: 'widget-action.polygon-click',
+				multiple: false
+			},
 			'tooltipAction': {
 				name: 'widget-action.tooltip-tag-action',
 				multiple: true

ui/src/app/widget/lib/openstreet-map.js

@@ -190,7 +190,7 @@ export default class TbOpenStreetMap {
 		this.map.removeLayer(polyline);
 	}
 
-	createPolygon(latLangs, settings) {
+	createPolygon(latLangs, settings, location,  onClickListener, markerArgs) {
 		let polygon = L.polygon(latLangs, {
 			fill: true,
 			fillColor: settings.polygonColor,
@@ -199,6 +199,13 @@ export default class TbOpenStreetMap {
 			fillOpacity: settings.polygonOpacity,
 			opacity: settings.polygonStrokeOpacity
 		}).addTo(this.map);
+
+		if (settings.displayTooltip) {
+			this.createTooltip(polygon, location.dsIndex, settings, markerArgs);
+		}
+		if (onClickListener) {
+			polygon.on('click', onClickListener);
+		}
 		return polygon;
 	}
 
@@ -224,6 +231,7 @@ export default class TbOpenStreetMap {
 
 	setPolygonLatLngs(polygon, latLngs) {
 		polygon.setLatLngs(latLngs);
+		polygon.redraw();
 	}
 
 	fitBounds(bounds) {
@@ -272,7 +280,7 @@ export default class TbOpenStreetMap {
 	}
 
 	extendBounds(bounds, polyline) {
-		if (polyline && polyline.getLatLngs()) {
+		if (polyline && polyline.getLatLngs() && polyline.getBounds()) {
 			bounds.extend(polyline.getBounds());
 		}
 	}

ui/src/app/widget/lib/tencent-map.js

@@ -331,7 +331,7 @@ export default class TbTencentMap {
 	}
 
 	/* eslint-disable no-undef */
-	createPolygon(latLangs, settings) {
+	createPolygon(latLangs, settings, location,  onClickListener, markerArgs) {
 		let polygon = new qq.maps.Polygon({
 			map: this.map,
 			path: latLangs,
@@ -339,8 +339,31 @@ export default class TbTencentMap {
 			fillColor: settings.polygonColor,
 			strokeWeight: settings.polygonStrokeWeight
 		});
+		//initialize-tooltip
+		let popup = new qq.maps.InfoWindow({
+			content: ''
+		});
+		if (!this.tooltips) this.tooltips = [];
+		this.tooltips.push({
+			markerArgs: markerArgs,
+			popup: popup,
+			locationSettings: settings,
+			dsIndex: location.dsIndex
+		});
+
+		if (onClickListener) {
+			qq.maps.event.addListener(polygon, 'click', function (event) {
+				if (settings.displayTooltip) {
+					popup.setMap(this.map);
+					popup.setPosition(event.latLng);
+					popup.open();
+				}
+				onClickListener();
+			});
+		}
 		return polygon;
 	}
+
 	/* eslint-disable no-undef */
 
 	removePolygon (polygon) {

ui/src/app/widget/lib/widget-utils.js

@@ -73,22 +73,24 @@ export function processPattern(pattern, datasources, dsIndex) {
 
 export function fillPattern(pattern, replaceInfo, data) {
     var text = angular.copy(pattern);
-    for (var v = 0; v < replaceInfo.variables.length; v++) {
-        var variableInfo = replaceInfo.variables[v];
-        var txtVal = '';
-        if (variableInfo.dataKeyIndex > -1 && data[variableInfo.dataKeyIndex]) {
-            var varData = data[variableInfo.dataKeyIndex].data;
-            if (varData.length > 0) {
-                var val = varData[varData.length - 1][1];
-                if (isNumber(val)) {
-                    txtVal = padValue(val, variableInfo.valDec, 0);
-                } else {
-                    txtVal = val;
-                }
-            }
-        }
-        text = text.split(variableInfo.variable).join(txtVal);
-    }
+    if (replaceInfo) {
+		for (var v = 0; v < replaceInfo.variables.length; v++) {
+			var variableInfo = replaceInfo.variables[v];
+			var txtVal = '';
+			if (variableInfo.dataKeyIndex > -1 && data[variableInfo.dataKeyIndex]) {
+				var varData = data[variableInfo.dataKeyIndex].data;
+				if (varData.length > 0) {
+					var val = varData[varData.length - 1][1];
+					if (isNumber(val)) {
+						txtVal = padValue(val, variableInfo.valDec, 0);
+					} else {
+						txtVal = val;
+					}
+				}
+			}
+			text = text.split(variableInfo.variable).join(txtVal);
+		}
+	}
     return text;
 }