update logics

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<HTMLElement> {
     </div>
   `);
 }
+
+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;
+}

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

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,