here maps support && WIP on markers

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

@@ -5,13 +5,16 @@ import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster/dist/leaflet.markercluster'
 
-import { MapOptions } from './map-models';
+import { MapOptions, MarkerSettings } from './map-models';
+import { Marker } from './markers';
+import { Observable, of } from 'rxjs';
 
 export default class LeafletMap {
 
     markers = [];
     tooltips = [];
     map: L.Map;
+    map$: Observable<L.Map>;
     options: MapOptions;
     isMarketCluster;
 
@@ -44,6 +47,7 @@ export default class LeafletMap {
 
     public setMap(map: L.Map) {
         this.map = map;
+        this.map$ = of(this.map);
     }
 
     getContainer() {
@@ -84,7 +88,7 @@ export default class LeafletMap {
         this.map.invalidateSize(true);
     }
 
-    createTooltip(marker, dsIndex, settings, markerArgs) {
+    createTool0tip(marker, dsIndex, settings, markerArgs) {
         var popup = L.popup();
         popup.setContent('');
         marker.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
@@ -105,8 +109,8 @@ export default class LeafletMap {
         }
     }
 
-    onResize(){
-        
+    onResize() {
+
     }
 
     getTooltips() {
@@ -117,5 +121,23 @@ export default class LeafletMap {
         return this.map.getCenter();
     }
 
+    ////Markers
+
+
+    createMarker() {
+        let setings: MarkerSettings = {
+
+        }
+        this.markers.push(new Marker(this.map$, { lat: 0, lng: 0 }, setings))
+    }
+
+    updateMarker() {
+
+    }
+
+    deleteMarker() {
+
+    }
+
 
 }

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

@@ -17,4 +17,10 @@ export enum MapProviders {
     here = 'here',
     image = 'image-map',
     tencent = 'tencent-map'
+}
+
+export interface MarkerSettings{
+    showLabel?: boolean,
+    draggable?: boolean,
+    displayTooltip?: boolean
 }

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

@@ -1,10 +1,19 @@
 import { MapProviders, MapOptions } from "./map-models";
 import LeafletMap from './leaflet-map';
-import { deepClone } from '@core/utils';
-import { openstreetMapSettingsSchema, googleMapSettingsSchema, imageMapSettingsSchema, tencentMapSettingsSchema, hereMapSettingsSchema, commonMapSettingsSchema, routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaGoogle, markerClusteringSettingsSchemaLeaflet } from './schemes';
+import {
+    openstreetMapSettingsSchema,
+    googleMapSettingsSchema,
+    imageMapSettingsSchema,
+    tencentMapSettingsSchema,
+    commonMapSettingsSchema,
+    routeMapSettingsSchema,
+    markerClusteringSettingsSchema,
+    markerClusteringSettingsSchemaLeaflet,
+    hereMapSettingsSchema
+} from './schemes';
 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
-import { OpenStreetMap, TencentMap, ImageMap, GoogleMap } from './providers';
-import { string } from 'prop-types';
+import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
+
 
 const providerSets = {
     'openstreet-map': {
@@ -22,6 +31,11 @@ const providerSets = {
         schema: googleMapSettingsSchema,
         name: "Openstreet"
     },
+    'here': {
+        MapClass: HEREMap,
+        schema: hereMapSettingsSchema,
+        name: "HERE"
+    },
     'image-map': {
         MapClass: ImageMap,
         schema: imageMapSettingsSchema
@@ -34,7 +48,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
     provider: MapProviders;
     schema;
 
-    constructor(mapProvider: MapProviders, drawRoutes, ctx, useDynamicLocations, $element, isEdit) {
+    constructor(mapProvider: MapProviders, drawRoutes, ctx, $element) {
         console.log(ctx.settings);
 
         if (!$element) {
@@ -58,7 +72,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
             return;
         }
         this.map = new MapClass($element, { ...baseOptions, ...ctx.settings })
-
+        this.map.createMarker();
         this.schema = providerSets[mapProvider]?.schema;
     }
 
@@ -156,93 +170,4 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
 
     onDestroy() {
     }
-}
-
-let defaultSettings = {
-    xPosKeyName: 'xPos',
-    yPosKeyName: 'yPos',
-    markerOffsetX: 0.5,
-    markerOffsetY: 1,
-    latKeyName: 'latitude',
-    lngKeyName: 'longitude',
-    polygonKeyName: 'coordinates',
-
-
-    //this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + this.locationSettings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + this.locationSettings.lngKeyName + ":7}",
-    showLabel: false,
-    showTooltip: false,
-    useDefaultCenterPosition: true,
-    showTooltipAction: "click",
-    autocloseTooltip: false,
-    showPolygon: true,
-    labelColor: '#000000',
-    /*  this.locationSettings.label = this.ctx.settings.label || "${entityName}",
-      this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569",
-      this.locationSettings.polygonColor = this.ctx.settings.polygonColor ? tinycolor(this.ctx.settings.polygonColor).toHexString() : "#0000ff",
-      this.locationSettings.polygonStrokeColor = this.ctx.settings.polygonStrokeColor ? tinycolor(this.ctx.settings.polygonStrokeColor).toHexString() : "#fe0001",
-      this.locationSettings.polygonOpacity = angular.isDefined(this.ctx.settings.polygonOpacity) ? this.ctx.settings.polygonOpacity : 0.5,
-      this.locationSettings.polygonStrokeOpacity = angular.isDefined(this.ctx.settings.polygonStrokeOpacity) ? this.ctx.settings.polygonStrokeOpacity : 1,
-      this.locationSettings.polygonStrokeWeight = angular.isDefined(this.ctx.settings.polygonStrokeWeight) ? this.ctx.settings.polygonStrokeWeight : 1,
-  
-      this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true,
-      if(angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) {
-          try {
-              this.locationSettings.labelFunction = new Function('data, dsData, dsIndex', this.ctx.settings.labelFunction),
-          } catch (e) {
-              this.locationSettings.labelFunction = null,
-      }
-  }
-  
-  this.locationSettings.useTooltipFunction = this.ctx.settings.useTooltipFunction === true,
-  if (angular.isDefined(this.ctx.settings.tooltipFunction) && this.ctx.settings.tooltipFunction.length > 0) {
-      try {
-          this.locationSettings.tooltipFunction = new Function('data, dsData, dsIndex', this.ctx.settings.tooltipFunction),
-      } catch (e) {
-          this.locationSettings.tooltipFunction = null,
-      }
-  }
-  
-  this.locationSettings.useColorFunction = this.ctx.settings.useColorFunction === true,
-  if (angular.isDefined(this.ctx.settings.colorFunction) && this.ctx.settings.colorFunction.length > 0) {
-      try {
-          this.locationSettings.colorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.colorFunction),
-      } catch (e) {
-          this.locationSettings.colorFunction = null,
-      }
-  }
-  this.locationSettings.usePolygonColorFunction = this.ctx.settings.usePolygonColorFunction === true,
-  if (angular.isDefined(this.ctx.settings.polygonColorFunction) && this.ctx.settings.polygonColorFunction.length > 0) {
-      try {
-          this.locationSettings.polygonColorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.polygonColorFunction),
-      } catch (e) {
-          this.locationSettings.polygonColorFunction = null,
-      }
-  }
-  
-  this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true,
-  if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) {
-      try {
-          this.locationSettings.markerImageFunction = new Function('data, images, dsData, dsIndex', this.ctx.settings.markerImageFunction),
-      } catch (e) {
-          this.locationSettings.markerImageFunction = null,
-      }
-  }
-  
-  this.locationSettings.markerImages = this.ctx.settings.markerImages || [],
-  
-  if (!this.locationSettings.useMarkerImageFunction &&
-      angular.isDefined(this.ctx.settings.markerImage) &&
-      this.ctx.settings.markerImage.length > 0) {
-      this.locationSettings.useMarkerImage = true,
-      var url = this.ctx.settings.markerImage,
-      var size = this.ctx.settings.markerImageSize || 34,
-      this.locationSettings.currentImage = {
-          url: url,
-          size: size
-      },
-  }
-  
-  if (this.drawRoutes) {
-      this.locationSettings.strokeWeight = this.ctx.settings.strokeWeight || 2,
-          this.locationSettings.strokeOpacity = this.ctx.settings.strokeOpacity || 1.0,*/
 }

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

@@ -1,6 +1,6 @@
 import L from 'leaflet';
 
-export function createTooltip(target, dsIndex, settings, targetArgs?) {
+export function createTooltip(target, settings, targetArgs?) {
     var popup = L.popup();
     popup.setContent('');
     target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
@@ -17,6 +17,6 @@ export function createTooltip(target, dsIndex, settings, targetArgs?) {
         markerArgs: targetArgs,
         popup: popup,
         locationSettings: settings,
-        dsIndex: dsIndex
+        dsIndex: settings.dsIndex
     };
 }

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

@@ -1,30 +1,34 @@
 import L from 'leaflet';
 import { createTooltip } from './maps-utils';
+import { MarkerSettings } from './map-models';
+import { Observable } from 'rxjs';
 
 export class Marker {
 
     leafletMarker: L.Marker;
-    map: L.Map;
+    // map: L.Map;
 
     tooltipOffset;
     tooltip;
 
-    constructor(map: L.Map, location, dsIndex, settings, onClickListener, markerArgs, onDragendListener) {
-        this.map = map;
+    constructor(private map$: Observable<L.Map>, location: L.LatLngExpression, settings: MarkerSettings, onClickListener?, markerArgs?, onDragendListener?) {
+        //this.map = map;
         this.leafletMarker = L.marker(location, {
-            draggable: settings.drraggable
+            draggable: settings.draggable
         });
+
         this.createMarkerIcon(this.leafletMarker, settings, (iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
             if (settings.showLabel) {
                 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
                 this.updateMarkerLabel(settings)
             }
-            this.leafletMarker.addTo(this.map);
+            map$.subscribe(map =>
+                this.leafletMarker.addTo(map))
         });
 
         if (settings.displayTooltip) {
-            this.tooltip = createTooltip(this.leafletMarker, dsIndex, settings, markerArgs);
+            this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs);
         }
 
         if (onClickListener) {
@@ -120,7 +124,8 @@ export class Marker {
 
 
     removeMarker() {
-        this.map.removeLayer(this.leafletMarker);
+        this.map$.subscribe(map =>
+            this.leafletMarker.addTo(map))
     }
 
     extendBoundsWithMarker(bounds) {

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

@@ -0,0 +1,20 @@
+import L from 'leaflet';
+import LeafletMap from '../leaflet-map';
+import { MapOptions } from '../map-models';
+
+export class HEREMap extends LeafletMap {
+    constructor($container, options: MapOptions) {
+        console.log("HEREMap -> constructor -> options", options)
+        const defaultCredentials =
+        {
+            app_id: "AhM6TzD9ThyK78CT3ptx",
+            app_code: "p6NPiITB3Vv0GMUFnkLOOg"
+        }
+        super($container, options);
+        const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
+        var tileLayer = (L.tileLayer as any).provider(options.mapProvider || "HERE.normalDay", options.credentials || defaultCredentials);
+        tileLayer.addTo(map);
+        super.setMap(map);
+        super.initSettings(options);
+    }
+}

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

@@ -1,4 +1,5 @@
 export * from './tencent-map';
 export * from './google-map';
+export * from './here-map';
 export * from './image-map';
 export * from './openstreet-map';