Merge pull request #3705 from kalutkaz/MapMarker2

Fix marker move and marker point

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<any>): Array<any> {

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);
       }

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
       };
     }