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 93477c1782..f4b264cabc 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 @@ -40,7 +40,6 @@ export default abstract class LeafletMap { markers: Map = new Map(); polylines: Map = new Map(); polygons: Map = new Map(); - dragMode = false; map: L.Map; map$: BehaviorSubject = new BehaviorSubject(null); ready$: Observable = 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 } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index fd92306349..742e024a09 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -75,7 +75,7 @@ const imageAspectMap = {}; function imageLoader(imageUrl: string): Observable { return new Observable((observer: Observer) => { - 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; +} 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 38618efe2f..2e3927fdc4 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 @@ -29,8 +29,8 @@ export class Marker { data: FormattedData; dataSources: FormattedData[]; - constructor(location: L.LatLngExpression, public settings: MarkerSettings, - data?: FormattedData, dataSources?, onDragendListener?) { + constructor(location: L.LatLngExpression, public settings: MarkerSettings, + data?: FormattedData, dataSources?, onDragendListener?) { this.setDataSources(data, dataSources); this.leafletMarker = L.marker(location, { draggable: settings.draggableMarker 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 fc4bbc6fcd..fce2fb3644 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 @@ -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(() => { - this.map.panTo(center, { animate: false }); - });*/ + const center = this.pointToLatLng(lastCenterPos.x, lastCenterPos.y); + 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.yPosKeyName]: (position.lat + 180) / 360 + [this.options.xPosKeyName]: calculateNewPointCoordinate(point.x, this.width), + [this.options.yPosKeyName]: calculateNewPointCoordinate(point.y, this.height) } } }