From 385b1484ee4d58c2b58744fd97a8c2db8e6aaf53 Mon Sep 17 00:00:00 2001 From: Kalutka Zhenya Date: Mon, 11 Jan 2021 18:38:42 +0200 Subject: [PATCH 1/5] polygonMapFixV2 --- .../components/widget/lib/maps/leaflet-map.ts | 52 ++++++++++++++++--- 1 file changed, 45 insertions(+), 7 deletions(-) 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 54845c68c1..f08a830558 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 @@ -16,12 +16,12 @@ import L, { FeatureGroup, - Icon, + Icon, LatLng, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroup, - MarkerClusterGroupOptions + MarkerClusterGroupOptions, Projection } from 'leaflet'; import tinycolor from 'tinycolor2'; import 'leaflet-providers'; @@ -208,14 +208,52 @@ export default abstract class LeafletMap { if (this.options.showPolygon && this.options.editablePolygon) { let mousePositionOnMap: L.LatLng[]; let addPolygon: L.Control; + let latlng1: LatLng; this.map.on('mousemove', (e: L.LeafletMouseEvent) => { - const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; - const latlng1 = e.latlng; - const latlng2 = L.latLng(e.latlng.lat, e.latlng.lng + polygonOffset); - const latlng3 = L.latLng(e.latlng.lat - polygonOffset, e.latlng.lng); - mousePositionOnMap = [latlng1, latlng2, latlng3]; + latlng1 = e.latlng; }); + const dragListener = (e: L.DragEndEvent) => { + const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; + + if(this.options.provider !== MapProviders.image) { + if (latlng1.lng > 180-polygonOffset) { + latlng1.lng = 180-polygonOffset; + } else if (latlng1.lng < -180) { + latlng1.lng = -180; + } + + const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; + if(latlng1.lat > maxLatitude){ + latlng1.lat = maxLatitude; + }else if(latlng1.lat < -maxLatitude + polygonOffset){ + latlng1.lat = -maxLatitude + polygonOffset; + } + } + + const latlng2 = L.latLng(latlng1.lat, latlng1.lng + polygonOffset); + const latlng3 = L.latLng(latlng1.lat - polygonOffset, latlng1.lng); + mousePositionOnMap = [latlng1, latlng2, latlng3]; + + if(this.options.provider === MapProviders.image) { + for (let i = 0; i < mousePositionOnMap.length; i++) { + let convert = this.convertToCustomFormat(mousePositionOnMap[i]) + mousePositionOnMap[i].lat = convert['latitude']; + mousePositionOnMap[i].lng = convert['longitude']; + if (convert['xPos']== 1 && (i == 0 || i == 2)) { + mousePositionOnMap[i].lng -= 10; + } else if (convert['xPos'] == 0 && i == 1) { + mousePositionOnMap[i].lng += 10; + } + if (convert['yPos']== 0 && i == 2) { + mousePositionOnMap[i].lat -= 10; + } else if (convert['yPos'] == 1 && (i == 0 || i == 1)) { + mousePositionOnMap[i].lat += 10; + } + } + } + + if (e.type === 'dragend' && mousePositionOnMap) { const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); this.addPolygons.push(newPolygon); From 6932a32b876c16931926c1e15cafc0ffcb04422d Mon Sep 17 00:00:00 2001 From: Kalutka Zhenya Date: Tue, 12 Jan 2021 11:56:31 +0200 Subject: [PATCH 2/5] change polygon script for image map, Refactoring --- .../components/widget/lib/maps/leaflet-map.ts | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) 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 f08a830558..19f9f18680 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 @@ -216,14 +216,29 @@ export default abstract class LeafletMap { const dragListener = (e: L.DragEndEvent) => { const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; - if(this.options.provider !== MapProviders.image) { - if (latlng1.lng > 180-polygonOffset) { - latlng1.lng = 180-polygonOffset; + if(this.options.provider === MapProviders.image) { + latlng1.lng += polygonOffset; + latlng1.lat -= polygonOffset; + let convert = this.convertToCustomFormat(latlng1); + latlng1.lat = convert['latitude']; + latlng1.lng = convert['longitude']; + + if (convert['xPos'] !== 0) { + latlng1.lng -= polygonOffset; + } + + if (convert['yPos'] !== 0) { + latlng1.lat += polygonOffset; + } + } else { + const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; + + if (latlng1.lng > 180 - polygonOffset) { + latlng1.lng = 180 - polygonOffset; } else if (latlng1.lng < -180) { latlng1.lng = -180; } - const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; if(latlng1.lat > maxLatitude){ latlng1.lat = maxLatitude; }else if(latlng1.lat < -maxLatitude + polygonOffset){ @@ -235,25 +250,6 @@ export default abstract class LeafletMap { const latlng3 = L.latLng(latlng1.lat - polygonOffset, latlng1.lng); mousePositionOnMap = [latlng1, latlng2, latlng3]; - if(this.options.provider === MapProviders.image) { - for (let i = 0; i < mousePositionOnMap.length; i++) { - let convert = this.convertToCustomFormat(mousePositionOnMap[i]) - mousePositionOnMap[i].lat = convert['latitude']; - mousePositionOnMap[i].lng = convert['longitude']; - if (convert['xPos']== 1 && (i == 0 || i == 2)) { - mousePositionOnMap[i].lng -= 10; - } else if (convert['xPos'] == 0 && i == 1) { - mousePositionOnMap[i].lng += 10; - } - if (convert['yPos']== 0 && i == 2) { - mousePositionOnMap[i].lat -= 10; - } else if (convert['yPos'] == 1 && (i == 0 || i == 1)) { - mousePositionOnMap[i].lat += 10; - } - } - } - - if (e.type === 'dragend' && mousePositionOnMap) { const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); this.addPolygons.push(newPolygon); From 93155fb19d58720c06fe8db45e8853318bb85b58 Mon Sep 17 00:00:00 2001 From: Kalutka Zhenya Date: Thu, 14 Jan 2021 17:48:12 +0200 Subject: [PATCH 3/5] Update script for maps --- .../components/widget/lib/maps/leaflet-map.ts | 79 +++++++++---------- .../widget/lib/maps/providers/image-map.ts | 18 ++++- 2 files changed, 51 insertions(+), 46 deletions(-) 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 19f9f18680..efe4b6dbdd 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 @@ -206,55 +206,30 @@ export default abstract class LeafletMap { addPolygonControl() { if (this.options.showPolygon && this.options.editablePolygon) { - let mousePositionOnMap: L.LatLng[]; + let polygonPoints: L.LatLng[]; let addPolygon: L.Control; - let latlng1: LatLng; + let mousePositionOnMap: LatLng; this.map.on('mousemove', (e: L.LeafletMouseEvent) => { - latlng1 = e.latlng; + mousePositionOnMap = e.latlng; }); const dragListener = (e: L.DragEndEvent) => { const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; - if(this.options.provider === MapProviders.image) { - latlng1.lng += polygonOffset; - latlng1.lat -= polygonOffset; - let convert = this.convertToCustomFormat(latlng1); - latlng1.lat = convert['latitude']; - latlng1.lng = convert['longitude']; + let convert = this.convertToCustomFormat(mousePositionOnMap,polygonOffset); + mousePositionOnMap.lat = convert[this.options.latKeyName]; + mousePositionOnMap.lng = convert[this.options.lngKeyName]; - if (convert['xPos'] !== 0) { - latlng1.lng -= polygonOffset; - } - - if (convert['yPos'] !== 0) { - latlng1.lat += polygonOffset; - } - } else { - const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; - - if (latlng1.lng > 180 - polygonOffset) { - latlng1.lng = 180 - polygonOffset; - } else if (latlng1.lng < -180) { - latlng1.lng = -180; - } - - if(latlng1.lat > maxLatitude){ - latlng1.lat = maxLatitude; - }else if(latlng1.lat < -maxLatitude + polygonOffset){ - latlng1.lat = -maxLatitude + polygonOffset; - } - } + const latlng1 = mousePositionOnMap; + const latlng2 = L.latLng(mousePositionOnMap.lat, mousePositionOnMap.lng + polygonOffset); + const latlng3 = L.latLng(mousePositionOnMap.lat - polygonOffset, mousePositionOnMap.lng); + polygonPoints = [latlng1, latlng2, latlng3]; - const latlng2 = L.latLng(latlng1.lat, latlng1.lng + polygonOffset); - const latlng3 = L.latLng(latlng1.lat - polygonOffset, latlng1.lng); - mousePositionOnMap = [latlng1, latlng2, latlng3]; - - if (e.type === 'dragend' && mousePositionOnMap) { - const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); + if (e.type === 'dragend' && polygonPoints) { + const newPolygon = L.polygon(polygonPoints).addTo(this.map); this.addPolygons.push(newPolygon); const datasourcesList = document.createElement('div'); - const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(mousePositionOnMap)}; + const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(polygonPoints)}; const header = document.createElement('p'); header.appendChild(document.createTextNode('Select entity:')); header.setAttribute('style', 'font-size: 14px; margin: 8px 0'); @@ -448,12 +423,27 @@ export default abstract class LeafletMap { }).filter(el => !!el); } - convertToCustomFormat(position: L.LatLng): object { - if (position.lng > 180) { - position.lng = 180; + + checkLngLat(position: L.LatLng, polygonOffset: number = 0){ + const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; + const minLatitude = -maxLatitude; + if (position.lng > 180 - polygonOffset) { + position.lng = 180 - polygonOffset; } else if (position.lng < -180) { - position.lng = -180; + position.lng= -180; } + + if(position.lat > maxLatitude){ + position.lat = maxLatitude; + }else if(position.lat < minLatitude + polygonOffset){ + position.lat = minLatitude + polygonOffset; + } + return position; + } + + convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0): object { + position = this.checkLngLat(position,polygonOffset) + return { [this.options.latKeyName]: position.lat, [this.options.lngKeyName]: position.lng @@ -762,6 +752,11 @@ export default abstract class LeafletMap { if (e === undefined || (e.type !== 'editable:vertex:dragend' && e.type !== 'editable:vertex:deleted')) { return; } + if(this.options.provider !== MapProviders.image) { + for (let key in e.layer._latlngs[0]) { + e.layer._latlngs[0][key] = this.checkLngLat(e.layer._latlngs[0][key]); + } + } this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index 7c00e9d557..ffa117eb93 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -16,7 +16,7 @@ import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapImage, PosFuncton, UnitedMapSettings } from '../map-models'; +import {MapImage, MapProviders, PosFuncton, UnitedMapSettings} from '../map-models'; import { Observable, ReplaySubject } from 'rxjs'; import { filter, map, mergeMap } from 'rxjs/operators'; import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/common-maps-utils'; @@ -187,7 +187,7 @@ export class ImageMap extends LeafletMap { this.updateMarkers(this.markersData); if (this.options.draggableMarker && this.addMarkers.length) { this.addMarkers.forEach((marker) => { - const prevPoint = this.convertToCustomFormat(marker.getLatLng(), prevWidth, prevHeight); + const prevPoint = this.convertToCustomFormat(marker.getLatLng(),null, prevWidth, prevHeight); marker.setLatLng(this.convertPosition(prevPoint)); }); } @@ -257,11 +257,12 @@ export class ImageMap extends LeafletMap { return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); } - convertToCustomFormat(position: L.LatLng, width = this.width, height = this.height): object { + convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0, width = this.width, height = this.height): object { + position.lng += polygonOffset; + position.lat -= polygonOffset; const point = this.latLngToPoint(position); const customX = calculateNewPointCoordinate(point.x, width); const customY = calculateNewPointCoordinate(point.y, height); - if (customX === 0) { point.x = 0; } else if (customX === 1) { @@ -273,8 +274,17 @@ export class ImageMap extends LeafletMap { } else if (customY === 1) { point.y = height; } + const customLatLng = this.pointToLatLng(point.x, point.y); + if (customX !== 0) { + customLatLng.lng -= polygonOffset; + } + if (customY !== 0) { + customLatLng.lat += polygonOffset; + } + + return { [this.options.xPosKeyName]: customX, [this.options.yPosKeyName]: customY, From ac0a3fdf5cd7c56e4fafc38649867991c64adbb2 Mon Sep 17 00:00:00 2001 From: Kalutka Zhenya Date: Thu, 14 Jan 2021 19:21:56 +0200 Subject: [PATCH 4/5] update logics --- .../widget/lib/maps/common-maps-utils.ts | 19 +++++++++++ .../components/widget/lib/maps/leaflet-map.ts | 27 ++++----------- .../widget/lib/maps/providers/image-map.ts | 33 ++++++++----------- 3 files changed, 39 insertions(+), 40 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts index 7d04b0b869..1fc00d8cda 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts @@ -30,6 +30,7 @@ import { Datasource, DatasourceData } from '@shared/models/widget.models'; import _ from 'lodash'; import { mapProviderSchema, providerSets } from '@home/components/widget/lib/maps/schemes'; import { addCondition, mergeSchemes } from '@core/schema-utils'; +import L, {Projection} from "leaflet"; export function getProviderSchema(mapProvider: MapProviders, ignoreImageMap = false) { const providerSchema = _.cloneDeep(mapProviderSchema); @@ -443,3 +444,21 @@ export function createLoadingDiv(loadingText: string): JQuery { `); } + +export function checkLngLat(point: L.LatLng, southWest: L.LatLng, northEast: L.LatLng, offset = 0): L.LatLng { + const maxLngMap = northEast.lng - offset; + const minLngMap = southWest.lng + offset; + const maxLatMap = northEast.lat - offset; + const minLatMap = southWest.lat + offset; + if (point.lng > maxLngMap) { + point.lng = maxLngMap; + } else if (point.lng < minLngMap) { + point.lng = minLngMap; + } + if (point.lat > maxLatMap) { + point.lat = maxLatMap; + } else if (point.lat < minLatMap) { + point.lat = minLatMap; + } + return point; +} 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 efe4b6dbdd..9f4ee64aef 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 @@ -46,6 +46,7 @@ import { createTooltip, } from '@home/components/widget/lib/maps/maps-utils'; import { + checkLngLat, createLoadingDiv, parseArray, parseData, @@ -79,6 +80,8 @@ export default abstract class LeafletMap { updatePending = false; addMarkers: L.Marker[] = []; addPolygons: L.Polygon[] = []; + southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180); + northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180); protected constructor(public ctx: WidgetContext, public $container: HTMLElement, @@ -423,26 +426,8 @@ export default abstract class LeafletMap { }).filter(el => !!el); } - - checkLngLat(position: L.LatLng, polygonOffset: number = 0){ - const maxLatitude = Projection.SphericalMercator['MAX_LATITUDE']; - const minLatitude = -maxLatitude; - if (position.lng > 180 - polygonOffset) { - position.lng = 180 - polygonOffset; - } else if (position.lng < -180) { - position.lng= -180; - } - - if(position.lat > maxLatitude){ - position.lat = maxLatitude; - }else if(position.lat < minLatitude + polygonOffset){ - position.lat = minLatitude + polygonOffset; - } - return position; - } - - convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0): object { - position = this.checkLngLat(position,polygonOffset) + convertToCustomFormat(position: L.LatLng, offset = 0): object { + position = checkLngLat(position, this.southWest, this.northEast, offset); return { [this.options.latKeyName]: position.lat, @@ -754,7 +739,7 @@ export default abstract class LeafletMap { } if(this.options.provider !== MapProviders.image) { for (let key in e.layer._latlngs[0]) { - e.layer._latlngs[0][key] = this.checkLngLat(e.layer._latlngs[0][key]); + e.layer._latlngs[0][key] = checkLngLat(e.layer._latlngs[0][key], this.southWest, this.northEast); } } this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index ffa117eb93..526bfa9f06 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -16,10 +16,15 @@ import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet'; import LeafletMap from '../leaflet-map'; -import {MapImage, MapProviders, PosFuncton, UnitedMapSettings} from '../map-models'; +import { MapImage, PosFuncton, UnitedMapSettings } from '../map-models'; import { Observable, ReplaySubject } from 'rxjs'; import { filter, map, mergeMap } from 'rxjs/operators'; -import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/common-maps-utils'; +import { + aspectCache, + calculateNewPointCoordinate, + checkLngLat, + parseFunction +} from '@home/components/widget/lib/maps/common-maps-utils'; import { WidgetContext } from '@home/models/widget-component.models'; import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; @@ -132,9 +137,9 @@ export class ImageMap extends LeafletMap { updateBounds(updateImage?: boolean, lastCenterPos?) { const w = this.width; const h = this.height; - let southWest = this.pointToLatLng(0, h); - let northEast = this.pointToLatLng(w, 0); - const bounds = new L.LatLngBounds(southWest, northEast); + this.southWest = this.pointToLatLng(0, h); + this.northEast = this.pointToLatLng(w, 0); + const bounds = new L.LatLngBounds(this.southWest, this.northEast); if (updateImage && this.imageOverlay) { this.imageOverlay.remove(); @@ -147,8 +152,8 @@ export class ImageMap extends LeafletMap { this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map); } const padding = 200 * maxZoom; - southWest = this.pointToLatLng(-padding, h + padding); - northEast = this.pointToLatLng(w + padding, -padding); + const southWest = this.pointToLatLng(-padding, h + padding); + const northEast = this.pointToLatLng(w + padding, -padding); const maxBounds = new L.LatLngBounds(southWest, northEast); this.map.setMaxBounds(maxBounds); if (lastCenterPos) { @@ -257,9 +262,7 @@ export class ImageMap extends LeafletMap { return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); } - convertToCustomFormat(position: L.LatLng, polygonOffset: number = 0, width = this.width, height = this.height): object { - position.lng += polygonOffset; - position.lat -= polygonOffset; + convertToCustomFormat(position: L.LatLng, offset = 0, width = this.width, height = this.height): object { const point = this.latLngToPoint(position); const customX = calculateNewPointCoordinate(point.x, width); const customY = calculateNewPointCoordinate(point.y, height); @@ -275,15 +278,7 @@ export class ImageMap extends LeafletMap { point.y = height; } - const customLatLng = this.pointToLatLng(point.x, point.y); - - if (customX !== 0) { - customLatLng.lng -= polygonOffset; - } - if (customY !== 0) { - customLatLng.lat += polygonOffset; - } - + const customLatLng = checkLngLat(this.pointToLatLng(point.x, point.y), this.southWest, this.northEast, offset); return { [this.options.xPosKeyName]: customX, From 7f8c3ad0b386650e0bd27ce1609e33d1384f18b9 Mon Sep 17 00:00:00 2001 From: Kalutka Zhenya Date: Thu, 14 Jan 2021 19:28:56 +0200 Subject: [PATCH 5/5] Refactoring --- .../components/widget/lib/maps/leaflet-map.ts | 18 +++++++++--------- .../widget/lib/maps/providers/image-map.ts | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) 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 9f4ee64aef..f5c2a5dcc4 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 @@ -217,18 +217,18 @@ export default abstract class LeafletMap { }); const dragListener = (e: L.DragEndEvent) => { - const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; + if (e.type === 'dragend') { + const polygonOffset = this.options.provider === MapProviders.image ? 10 : 0.01; - let convert = this.convertToCustomFormat(mousePositionOnMap,polygonOffset); - mousePositionOnMap.lat = convert[this.options.latKeyName]; - mousePositionOnMap.lng = convert[this.options.lngKeyName]; + let convert = this.convertToCustomFormat(mousePositionOnMap,polygonOffset); + mousePositionOnMap.lat = convert[this.options.latKeyName]; + mousePositionOnMap.lng = convert[this.options.lngKeyName]; - const latlng1 = mousePositionOnMap; - const latlng2 = L.latLng(mousePositionOnMap.lat, mousePositionOnMap.lng + polygonOffset); - const latlng3 = L.latLng(mousePositionOnMap.lat - polygonOffset, mousePositionOnMap.lng); - polygonPoints = [latlng1, latlng2, latlng3]; + const latlng1 = mousePositionOnMap; + const latlng2 = L.latLng(mousePositionOnMap.lat, mousePositionOnMap.lng + polygonOffset); + const latlng3 = L.latLng(mousePositionOnMap.lat - polygonOffset, mousePositionOnMap.lng); + polygonPoints = [latlng1, latlng2, latlng3]; - if (e.type === 'dragend' && polygonPoints) { const newPolygon = L.polygon(polygonPoints).addTo(this.map); this.addPolygons.push(newPolygon); const datasourcesList = document.createElement('div'); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index 526bfa9f06..7492020a33 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -192,7 +192,7 @@ export class ImageMap extends LeafletMap { this.updateMarkers(this.markersData); if (this.options.draggableMarker && this.addMarkers.length) { this.addMarkers.forEach((marker) => { - const prevPoint = this.convertToCustomFormat(marker.getLatLng(),null, prevWidth, prevHeight); + const prevPoint = this.convertToCustomFormat(marker.getLatLng(), null, prevWidth, prevHeight); marker.setLatLng(this.convertPosition(prevPoint)); }); }