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 5d6f39850e..0f1f08799c 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'); @@ -410,10 +413,15 @@ export default abstract class LeafletMap { } convertToCustomFormat(position: L.LatLng): object { - return { - [this.options.latKeyName]: position.lat % 90, - [this.options.lngKeyName]: position.lng % 180 - }; + if (position.lng > 180) { + position.lng = 180; + } else if (position.lng < -180) { + position.lng = -180; + } + return { + [this.options.latKeyName]: position.lat, + [this.options.lngKeyName]: position.lng + }; } convertToPolygonFormat(points: Array): Array { 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 4796956fa6..5f9e5e8362 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 @@ -94,7 +94,7 @@ export class Marker { } updateMarkerPosition(position: L.LatLng) { - if (!this.location.equals(position)) { + if (!this.leafletMarker.getLatLng().equals(position)) { this.location = position; this.leafletMarker.setLatLng(position); } 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..825ace1227 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 @@ -259,9 +259,27 @@ export class ImageMap extends LeafletMap { convertToCustomFormat(position: L.LatLng, width = this.width, height = this.height): object { 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) { + 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 }; }