diff --git a/ui/src/app/locale/locale.constant-de_DE.json b/ui/src/app/locale/locale.constant-de_DE.json index b777b18b0f..fb642f2112 100644 --- a/ui/src/app/locale/locale.constant-de_DE.json +++ b/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" } diff --git a/ui/src/app/locale/locale.constant-en_US.json b/ui/src/app/locale/locale.constant-en_US.json index 4f12ee056e..a6bd480c6e 100644 --- a/ui/src/app/locale/locale.constant-en_US.json +++ b/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" } diff --git a/ui/src/app/locale/locale.constant-es_ES.json b/ui/src/app/locale/locale.constant-es_ES.json index 8190157e7a..3f97971693 100644 --- a/ui/src/app/locale/locale.constant-es_ES.json +++ b/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" } }, diff --git a/ui/src/app/locale/locale.constant-fr_FR.json b/ui/src/app/locale/locale.constant-fr_FR.json index 5b4edd95c4..4102c91737 100644 --- a/ui/src/app/locale/locale.constant-fr_FR.json +++ b/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" } }, diff --git a/ui/src/app/locale/locale.constant-it_IT.json b/ui/src/app/locale/locale.constant-it_IT.json index 4c73548df6..1f78af11e5 100644 --- a/ui/src/app/locale/locale.constant-it_IT.json +++ b/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" } diff --git a/ui/src/app/locale/locale.constant-ja_JA.json b/ui/src/app/locale/locale.constant-ja_JA.json index fea4ab335d..6a6a22a907 100644 --- a/ui/src/app/locale/locale.constant-ja_JA.json +++ b/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": "ツールチップのタグアクション" } diff --git a/ui/src/app/locale/locale.constant-ko_KR.json b/ui/src/app/locale/locale.constant-ko_KR.json index 4ddd9b5afa..2fa49ec835 100644 --- a/ui/src/app/locale/locale.constant-ko_KR.json +++ b/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" } diff --git a/ui/src/app/locale/locale.constant-ru_RU.json b/ui/src/app/locale/locale.constant-ru_RU.json index c087649789..7044d7ac68 100644 --- a/ui/src/app/locale/locale.constant-ru_RU.json +++ b/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": "Действие при подсказке" } }, diff --git a/ui/src/app/locale/locale.constant-tr_TR.json b/ui/src/app/locale/locale.constant-tr_TR.json index 3f2e37e0f7..098922bc8e 100644 --- a/ui/src/app/locale/locale.constant-tr_TR.json +++ b/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" } }, diff --git a/ui/src/app/locale/locale.constant-zh_CN.json b/ui/src/app/locale/locale.constant-zh_CN.json index bacddc4763..8f4f844b49 100644 --- a/ui/src/app/locale/locale.constant-zh_CN.json +++ b/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": "提示标签动作" } }, diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index 3f7be4fdbd..6a05713762 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/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 */ diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index fed9cb5de8..4c6248f85b 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/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); + }) } - this.map.fitBounds(bounds); + if (this.polygons && this.polygons.length > 0) { + this.polygons.forEach(function (polygon) { + map.extendBounds(bounds, polygon); + }) + } + 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 diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 25e454f37a..b93eab2779 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/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()); } } diff --git a/ui/src/app/widget/lib/tencent-map.js b/ui/src/app/widget/lib/tencent-map.js index 17a61216df..f2608be2d9 100644 --- a/ui/src/app/widget/lib/tencent-map.js +++ b/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) { diff --git a/ui/src/app/widget/lib/widget-utils.js b/ui/src/app/widget/lib/widget-utils.js index 6ddeba503d..fa75ab6d0a 100644 --- a/ui/src/app/widget/lib/widget-utils.js +++ b/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; }