`
- });
+ style="transform: translate(-10px, -10px)
+ rotate(${data.rotationAngle}deg);
+ ${style}">
`
+ }), size: [30, 30]};
} else {
this.options.icon = null;
}
@@ -764,6 +775,14 @@ export default abstract class LeafletMap {
if (coordinates.length === 1) {
coordinates = coordinates[0];
}
+ if (e.shape === 'Rectangle' && coordinates.length === 1) {
+ // @ts-ignore
+ const bounds: L.LatLngBounds = e.layer.getBounds();
+ const boundsArray = [bounds.getNorthWest(), bounds.getNorthEast(), bounds.getSouthWest(), bounds.getSouthEast()];
+ if (coordinates.every(point => boundsArray.find(boundPoint => boundPoint.equals(point)) !== undefined)) {
+ coordinates = [bounds.getNorthWest(), bounds.getSouthEast()];
+ }
+ }
this.saveLocation(data, this.convertPolygonToCustomFormat(coordinates)).subscribe(() => {});
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index 5b99b792e9..e65479f588 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
@@ -17,13 +17,15 @@
import { Datasource } from '@app/shared/models/widget.models';
import { EntityType } from '@shared/models/entity-type.models';
import tinycolor from 'tinycolor2';
+import { BaseIconOptions, Icon } from 'leaflet';
export const DEFAULT_MAP_PAGE_SIZE = 16384;
export const DEFAULT_ZOOM_LEVEL = 8;
export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
-export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
+export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => MarkerImageInfo;
export type PosFuncton = (origXPos, origYPos) => { x, y };
+export type MarkerIconReadyFunction = (icon: MarkerIconInfo) => void;
export type MapSettings = {
draggableMarker: boolean;
@@ -51,7 +53,6 @@ export type MapSettings = {
useDefaultCenterPosition?: boolean;
gmDefaultMapType?: string;
useLabelFunction: boolean;
- icon?: any;
zoomOnClick: boolean,
maxZoom: number,
showCoverageOnHover: boolean,
@@ -73,10 +74,22 @@ export enum MapProviders {
tencent = 'tencent-map'
}
+export type MarkerImageInfo = {
+ url: string;
+ size: number;
+ markerOffset?: [number, number];
+ tooltipOffset?: [number, number];
+};
+
+export type MarkerIconInfo = {
+ icon: Icon
;
+ size: [number, number];
+};
+
export type MarkerSettings = {
tooltipPattern?: any;
tooltipAction: { [name: string]: actionsHandler };
- icon?: any;
+ icon?: MarkerIconInfo;
showLabel?: boolean;
label: string;
labelColor: string;
@@ -91,7 +104,7 @@ export type MarkerSettings = {
autocloseTooltip: boolean;
showTooltipAction: string;
useClusterMarkers: boolean;
- currentImage?: string;
+ currentImage?: MarkerImageInfo;
useMarkerImageFunction?: boolean;
markerImages?: string[];
markerImageSize: number;
@@ -104,6 +117,8 @@ export type MarkerSettings = {
markerImageFunction?: MarkerImageFunction;
markerOffsetX: number;
markerOffsetY: number;
+ tooltipOffsetX: number;
+ tooltipOffsetY: number;
};
export interface FormattedData {
@@ -131,6 +146,11 @@ export type PolygonSettings = {
polygonStrokeWeight: number;
polygonStrokeColor: string;
polygonColor: string;
+ showPolygonLabel?: boolean;
+ polygonLabel: string;
+ polygonLabelColor: string;
+ polygonLabelText: string;
+ usePolygonLabelFunction: boolean;
showPolygonTooltip: boolean;
autocloseTooltip: boolean;
showTooltipAction: string;
@@ -139,8 +159,11 @@ export type PolygonSettings = {
usePolygonTooltipFunction: boolean;
polygonClick: { [name: string]: actionsHandler };
usePolygonColorFunction: boolean;
+ usePolygonStrokeColorFunction: boolean;
polygonTooltipFunction: GenericFunction;
polygonColorFunction?: GenericFunction;
+ polygonStrokeColorFunction?: GenericFunction;
+ polygonLabelFunction?: GenericFunction;
editablePolygon: boolean;
};
@@ -215,6 +238,8 @@ export const defaultSettings: any = {
yPosKeyName: 'yPos',
markerOffsetX: 0.5,
markerOffsetY: 1,
+ tooltipOffsetX: 0,
+ tooltipOffsetY: -1,
latKeyName: 'latitude',
lngKeyName: 'longitude',
polygonKeyName: 'coordinates',
@@ -227,8 +252,10 @@ export const defaultSettings: any = {
showPolygon: false,
labelColor: '#000000',
color: '#FE7569',
+ showPolygonLabel: false,
polygonColor: '#0000ff',
polygonStrokeColor: '#fe0001',
+ polygonLabelColor: '#000000',
polygonOpacity: 0.5,
polygonStrokeOpacity: 1,
polygonStrokeWeight: 1,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index a2385b2877..565887b160 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -258,17 +258,20 @@ export class MapWidgetController implements MapWidgetInterface {
settings.mapProviderHere = hereProviders[0];
}
}
- const customOptions = {
+ const customOptions: Partial = {
provider: this.provider,
mapUrl: settings?.mapImageUrl,
labelFunction: parseFunction(settings.labelFunction, functionParams),
tooltipFunction: parseFunction(settings.tooltipFunction, functionParams),
colorFunction: parseFunction(settings.colorFunction, functionParams),
colorPointFunction: parseFunction(settings.colorPointFunction, functionParams),
+ polygonLabelFunction: parseFunction(settings.polygonLabelFunction, functionParams),
polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
+ polygonStrokeColorFunction: parseFunction(settings.polygonStrokeColorFunction, functionParams),
polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams),
markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
labelColor: this.ctx.widgetConfig.color,
+ polygonLabelColor: this.ctx.widgetConfig.color,
polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName,
tooltipPattern: settings.tooltipPattern ||
'${entityName}
Latitude: ${' +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index c76a6de48e..9c2fbcdcd5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -56,3 +56,10 @@ export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | Poly
}
});
}
+
+export function isCutPolygon(data): boolean {
+ if (Array.isArray(data[0]) && Array.isArray(data[0][0])) {
+ return true;
+ }
+ return false;
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
index 147386685c..f45d08f9e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
@@ -29,6 +29,15 @@
box-shadow: none;
}
+.tb-polygon-label {
+ border: none;
+ background: none;
+ box-shadow: none;
+ &:before {
+ content: none;
+ }
+}
+
.leaflet-container {
background-color: white;
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index 5550706402..85020b7f33 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
@@ -15,7 +15,7 @@
///
import L, { Icon, LeafletMouseEvent } from 'leaflet';
-import { FormattedData, MarkerSettings } from './map-models';
+import { FormattedData, MarkerIconInfo, MarkerIconReadyFunction, MarkerImageInfo, MarkerSettings } from './map-models';
import {
bindPopupActions,
createTooltip,
@@ -33,6 +33,7 @@ import LeafletMap from './leaflet-map';
export class Marker {
leafletMarker: L.Marker;
+ labelOffset: L.LatLngTuple;
tooltipOffset: L.LatLngTuple;
markerOffset: L.LatLngTuple;
tooltip: L.Popup;
@@ -49,11 +50,12 @@ export class Marker {
isDefined(settings.markerOffsetY) ? settings.markerOffsetY : 1,
];
- this.createMarkerIcon((iconInfo) => {
- this.leafletMarker.setIcon(iconInfo.icon);
- this.tooltipOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
- this.updateMarkerLabel(settings);
- });
+ this.tooltipOffset = [
+ isDefined(settings.tooltipOffsetX) ? settings.tooltipOffsetX : 0,
+ isDefined(settings.tooltipOffsetY) ? settings.tooltipOffsetY : -1,
+ ];
+
+ this.updateMarkerIcon(settings);
if (settings.showTooltip) {
this.tooltip = createTooltip(this.leafletMarker, settings, data.$datasource);
@@ -111,7 +113,7 @@ export class Marker {
}
settings.labelText = fillPattern(this.map.markerLabelText, this.map.replaceInfoLabelMarker, this.data);
this.leafletMarker.bindTooltip(`