From a06c8354973e361c760fd90b293a7fad41d18a6a Mon Sep 17 00:00:00 2001 From: Kalutka Zhenya Date: Mon, 28 Sep 2020 14:48:47 +0300 Subject: [PATCH] Fix marker move and marker point --- .../components/widget/lib/maps/leaflet-map.ts | 6 +++-- .../widget/lib/maps/providers/image-map.ts | 25 ++++++++++++++++--- 2 files changed, 26 insertions(+), 5 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 14d296436d..742451ec5e 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 @@ -131,10 +131,13 @@ export default abstract class LeafletMap { tooltipAnchor: [16, -28], shadowSize: [41, 41] }); + const customLatLng = this.convertToCustomFormat(mousePositionOnMap); + mousePositionOnMap.lat = customLatLng[this.options.latKeyName]; + mousePositionOnMap.lng = customLatLng[this.options.lngKeyName]; + const newMarker = L.marker(mousePositionOnMap, { icon }).addTo(this.map); this.addMarkers.push(newMarker); const datasourcesList = document.createElement('div'); - const customLatLng = this.convertToCustomFormat(mousePositionOnMap); const header = document.createElement('p'); header.appendChild(document.createTextNode('Select entity:')); header.setAttribute('style', 'font-size: 14px; margin: 8px 0'); @@ -415,7 +418,6 @@ export default abstract class LeafletMap { }else if(position.lng < -180){ position.lng = -180; }; - return { [this.options.latKeyName]: position.lat, [this.options.lngKeyName]: position.lng 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 1b20ddad01..2c967660e0 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 @@ -258,10 +258,29 @@ export class ImageMap extends LeafletMap { } convertToCustomFormat(position: L.LatLng, width = this.width, height = this.height): object { - const point = this.latLngToPoint(position); + let 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){ + point.x = width; + } + + if(customY === 0){ + point.y = 0; + } else if(customY === 1){ + point.y = height; + } + + const customLatLng = this.pointToLatLng(point.x,point.y) + return { - [this.options.xPosKeyName]: calculateNewPointCoordinate(point.x, width), - [this.options.yPosKeyName]: calculateNewPointCoordinate(point.y, height) + [this.options.xPosKeyName]: customX, + [this.options.yPosKeyName]: customY, + [this.options.latKeyName]:customLatLng.lat, + [this.options.lngKeyName]:customLatLng.lng }; }