From 8149d9d42d3913895c00bcb02120497e2b8ffc69 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Tue, 3 Mar 2020 11:12:21 +0200 Subject: [PATCH] add simple marker suppor --- .../components/widget/lib/maps/leaflet-map.ts | 24 +++-- .../components/widget/lib/maps/map-models.ts | 3 +- .../components/widget/lib/maps/map-widget2.ts | 5 +- .../components/widget/lib/maps/markers.ts | 88 ++++++++++--------- .../widget/lib/maps/providers/image-map.ts | 5 ++ 5 files changed, 72 insertions(+), 53 deletions(-) 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 a1acc7d618..0c7a42374e 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 @@ -7,14 +7,16 @@ import 'leaflet.markercluster/dist/leaflet.markercluster' import { MapOptions, MarkerSettings } from './map-models'; import { Marker } from './markers'; -import { Observable, of } from 'rxjs'; +import { Observable, of, BehaviorSubject, Subject } from 'rxjs'; +import { filter } from 'rxjs/operators'; export default class LeafletMap { markers = []; tooltips = []; map: L.Map; - map$: Observable; + map$: BehaviorSubject = new BehaviorSubject(null); + ready$: Observable = this.map$.pipe(filter(map => !!map)); options: MapOptions; isMarketCluster; @@ -47,7 +49,7 @@ export default class LeafletMap { public setMap(map: L.Map) { this.map = map; - this.map$ = of(this.map); + this.map$.next(this.map); } getContainer() { @@ -121,14 +123,20 @@ export default class LeafletMap { return this.map.getCenter(); } - ////Markers + convertPosition(expression: L.LatLngExpression | { x, y }): L.LatLngExpression { + return expression as L.LatLngExpression; + } + ////Markers - createMarker() { - let setings: MarkerSettings = { - } - this.markers.push(new Marker(this.map$, { lat: 0, lng: 0 }, setings)) + createMarker(location, settings: MarkerSettings) { + this.ready$.subscribe(() => { + let defaultSettings: MarkerSettings = { + color: '#FD2785' + } + this.markers.push(new Marker(this.map, this.convertPosition(location), { ...defaultSettings, ...settings })) + }); } updateMarker() { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 997ee79524..5b3da8bb47 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts @@ -22,5 +22,6 @@ export enum MapProviders { export interface MarkerSettings{ showLabel?: boolean, draggable?: boolean, - displayTooltip?: boolean + displayTooltip?: boolean, + color: string } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index fd09c6a79b..d501fbc2db 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -72,7 +72,10 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { return; } this.map = new MapClass($element, { ...baseOptions, ...ctx.settings }) - this.map.createMarker(); + if(mapProvider !== "image-map") + this.map.createMarker({ lat: 0, lng: 0 }, { color: '#FD2785' }) + else + this.map.createMarker({ x: 500, y: 500 }, { color: '#6D2785' }); this.schema = providerSets[mapProvider]?.schema; } 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 ca2a80ec6d..0a26edd30d 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 @@ -2,6 +2,7 @@ import L from 'leaflet'; import { createTooltip } from './maps-utils'; import { MarkerSettings } from './map-models'; import { Observable } from 'rxjs'; +import { aspectCache } from '@app/core/utils'; export class Marker { @@ -11,21 +12,22 @@ export class Marker { tooltipOffset; tooltip; - constructor(private map$: Observable, location: L.LatLngExpression, settings: MarkerSettings, onClickListener?, markerArgs?, onDragendListener?) { + constructor(private map: L.Map, location: L.LatLngExpression, settings: MarkerSettings, onClickListener?, markerArgs?, onDragendListener?) { //this.map = map; this.leafletMarker = L.marker(location, { draggable: settings.draggable }); - this.createMarkerIcon(this.leafletMarker, settings, (iconInfo) => { + this.createMarkerIcon(settings, (iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); if (settings.showLabel) { this.tooltipOffset = [0, -iconInfo.size[1] + 10]; this.updateMarkerLabel(settings) } - map$.subscribe(map => - this.leafletMarker.addTo(map)) - }); + + this.leafletMarker.addTo(map) + } + ); if (settings.displayTooltip) { this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs); @@ -48,14 +50,14 @@ export class Marker { { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset }); } - updateMarkerColor(marker, color) { + updateMarkerColor(color) { this.createDefaultMarkerIcon(color, (iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); }); } - updateMarkerIcon(marker, settings) { - this.createMarkerIcon(marker, settings, (iconInfo) => { + updateMarkerIcon( settings) { + this.createMarkerIcon(settings, (iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); if (settings.showLabel) { this.tooltipOffset = [0, -iconInfo.size[1] + 10]; @@ -66,41 +68,41 @@ export class Marker { - createMarkerIcon(marker, settings, onMarkerIconReady) { + createMarkerIcon(settings, onMarkerIconReady) { var currentImage = settings.currentImage; // var opMap = this; - /* if (currentImage && currentImage.url) { - this.utils.loadImageAspect(currentImage.url).then( - (aspect) => { - if (aspect) { - var width; - var height; - if (aspect > 1) { - width = currentImage.size; - height = currentImage.size / aspect; - } else { - width = currentImage.size * aspect; - height = currentImage.size; - } - var icon = L.icon({ - iconUrl: currentImage.url, - iconSize: [width, height], - iconAnchor: [width / 2, height], - popupAnchor: [0, -height] - }); - var iconInfo = { - size: [width, height], - icon: icon - }; - onMarkerIconReady(iconInfo); - } else { - opMap.createDefaultMarkerIcon(settings.color, onMarkerIconReady); - } - } - ); - } else { - this.createDefaultMarkerIcon(settings.color, onMarkerIconReady); - }*/ + if (currentImage && currentImage.url) { + aspectCache(currentImage.url).subscribe( + (aspect) => { + if (aspect) { + var width; + var height; + if (aspect > 1) { + width = currentImage.size; + height = currentImage.size / aspect; + } else { + width = currentImage.size * aspect; + height = currentImage.size; + } + var icon = L.icon({ + iconUrl: currentImage.url, + iconSize: [width, height], + iconAnchor: [width / 2, height], + popupAnchor: [0, -height] + }); + var iconInfo = { + size: [width, height], + icon: icon + }; + onMarkerIconReady(iconInfo); + } else { + this.createDefaultMarkerIcon(settings.color, onMarkerIconReady); + } + } + ); + } else { + this.createDefaultMarkerIcon(settings.color, onMarkerIconReady); + } } createDefaultMarkerIcon(color, onMarkerIconReady) { @@ -124,8 +126,8 @@ export class Marker { removeMarker() { - this.map$.subscribe(map => - this.leafletMarker.addTo(map)) + /* this.map$.subscribe(map => + this.leafletMarker.addTo(map))*/ } extendBoundsWithMarker(bounds) { 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 b533f9ea6d..7d4714456d 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 @@ -101,6 +101,11 @@ export class ImageMap extends LeafletMap { } } + convertPosition(expression: { x, y }): L.LatLngExpression { + console.log("ImageMap -> expression", expression) + return this.pointToLatLng(expression.x, expression.y) as L.LatLngExpression; + } + pointToLatLng(x, y) { return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);