Update script for maps

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

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,