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/openstreet-map.js

@@ -49,8 +49,8 @@ export default class TbOpenStreetMap {
 
 	updateMarkerLabel(marker, settings) {
 		marker.unbindTooltip();
-        marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+		marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
-            { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
+			{className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
 	}
 
 	updateMarkerColor(marker, color) {
@@ -65,8 +65,8 @@ export default class TbOpenStreetMap {
 			if (settings.showLabel) {
 				marker.unbindTooltip();
 				marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
-                marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+				marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
-                    { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
+					{className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
 			}
 		});
 	}
@@ -90,7 +90,7 @@ export default class TbOpenStreetMap {
 						var icon = L.icon({
 							iconUrl: currentImage.url,
 							iconSize: [width, height],
-                            iconAnchor: [width/2, height],
+							iconAnchor: [width / 2, height],
 							popupAnchor: [0, -height]
 						});
 						var iconInfo = {
@@ -133,8 +133,8 @@ export default class TbOpenStreetMap {
 			marker.setIcon(iconInfo.icon);
 			if (settings.showLabel) {
 				marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
-                marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+				marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
-                    { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
+					{className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
 			}
 			marker.addTo(opMap.map);
 		});
@@ -158,7 +158,7 @@ export default class TbOpenStreetMap {
 		var popup = L.popup();
 		popup.setContent('');
 		marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
-        this.tooltips.push( {
+		this.tooltips.push({
 			markerArgs: markerArgs,
 			popup: popup,
 			locationSettings: settings,
@@ -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) {
@@ -197,7 +233,7 @@ export default class TbOpenStreetMap {
 				this.map.panTo(bounds.getCenter(), {animate: false});
 			} else {
 				var tbMap = this;
-                this.map.once('zoomend', function() {
+				this.map.once('zoomend', function () {
 					if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
 						tbMap.map.setZoom(tbMap.minZoomLevel, {animate: false});
 					}

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

@@ -19,7 +19,7 @@ var tmGlobals = {
 }
 
 export default class TbTencentMap {
-    constructor($containerElement,utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) {
+	constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) {
 		var tbMap = this;
 		this.utils = utils;
 		this.defaultZoomLevel = defaultZoomLevel;
@@ -36,7 +36,7 @@ export default class TbTencentMap {
 
 		function displayError(message) {
 			$containerElement.html( // eslint-disable-line angular/angularelement
-                "<div class='error'>"+ message + "</div>"
+				"<div class='error'>" + message + "</div>"
 			);
 		}
 
@@ -55,7 +55,7 @@ export default class TbTencentMap {
 		/* eslint-disable no-undef */
 
 		function getTencentMapTypeId(mapType) {
-            var mapTypeId =qq.maps.MapTypeId.ROADMAP;
+			var mapTypeId = qq.maps.MapTypeId.ROADMAP;
 			if (mapType) {
 				if (mapType === 'hybrid') {
 					mapTypeId = qq.maps.MapTypeId.HYBRID;
@@ -73,7 +73,7 @@ export default class TbTencentMap {
 		this.mapId = '' + Math.random().toString(36).substr(2, 9);
 		this.apiKey = tmApiKey || '84d6d83e0e51e481e50454ccbe8986b';
 
-        window.tm_authFailure = function() { // eslint-disable-line no-undef, angular/window-service
+		window.tm_authFailure = function () { // eslint-disable-line no-undef, angular/window-service
 			if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
 				tmGlobals.loadingTmId = null;
 				tmGlobals.tmApiKeys[tbMap.apiKey].error = 'Unable to authentificate for tencent Map API.</br>Please check your API key.';
@@ -83,7 +83,7 @@ export default class TbTencentMap {
 
 		this.initMapFunctionName = 'initTencentMap_' + this.mapId;
 
-        window[this.initMapFunctionName] = function() { // eslint-disable-line no-undef, angular/window-service
+		window[this.initMapFunctionName] = function () { // eslint-disable-line no-undef, angular/window-service
 			tmGlobals.tmApiKeys[tbMap.apiKey].loaded = true;
 			initTencentMap();
 			for (var p = 0; p < tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits.length; p++) {
@@ -106,16 +106,16 @@ export default class TbTencentMap {
 					loaded: false,
 					pendingInits: []
 				};
-                var tencentMapScriptRes = 'https://map.qq.com/api/js?v=2.exp&key='+this.apiKey+'&callback='+this.initMapFunctionName;
+				var tencentMapScriptRes = 'https://map.qq.com/api/js?v=2.exp&key=' + this.apiKey + '&callback=' + this.initMapFunctionName;
 
 				tmGlobals.loadingTmId = this.mapId;
-                lazyLoad.load({ type: 'js', path: tencentMapScriptRes }).then( // eslint-disable-line no-undef
+				lazyLoad.load({type: 'js', path: tencentMapScriptRes}).then( // eslint-disable-line no-undef
 					function success() {
 						setTimeout(clearGlobalId, 2000); // eslint-disable-line no-undef, angular/timeout-service
 					},
 					function fail(e) {
 						clearGlobalId();
-                        tmGlobals.tmApiKeys[tbMap.apiKey].error = 'tencent map api load failed!</br>'+e;
+						tmGlobals.tmApiKeys[tbMap.apiKey].error = 'tencent map api load failed!</br>' + e;
 						displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
 					}
 				);
@@ -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 */
@@ -164,10 +166,11 @@ export default class TbTencentMap {
 		this.createMarkerIcon(marker, settings, (iconInfo) => {
 			marker.setIcon(iconInfo.icon);
 			if (marker.label) {
-                marker.label.setOffset(new qq.maps.Size(-100, -iconInfo.size[1]-20));
+				marker.label.setOffset(new qq.maps.Size(-100, -iconInfo.size[1] - 20));
 			}
 		});
 	}
+
 	/* eslint-disable no-undef */
 
 	/* eslint-disable no-undef */
@@ -189,8 +192,8 @@ export default class TbTencentMap {
 						}
 						var icon = new qq.maps.MarkerImage(currentImage.url,
 							new qq.maps.Size(width, height),
-                            new qq.maps.Point(0,0),
+							new qq.maps.Point(0, 0),
-                            new qq.maps.Point(width/2, height),
+							new qq.maps.Point(width / 2, height),
 							new qq.maps.Size(width, height));
 						var iconInfo = {
 							size: [width, height],
@@ -206,6 +209,7 @@ export default class TbTencentMap {
 			this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
 		}
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -213,7 +217,7 @@ export default class TbTencentMap {
 		var pinColor = color.substr(1);
 		var icon = new qq.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
 			new qq.maps.Size(40, 37),
-            new qq.maps.Point(0,0),
+			new qq.maps.Point(0, 0),
 			new qq.maps.Point(10, 37));
 		var iconInfo = {
 			size: [40, 37],
@@ -221,6 +225,7 @@ export default class TbTencentMap {
 		};
 		onMarkerIconReady(iconInfo);
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -236,7 +241,7 @@ export default class TbTencentMap {
 				marker.label = new qq.maps.Label({
 					clickable: false,
 					content: settings.labelText,
-                    offset: new qq.maps.Size(-100, -iconInfo.size[1]-20),
+					offset: new qq.maps.Size(-100, -iconInfo.size[1] - 20),
 					style: tMap.createMarkerLabelStyle(settings),
 					visible: true,
 					position: location,
@@ -270,10 +275,10 @@ export default class TbTencentMap {
 	/* eslint-disable no-undef */
 	createTooltip(marker, dsIndex, settings, markerArgs) {
 		var popup = new qq.maps.InfoWindow({
-            map :this.map
+			map: this.map
 		});
 		var map = this;
-        qq.maps.event.addListener(marker, 'click', function() {
+		qq.maps.event.addListener(marker, 'click', function () {
 			if (settings.autocloseTooltip) {
 				map.tooltips.forEach((tooltip) => {
 					tooltip.popup.close();
@@ -282,13 +287,14 @@ export default class TbTencentMap {
 			popup.open();
 			popup.setPosition(marker);
 		});
-        this.tooltips.push( {
+		this.tooltips.push({
 			markerArgs: markerArgs,
 			popup: popup,
 			locationSettings: settings,
 			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) {
@@ -329,7 +376,7 @@ export default class TbTencentMap {
 			this.map.setCenter(bounds.getCenter());
 		} else {
 			var tbMap = this;
-            qq.maps.event.addListenerOnce(this.map, 'bounds_changed', function() { // eslint-disable-line no-undef
+			qq.maps.event.addListenerOnce(this.map, 'bounds_changed', function () { // eslint-disable-line no-undef
 				if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
 					tbMap.map.setZoom(tbMap.minZoomLevel);
 				}
@@ -337,6 +384,7 @@ export default class TbTencentMap {
 			this.map.fitBounds(bounds);
 		}
 	}
+
 	/* eslint-enable no-undef,no-unused-vars */
 
 	createLatLng(lat, lng) {