diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index f4247d152e..1abd64093d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -775,7 +775,7 @@ export default abstract class LeafletMap { if (coordinates.length === 1) { coordinates = coordinates[0]; } - if (e.shape === 'Rectangle') { + 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()]; 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/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index ab3abc7f7f..908952e7d2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts @@ -15,7 +15,7 @@ /// import L, { LatLngExpression, LeafletMouseEvent } from 'leaflet'; -import { createTooltip } from './maps-utils'; +import { createTooltip, isCutPolygon } from './maps-utils'; import { fillPattern, functionValueCalculator, @@ -39,7 +39,7 @@ export class Polygon { const polygonColor = this.getPolygonColor(settings); const polygonStrokeColor = this.getPolygonStrokeColor(settings); const polyData = data[this.settings.polygonKeyName]; - const polyConstructor = polyData.length > 2 ? L.polygon : L.rectangle; + const polyConstructor = isCutPolygon(polyData) || polyData.length > 2 ? L.polygon : L.rectangle; this.leafletPoly = polyConstructor(polyData, { fill: true, fillColor: polygonColor, @@ -102,7 +102,7 @@ export class Polygon { this.data = data; this.dataSources = dataSources; const polyData = data[this.settings.polygonKeyName]; - if (polyData.length > 2) { + if (isCutPolygon(polyData) || polyData.length > 2) { if (this.leafletPoly instanceof L.Rectangle) { this.map.removeLayer(this.leafletPoly); const polygonColor = this.getPolygonColor(settings);