add simple marker suppor

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<L.Map>;
+    map$: BehaviorSubject<L.Map> = new BehaviorSubject(null);
+    ready$: Observable<L.Map> = 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 = {
 
-        }
+    createMarker(location, settings: MarkerSettings) {
-        this.markers.push(new Marker(this.map$, { lat: 0, lng: 0 }, setings))
+        this.ready$.subscribe(() => {
+            let defaultSettings: MarkerSettings = {
+                color: '#FD2785'
+            }
+            this.markers.push(new Marker(this.map, this.convertPosition(location), { ...defaultSettings, ...settings }))
+        });
     }
 
     updateMarker() {

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
 }

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

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<L.Map>, 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) {
+    updateMarkerIcon( settings) {
-        this.createMarkerIcon(marker, settings, (iconInfo) => {
+        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) {
+        if (currentImage && currentImage.url) {
-              this.utils.loadImageAspect(currentImage.url).then(
+            aspectCache(currentImage.url).subscribe(
-                  (aspect) => {
+                (aspect) => {
-                      if (aspect) {
+                    if (aspect) {
-                          var width;
+                        var width;
-                          var height;
+                        var height;
-                          if (aspect > 1) {
+                        if (aspect > 1) {
-                              width = currentImage.size;
+                            width = currentImage.size;
-                              height = currentImage.size / aspect;
+                            height = currentImage.size / aspect;
-                          } else {
+                        } else {
-                              width = currentImage.size * aspect;
+                            width = currentImage.size * aspect;
-                              height = currentImage.size;
+                            height = currentImage.size;
-                          }
+                        }
-                          var icon = L.icon({
+                        var icon = L.icon({
-                              iconUrl: currentImage.url,
+                            iconUrl: currentImage.url,
-                              iconSize: [width, height],
+                            iconSize: [width, height],
-                              iconAnchor: [width / 2, height],
+                            iconAnchor: [width / 2, height],
-                              popupAnchor: [0, -height]
+                            popupAnchor: [0, -height]
-                          });
+                        });
-                          var iconInfo = {
+                        var iconInfo = {
-                              size: [width, height],
+                            size: [width, height],
-                              icon: icon
+                            icon: icon
-                          };
+                        };
-                          onMarkerIconReady(iconInfo);
+                        onMarkerIconReady(iconInfo);
-                      } else {
+                    } else {
-                          opMap.createDefaultMarkerIcon(settings.color, onMarkerIconReady);
+                        this.createDefaultMarkerIcon(settings.color, onMarkerIconReady);
-                      }
+                    }
-                  }
+                }
-              );
+            );
-          } else {
+        } else {
-              this.createDefaultMarkerIcon(settings.color, onMarkerIconReady);
+            this.createDefaultMarkerIcon(settings.color, onMarkerIconReady);
-          }*/
+        }
     }
 
     createDefaultMarkerIcon(color, onMarkerIconReady) {
@@ -124,8 +126,8 @@ export class Marker {
 
 
     removeMarker() {
-        this.map$.subscribe(map =>
+        /*     this.map$.subscribe(map =>
-            this.leafletMarker.addTo(map))
+                 this.leafletMarker.addTo(map))*/
     }
 
     extendBoundsWithMarker(bounds) {

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