Updated example delete marker/polygon for map

ui-ngx/src/app/core/utils.ts

@@ -89,8 +89,8 @@ export function isDefinedAndNotNull(value: any): boolean {
   return typeof value !== 'undefined' && value !== null;
 }
 
-export function isDefinedAndNotEmptyStr(value: any): boolean {
+export function isEmptyStr(value: any): boolean {
-  return typeof value !== 'undefined' && value !== '';
+  return value === '';
 }
 
 export function isFunction(value: any): boolean {

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

@@ -49,7 +49,7 @@ import {
   safeExecute
 } from '@home/components/widget/lib/maps/maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { deepClone, isDefinedAndNotEmptyStr } from '@core/utils';
+import { deepClone, isDefinedAndNotNull, isEmptyStr, isString } from '@core/utils';
 
 export default abstract class LeafletMap {
 
@@ -350,13 +350,13 @@ export default abstract class LeafletMap {
     }
 
     convertPosition(expression: object): L.LatLng {
-        if (!expression) return null;
+      if (!expression) return null;
-        const lat = expression[this.options.latKeyName];
+      const lat = expression[this.options.latKeyName];
-        const lng = expression[this.options.lngKeyName];
+      const lng = expression[this.options.lngKeyName];
-        if (!isDefinedAndNotEmptyStr(lat) || isNaN(lat) || !isDefinedAndNotEmptyStr(lng) || isNaN(lng)) {
+      if (!isDefinedAndNotNull(lat) || isString(lat) || isNaN(lat) || !isDefinedAndNotNull(lng) || isString(lng) || isNaN(lng)) {
-          return null;
+        return null;
-        }
+      }
-        return L.latLng(lat, lng) as L.LatLng;
+      return L.latLng(lat, lng) as L.LatLng;
     }
 
     convertPositionPolygon(expression: (LatLngTuple | LatLngTuple[] | LatLngTuple[][])[]) {
@@ -449,7 +449,7 @@ export default abstract class LeafletMap {
 
   // Markers
     updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) {
-        const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata));
+      const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata));
       const toDelete = new Set(Array.from(this.markers.keys()));
       const createdMarkers: Marker[] = [];
       const updatedMarkers: Marker[] = [];
@@ -644,8 +644,8 @@ export default abstract class LeafletMap {
     const keys: string[] = [];
     this.polygonsData = deepClone(polyData);
     polyData.forEach((data: FormattedData) => {
-      if (data && isDefinedAndNotEmptyStr(data[this.options.polygonKeyName])) {
+      if (data && isDefinedAndNotNull(data[this.options.polygonKeyName]) && !isEmptyStr(data[this.options.polygonKeyName])) {
-        if (typeof (data[this.options.polygonKeyName]) === 'string') {
+        if (isString((data[this.options.polygonKeyName]))) {
           data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]);
         }
         data[this.options.polygonKeyName] = this.convertPositionPolygon(data[this.options.polygonKeyName]);

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

@@ -22,13 +22,12 @@
   background-repeat: no-repeat;
 }
 
-//.leaflet-div-icon,
+.tb-marker-label,
-//.tb-marker-label,
+.tb-marker-label:before {
-//.tb-marker-label:before {
+  border: none;
-//  border: none;
+  background: none;
-//  background: none;
+  box-shadow: none;
-//  box-shadow: none;
+}
-//}
 
 .leaflet-container{
   background-color: white;

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

@@ -24,7 +24,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { WidgetSubscriptionOptions } from '@core/api/widget-api.models';
-import { isDefinedAndNotEmptyStr } from '@core/utils';
+import { isDefinedAndNotNull, isEmptyStr } from '@core/utils';
 
 const maxZoom = 4;// ?
 
@@ -213,7 +213,7 @@ export class ImageMap extends LeafletMap {
     convertPosition(expression): L.LatLng {
       const xPos = expression[this.options.xPosKeyName];
       const yPos = expression[this.options.yPosKeyName];
-      if (!isDefinedAndNotEmptyStr(xPos) || isNaN(xPos) || !isDefinedAndNotEmptyStr(yPos) || isNaN(yPos)) {
+      if (!isDefinedAndNotNull(xPos) || isEmptyStr(xPos) || isNaN(xPos) || !isDefinedAndNotNull(yPos) || isEmptyStr(yPos) || isNaN(yPos)) {
         return null;
       }
       Object.assign(expression, this.posFunction(xPos, yPos));