[3.0] Improvement image map (#2740)

* Fixed not correct center image map
Fixed update position marker for image map

* Add support IE and clear code

* Fix not correct update image for datasource

* Update marker position

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -40,7 +40,6 @@ export default abstract class LeafletMap {
     markers: Map<string, Marker> = new Map();
     polylines: Map<string, Polyline> = new Map();
     polygons: Map<string, Polygon> = new Map();
-    dragMode = false;
     map: L.Map;
     map$: BehaviorSubject<L.Map> = new BehaviorSubject(null);
     ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map));
@@ -238,7 +237,7 @@ export default abstract class LeafletMap {
 
     convertToCustomFormat(position: L.LatLng): object {
         return {
-            [this.options.latKeyName]: position.lat % 180,
+            [this.options.latKeyName]: position.lat % 90,
             [this.options.lngKeyName]: position.lng % 180
         }
     }

ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts

@@ -75,7 +75,7 @@ const imageAspectMap = {};
 
 function imageLoader(imageUrl: string): Observable<HTMLImageElement> {
   return new Observable((observer: Observer<HTMLImageElement>) => {
-    const image = new Image();
+    const image = document.createElement('img'); // support IE
     image.style.position = 'absolute';
     image.style.left = '-99999px';
     image.style.top = '-99999px';
@@ -236,3 +236,13 @@ export function safeExecute(func: (...args: any[]) => any, params = []) {
   }
   return res;
 }
+
+export function calculateNewPointCoordinate(coordinate: number, imageSize: number): number {
+  let pointCoordinate = coordinate / imageSize;
+  if (pointCoordinate < 0) {
+    pointCoordinate = 0;
+  } else if (pointCoordinate > 1) {
+    pointCoordinate = 1;
+  }
+  return pointCoordinate;
+}

ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts

@@ -29,8 +29,8 @@ export class Marker {
     data: FormattedData;
     dataSources: FormattedData[];
 
-    constructor(location: L.LatLngExpression, public settings: MarkerSettings,
+  constructor(location: L.LatLngExpression, public settings: MarkerSettings,
-        data?: FormattedData, dataSources?, onDragendListener?) {
+              data?: FormattedData, dataSources?, onDragendListener?) {
         this.setDataSources(data, dataSources);
         this.leafletMarker = L.marker(location, {
             draggable: settings.draggableMarker

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts

@@ -19,7 +19,7 @@ import LeafletMap from '../leaflet-map';
 import { UnitedMapSettings } from '../map-models';
 import { Observable } from 'rxjs';
 import { map, filter, switchMap } from 'rxjs/operators';
-import { aspectCache, parseFunction } from '@home/components/widget/lib/maps/maps-utils';
+import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/maps-utils';
 
 const maxZoom = 4;// ?
 
@@ -79,9 +79,10 @@ export class ImageMap extends LeafletMap {
         if (lastCenterPos) {
             lastCenterPos.x *= w;
             lastCenterPos.y *= h;
-            /* this.ctx.$scope.$injector.get('$mdUtil').nextTick(() => {
+            const center = this.pointToLatLng(lastCenterPos.x, lastCenterPos.y);
-                 this.map.panTo(center, { animate: false });
+            setTimeout(() => {
-             });*/
+              this.map.panTo(center, { animate: false });
+            }, 0);
         }
     }
 
@@ -97,7 +98,7 @@ export class ImageMap extends LeafletMap {
             width *= maxZoom;
             const prevWidth = this.width;
             const prevHeight = this.height;
-            if (this.width !== width) {
+            if (this.width !== width || updateImage) {
                 this.width = width;
                 this.height = width / this.aspect;
                 if (!this.map) {
@@ -108,6 +109,7 @@ export class ImageMap extends LeafletMap {
                     lastCenterPos.y /= prevHeight;
                     this.updateBounds(updateImage, lastCenterPos);
                     this.map.invalidateSize(true);
+                    // TODO: need add update marker position
                 }
             }
         }
@@ -133,7 +135,7 @@ export class ImageMap extends LeafletMap {
 
     convertPosition(expression): L.LatLng {
         if (isNaN(expression[this.options.xPosKeyName]) || isNaN(expression[this.options.yPosKeyName])) return null;
-        Object.assign(expression, this.posFunction(expression[this.options.xPosKeyName], expression[this.options.yPosKeyName]))
+        Object.assign(expression, this.posFunction(expression[this.options.xPosKeyName], expression[this.options.yPosKeyName]));
         return this.pointToLatLng(
           expression.x * this.width,
           expression.y * this.height);
@@ -148,9 +150,10 @@ export class ImageMap extends LeafletMap {
     }
 
     convertToCustomFormat(position: L.LatLng): object {
+        const point = this.latLngToPoint(position);
         return {
-            [this.options.xPosKeyName]: (position.lng + 180) / 360,
+            [this.options.xPosKeyName]: calculateNewPointCoordinate(point.x, this.width),
-            [this.options.yPosKeyName]: (position.lat + 180) / 360
+            [this.options.yPosKeyName]: calculateNewPointCoordinate(point.y, this.height)
         }
     }
 }