Added polygon functional for OpenStreet, Tencent and Google Latest Value Maps

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

@@ -314,6 +314,48 @@ export default class TbGoogleMap {
         polyline.setMap(null);
     }
 
+
+	createPolygon(latLangs, settings) {
+		let polygon = new google.maps.Polygon({
+			map: this.map,
+			paths: latLangs,
+			strokeColor: settings.polygonStrokeColor,
+			strokeOpacity: settings.polygonStrokeColor,
+			fillColor: settings.polygonColor,
+			fillOpacity: settings.polygonOpacity,
+			strokeWeight: settings.polygonStrokeWeight
+		});
+		return polygon;
+	}
+	/* eslint-disable no-undef */
+
+	removePolygon (polygon) {
+		polygon.setMap(null);
+	}
+
+	/* eslint-disable no-undef,no-unused-vars */
+	updatePolygonColor (polygon, settings, color) {
+		let options = {
+			paths: polygon.getPaths(),
+			map: this.map,
+			strokeColor: color,
+			fillColor: color,
+			strokeWeight: settings.polygonStrokeWeight
+		}
+
+	}
+	/* eslint-disable no-undef ,no-unused-vars*/
+
+
+	getPolygonLatLngs(polygon) {
+		return polygon.getPaths().getArray();
+	}
+
+	setPolygonLatLngs(polygon, latLngs) {
+		polygon.setPaths(latLngs);
+	}
+
+
     /* eslint-disable no-undef */
     fitBounds(bounds) {
         if (this.dontFitMapBounds && this.defaultZoomLevel) {

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

@@ -369,6 +369,21 @@ export default class TbImageMap {
     removePolyline(/*polyline*/) {
     }
 
+	createPolygon(/*latLangs, settings*/) {
+	}
+
+	removePolygon(/*latLangs, settings*/) {
+	}
+
+	updatePolygonColor(/*latLangs, settings*/) {
+	}
+
+	getPolygonLatLngs(/*latLangs, settings*/) {
+	}
+
+	setPolygonLatLngs(/*latLangs, settings*/) {
+	}
+
     fitBounds() {
     }
 

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

@@ -33,6 +33,7 @@ export default class TbMapWidgetV2 {
 		this.utils = ctx.$scope.$injector.get('utils');
 		this.drawRoutes = drawRoutes;
 		this.markers = [];
+		this.polygons = [];
 		if (this.drawRoutes) {
 			this.polylines = [];
 		}
@@ -42,7 +43,8 @@ export default class TbMapWidgetV2 {
 		var settings = ctx.settings;
 
 		this.callbacks = {};
-        this.callbacks.onLocationClick = function(){};
+		this.callbacks.onLocationClick = function () {
+		};
 
 		if (settings.defaultZoomLevel) {
 			if (settings.defaultZoomLevel > 0 && settings.defaultZoomLevel < 21) {
@@ -61,8 +63,6 @@ export default class TbMapWidgetV2 {
 		var minZoomLevel = this.drawRoutes ? 18 : 15;
 
 
-
-
 		var initCallback = function () {
 			tbMap.update();
 			tbMap.resize();
@@ -109,9 +109,13 @@ export default class TbMapWidgetV2 {
 				if (location.polyline) {
 					tbMap.map.removePolyline(location.polyline);
 				}
+				if (location.polygon) {
+					tbMap.map.removePolygon(location.polygon);
+				}
 			});
 			this.locations = null;
 			this.markers = [];
+			this.polygons = [];
 			if (this.drawRoutes) {
 				this.polylines = [];
 			}
@@ -133,6 +137,7 @@ export default class TbMapWidgetV2 {
 		} else {
 			this.locationSettings.latKeyName = this.ctx.settings.latKeyName || 'latitude';
 			this.locationSettings.lngKeyName = this.ctx.settings.lngKeyName || 'longitude';
+			this.locationSettings.polygonKeyName = this.ctx.settings.polygonKeyName || 'coordinates';
 		}
 
 		this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + this.locationSettings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + this.locationSettings.lngKeyName + ":7}";
@@ -140,9 +145,15 @@ export default class TbMapWidgetV2 {
 		this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
 		this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
 		this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
-        this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000',
+		this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false;
+		this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
 		this.locationSettings.label = this.ctx.settings.label || "${entityName}";
 		this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
+		this.locationSettings.polygonColor = this.ctx.settings.polygonColor ? tinycolor(this.ctx.settings.polygonColor).toHexString() : "#0000ff";
+		this.locationSettings.polygonStrokeColor = this.ctx.settings.polygonStrokeColor ? tinycolor(this.ctx.settings.polygonStrokeColor).toHexString() : "#fe0001";
+		this.locationSettings.polygonOpacity = angular.isDefined(this.ctx.settings.polygonOpacity) ? this.ctx.settings.polygonOpacity : 0.5;
+		this.locationSettings.polygonStrokeOpacity = angular.isDefined(this.ctx.settings.polygonStrokeOpacity) ? this.ctx.settings.polygonStrokeOpacity : 1;
+		this.locationSettings.polygonStrokeWeight = angular.isDefined(this.ctx.settings.polygonStrokeWeight) ? this.ctx.settings.polygonStrokeWeight : 1;
 
 		this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true;
 		if (angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) {
@@ -170,6 +181,14 @@ export default class TbMapWidgetV2 {
 				this.locationSettings.colorFunction = null;
 			}
 		}
+		this.locationSettings.usePolygonColorFunction = this.ctx.settings.usePolygonColorFunction === true;
+		if (angular.isDefined(this.ctx.settings.polygonColorFunction) && this.ctx.settings.polygonColorFunction.length > 0) {
+			try {
+				this.locationSettings.polygonColorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.polygonColorFunction);
+			} catch (e) {
+				this.locationSettings.polygonColorFunction = null;
+			}
+		}
 
 		this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true;
 		if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) {
@@ -216,6 +235,7 @@ export default class TbMapWidgetV2 {
 
 		var tbMap = this;
 
+
 		function updateLocationLabel(location, dataMap) {
 			if (location.settings.showLabel) {
 				if (location.settings.useLabelFunction && location.settings.labelFunction) {
@@ -245,7 +265,8 @@ export default class TbMapWidgetV2 {
 				var color;
 				try {
 					color = location.settings.colorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
-                } catch (e) {/**/}
+				} catch (e) {/**/
+				}
 				if (!color) {
 					color = '#FE7569';
 				}
@@ -255,6 +276,22 @@ export default class TbMapWidgetV2 {
 			}
 		}
 
+		function calculateLocationPolygonColor(location, dataMap) {
+			if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) {
+				var color;
+				try {
+					color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
+				} catch (e) {/**/
+				}
+				if (!color) {
+					color = '#007800';
+				}
+				return tinycolor(color).toHexString();
+			} else {
+				return location.settings.polygonColor;
+			}
+		}
+
 		function updateLocationColor(location, color, image) {
 			if (!location.settings.calculatedColor || location.settings.calculatedColor !== color) {
 				if (!location.settings.useMarkerImage && !image) {
@@ -267,6 +304,16 @@ export default class TbMapWidgetV2 {
 			}
 		}
 
+		function updateLocationPolygonColor(location, color) {
+			if (!location.settings.calculatedPolygonColor || location.settings.calculatedPolygonColor !== color) {
+				location.settings.calculatedPolygonColor = color;
+				if (location.polygon) {
+					tbMap.map.updatePolygonColor(location.polygon, location.settings, color);
+				}
+
+			}
+		}
+
 		function calculateLocationMarkerImage(location, dataMap) {
 			if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) {
 				var image = null;
@@ -291,8 +338,10 @@ export default class TbMapWidgetV2 {
 		function updateLocationStyle(location, dataMap) {
 			updateLocationLabel(location, dataMap);
 			var color = calculateLocationColor(location, dataMap);
+			var polygonColor = calculateLocationPolygonColor(location, dataMap);
 			var image = calculateLocationMarkerImage(location, dataMap);
 			updateLocationColor(location, color, image);
+			if (location.settings.usePolygonColorFunction) updateLocationPolygonColor(location, polygonColor);
 			updateLocationMarkerIcon(location, image);
 		}
 
@@ -377,6 +426,21 @@ 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);
@@ -415,6 +479,7 @@ export default class TbMapWidgetV2 {
 				} else if (nameToCheck === tbMap.locationSettings.lngKeyName) {
 					lngIndex = i;
 				}
+
 				if (latIndex > -1 && lngIndex > -1) {
 					var location = {
 						latIndex: latIndex,
@@ -431,7 +496,6 @@ export default class TbMapWidgetV2 {
 						location.settings.tooltipPattern = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.tooltipPattern);
 						location.settings.tooltipReplaceInfo = processPattern(location.settings.tooltipPattern, datasources, currentDatasourceIndex);
 					}
-
 					tbMap.locations.push(location);
 					updateLocation(location, data, dataMap);
 					if (location.polyline) {
@@ -447,8 +511,20 @@ export default class TbMapWidgetV2 {
 			tbMap.map.fitBounds(bounds);
 		}
 
-        function updateLocations(data, datasources) {
+		function mapPolygonArray (rawArray) {
+			let latLngArray = rawArray.map(function (el) {
+				if (el.length === 2) {
+					return tbMap.map.createLatLng(el[0], el[1]);
+				} else if (el.length > 2) {
+					return mapPolygonArray(el);
+				} else {
+					return tbMap.map.createLatLng(false);
+				}
+			});
+			return latLngArray;
+		}
 
+		function updateLocations(data, datasources) {
 			var locationsChanged = false;
 			var bounds = tbMap.map.createBounds();
 			var dataMap = toLabelValueMap(data, datasources);
@@ -488,6 +564,7 @@ export default class TbMapWidgetV2 {
 			content = fillPattern(settings.tooltipPattern, settings.tooltipReplaceInfo, data);
 			return fillPatternWithActions(content, 'onTooltipAction', tooltip.markerArgs);
 		}
+
 		if (this.map && this.map.inited() && this.subscription) {
 			if (this.subscription.data) {
 				if (!this.locations) {
@@ -503,6 +580,7 @@ export default class TbMapWidgetV2 {
 				}
 			}
 		}
+
 	}
 
 	resize() {
@@ -668,8 +746,7 @@ const openstreetMapSettingsSchema =
 					"default": "OpenStreetMap.Mapnik"
 				}
 			},
-            "required":[
+			"required": []
-            ]
 		},
 		"form": [
 			{
@@ -791,6 +868,48 @@ const commonMapSettingsSchema =
 					"title": "Color function: f(data, dsData, dsIndex)",
 					"type": "string"
 				},
+				"showPolygon": {
+					"title": "Show polygon",
+					"type": "boolean",
+					"default": false
+				},
+				"polygonKeyName": {
+					"title": "Polygon key name",
+					"type": "string",
+					"default": "coordinates"
+				},
+				"polygonColor": {
+					"title": "Polygon color",
+					"type": "string"
+				},
+				"polygonOpacity": {
+					"title": "Polygon opacity",
+					"type": "number",
+					"default": 0.5
+				},
+				"polygonStrokeColor": {
+					"title": "Stroke color",
+					"type": "string"
+				},
+				"polygonStrokeOpacity": {
+					"title": "Stroke opacity",
+					"type": "number",
+					"default": 1
+				},
+				"polygonStrokeWeight": {
+					"title": "Stroke weight",
+					"type": "number",
+					"default": 1
+				},
+				"usePolygonColorFunction": {
+					"title": "Use polygon color function",
+					"type": "boolean",
+					"default": false
+				},
+				"polygonColorFunction": {
+					"title": "Polygon Color function: f(data, dsData, dsIndex)",
+					"type": "string"
+				},
 				"markerImage": {
 					"title": "Custom marker image",
 					"type": "string"
@@ -851,6 +970,20 @@ const commonMapSettingsSchema =
 			{
 				"key": "colorFunction",
 				"type": "javascript"
+			}, "showPolygon", "polygonKeyName",
+			{
+				"key": "polygonColor",
+				"type": "color"
+			},
+			"polygonOpacity",
+			{
+				"key": "polygonStrokeColor",
+				"type": "color"
+			},
+			"polygonStrokeOpacity","polygonStrokeWeight","usePolygonColorFunction",
+			{
+				"key": "polygonColorFunction",
+				"type": "javascript"
 			},
 			{
 				"key": "markerImage",
@@ -891,8 +1024,7 @@ const routeMapSettingsSchema =
 					"default": 1.0
 				}
 			},
-            "required":[
+			"required": []
-            ]
 		},
 		"form": [
 			"strokeWeight",

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

@@ -190,6 +190,42 @@ export default class TbOpenStreetMap {
 		this.map.removeLayer(polyline);
 	}
 
+	createPolygon(latLangs, settings) {
+		let polygon = L.polygon(latLangs, {
+			fill: true,
+			fillColor: settings.polygonColor,
+			color: settings.polygonStrokeColor,
+			weight: settings.polygonStrokeWeight,
+			fillOpacity: settings.polygonOpacity,
+			opacity: settings.polygonStrokeOpacity
+		}).addTo(this.map);
+		return polygon;
+	}
+
+	removePolygon(polygon) {
+		this.map.removeLayer(polygon);
+	}
+
+	updatePolygonColor(polygon, settings, color) {
+		let style = {
+			fill: true,
+			fillColor: color,
+			color: color,
+			weight: settings.polygonStrokeWeight,
+			fillOpacity: settings.polygonOpacity,
+			opacity: settings.polygonStrokeOpacity
+		};
+		polygon.setStyle(style);
+	}
+
+	getPolygonLatLngs(polygon) {
+		return polygon.getLatLngs();
+	}
+
+	setPolygonLatLngs(polygon, latLngs) {
+		polygon.setLatLngs(latLngs);
+	}
+
 	fitBounds(bounds) {
 		if (bounds.isValid()) {
 			if (this.dontFitMapBounds && this.defaultZoomLevel) {

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

@@ -149,6 +149,7 @@ export default class TbTencentMap {
 			marker.label.setStyle(this.createMarkerLabelStyle(settings));
 		}
 	}
+
 	/* eslint-enable no-undef,no-unused-vars */
 
 	/* eslint-disable no-undef,no-unused-vars */
@@ -157,6 +158,7 @@ export default class TbTencentMap {
 			marker.setIcon(iconInfo.icon);
 		});
 	}
+
 	/* eslint-enable no-undef,,no-unused-vars */
 
 	/* eslint-disable no-undef */
@@ -168,6 +170,7 @@ export default class TbTencentMap {
 			}
 		});
 	}
+
 	/* eslint-disable no-undef */
 
 	/* eslint-disable no-undef */
@@ -206,6 +209,7 @@ export default class TbTencentMap {
 			this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
 		}
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -221,6 +225,7 @@ export default class TbTencentMap {
 		};
 		onMarkerIconReady(iconInfo);
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -289,6 +294,7 @@ export default class TbTencentMap {
 			dsIndex: dsIndex
 		});
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -302,6 +308,7 @@ export default class TbTencentMap {
 		};
 		polyline.setOptions(options);
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -316,12 +323,52 @@ export default class TbTencentMap {
 
 		return polyline;
 	}
+
 	/* eslint-enable no-undef */
 
 	removePolyline(polyline) {
 		polyline.setMap(null);
 	}
 
+	/* eslint-disable no-undef */
+	createPolygon(latLangs, settings) {
+		let polygon = new qq.maps.Polygon({
+			map: this.map,
+			path: latLangs,
+			strokeColor: settings.polygonStrokeColor,
+			fillColor: settings.polygonColor,
+			strokeWeight: settings.polygonStrokeWeight
+		});
+		return polygon;
+	}
+	/* eslint-disable no-undef */
+
+	removePolygon (polygon) {
+		polygon.setMap(null);
+	}
+
+	/* eslint-disable no-undef,no-unused-vars */
+	updatePolygonColor (polygon, settings, color) {
+		let options = {
+			path: polygon.getPath(),
+			map: this.map,
+			strokeColor: color,
+			fillColor: color,
+			strokeWeight: settings.polygonStrokeWeight
+		}
+
+	}
+	/* eslint-disable no-undef ,no-unused-vars*/
+
+
+	getPolygonLatLngs(polygon) {
+		return polygon.getPath().getArray();
+	}
+
+	setPolygonLatLngs(polygon, latLngs) {
+		polygon.setPath(latLngs);
+	}
+
 	/* eslint-disable no-undef ,no-unused-vars*/
 	fitBounds(bounds) {
 		if (this.dontFitMapBounds && this.defaultZoomLevel) {
@@ -337,6 +384,7 @@ export default class TbTencentMap {
 			this.map.fitBounds(bounds);
 		}
 	}
+
 	/* eslint-enable no-undef,no-unused-vars */
 
 	createLatLng(lat, lng) {