map fixes

ui-ngx/package-lock.json

@@ -1816,8 +1816,7 @@
     "@types/geojson": {
       "version": "7946.0.7",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
-      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
-      "dev": true
     },
     "@types/glob": {
       "version": "7.1.1",
@@ -1881,11 +1880,18 @@
       "version": "1.5.12",
       "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.12.tgz",
       "integrity": "sha512-61HRMIng+bWvnnAIqUWLBlrd/TQZc4gU+gN1JL4K47EDtwIrcMEhWgi7PdcpbG1YmpH4F0EfOimkvV82gJIl9w==",
-      "dev": true,
       "requires": {
         "@types/geojson": "*"
       }
     },
+    "@types/leaflet-markercluster": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/leaflet-markercluster/-/leaflet-markercluster-1.0.3.tgz",
+      "integrity": "sha1-ZBUb5FP2SQ6HUVAEgt65YQZOeCw=",
+      "requires": {
+        "@types/leaflet": "*"
+      }
+    },
     "@types/leaflet-polylinedecorator": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@types/leaflet-polylinedecorator/-/leaflet-polylinedecorator-1.6.0.tgz",
@@ -7670,9 +7676,9 @@
       "integrity": "sha1-RGf0n5jRv9VpWb2cZwUgPdJgEnc="
     },
     "leaflet.gridlayer.googlemutant": {
-      "version": "0.9.0",
+      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.8.0.tgz",
-      "integrity": "sha512-hkLEHLcdcCaq1OKgUla5ar6fCaUK6yBYIY9HyAclPcMwhnpJTnLmYYPbVJbq3Niz0YiO75gls4A6D6jkBJXpuw=="
+      "integrity": "sha512-Ain+jgDKRhlM6qNDDj2QFJa9vXUqV096N0PmpHO3DoNLS4I7EynTQCJXN+9qY4C51ZpV4Q4CI+apNv5XiP5aUA=="
     },
     "leaflet.markercluster": {
       "version": "1.4.1",

ui-ngx/package.json

@@ -39,6 +39,7 @@
     "@ngx-share/core": "^7.1.4",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "^4.0.0",
+    "@types/leaflet-markercluster": "^1.0.3",
     "ace-builds": "^1.4.11",
     "angular-gridster2": "^9.1.0",
     "angular2-hotkeys": "^2.2.0",
@@ -62,7 +63,7 @@
     "leaflet-geometryutil": "^0.9.3",
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet-providers": "^1.9.1",
-    "leaflet.gridlayer.googlemutant": "^0.9.0",
+    "leaflet.gridlayer.googlemutant": "0.8.0",
     "leaflet.markercluster": "^1.4.1",
     "material-design-icons": "^3.0.1",
     "messageformat": "^2.3.0",

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

@@ -525,7 +525,6 @@ export function parseFunction(source: any, params: string[] = ['def']): Function
 
 export function parseTemplate(template: string, data: object, translateFn?: (key: string) => string) {
   let res = '';
-  let variables = '';
   try {
     if (template.match(/<link-act/g)) {
       template = template.replace(/<link-act/g, '<a').replace(/link-act>/g, 'a>').replace(/name=(\'|")(.*?)(\'|")/g, `class='tb-custom-action' id='$2'`);
@@ -536,27 +535,26 @@ export function parseTemplate(template: string, data: object, translateFn?: (key
         template = template.replace(match, translateFn(match.match(translateRegexp)[1]));
       });
     }
-    /*
+    const formatted = template.match(/\$\{([^}]*)\:\d*\}/g);
-    const expressions = template.match(/\{(.*?)\}/g);
+    if (formatted)
-    if (expressions) {
+      formatted.forEach(value => {
-      const clearMatches = template.match(/\$\{([^}]*?)\}/g);
+        const [variable, digits] = value.replace('${', '').replace('}', '').split(':');
-      for (const key in data) {
+        data[variable] = padValue(data[variable], +digits)
-        if (!key.includes('|'))
+        template = template.replace(value, '${' + variable + '}');
-          variables += `var ${key} = '${clearMatches[key] ? padValue(data[key], +clearMatches[key]) : data[key]}';`;
+      });
-      }
+    const variables = template.match(/\$\{.*?\}/g);
-      template = template.replace(/\:\d+\}/g, '}');
+    if (variables) {
-      const interpolator = new Interpolator({delimeter: ['${', '}']});
+      variables.forEach(variable => {
-       interpolator.parse(template, data);
+        variable = variable.replace('${', '').replace('}', '');
-      res = safeExecute(parseFunction(variables + ' return' + '`' + template + '`'));
+        if (!data[variable])
+          data[variable] = '';
+      })
     }
-    else res = template;*/
+    const compiled = _.template(template);
-    const compiled = _.template(template, {
+    res = compiled(data);
-      interpolate: /${([\s\S]+?)}/g
-    });
-    res = compiled(data)
   }
   catch (ex) {
-    console.log(ex, variables, template)
+    console.log(ex, template)
   }
   return res;
 }

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

@@ -14,12 +14,10 @@
 /// limitations under the License.
 ///
 
-import L, { LatLngTuple, LatLngBounds, Point } from 'leaflet';
+import L, { LatLngTuple, LatLngBounds, Point, MarkerClusterGroupOptions, markerClusterGroup} from 'leaflet';
 
 import 'leaflet-providers';
-import 'leaflet.markercluster/dist/MarkerCluster.css';
+import 'leaflet.markercluster/dist/leaflet.markercluster';
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
-import LM from 'leaflet.markercluster/dist/leaflet.markercluster';
 
 import { MapSettings, MarkerSettings, FormattedData, UnitedMapSettings, PolygonSettings, PolylineSettings } from './map-models';
 import { Marker } from './markers';
@@ -43,7 +41,7 @@ export default abstract class LeafletMap {
     bounds: L.LatLngBounds;
     newMarker: L.Marker;
     datasources: FormattedData[];
-    markersCluster: LM.markerClusterGroup;
+    markersCluster;
 
     constructor(public $container: HTMLElement, options: UnitedMapSettings) {
         this.options = options;
@@ -67,7 +65,7 @@ export default abstract class LeafletMap {
             setTimeout(options.initCallback, 0);
         }
         if (useClusterMarkers) {
-            const clusteringSettings: LM.MarkerClusterGroupOptions = {
+            const clusteringSettings: MarkerClusterGroupOptions = {
                 zoomToBoundsOnClick: zoomOnClick,
                 showCoverageOnHover,
                 removeOutsideVisibleBounds,
@@ -80,7 +78,7 @@ export default abstract class LeafletMap {
             if (maxZoom && maxZoom >= 0 && maxZoom < 19) {
                 clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom);
             }
-            this.markersCluster = LM.markerClusterGroup(clusteringSettings);
+            this.markersCluster = markerClusterGroup(clusteringSettings);
             this.ready$.subscribe(map => map.addLayer(this.markersCluster));
         }
     }
@@ -208,7 +206,7 @@ export default abstract class LeafletMap {
                 });
                 this.map.fitBounds(bounds, { padding: padding || [50, 50], animate: false });
             }
-            this.bounds = this.bounds.extend(bounds);
+            this.bounds = bounds;
         }
     }
 
@@ -259,7 +257,9 @@ export default abstract class LeafletMap {
     private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) {
         this.ready$.subscribe(() => {
             const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
-            this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size > 2);
+            console.log(this.bounds);
+            
+            this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size < 2);
             this.markers.set(key, newMarker);
             if (this.options.useClusterMarkers) {
                 this.markersCluster.addLayer(newMarker.leafletMarker);

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

@@ -48,6 +48,7 @@ import { UtilsService } from '@core/services/utils.service';
 export class MapWidgetController implements MapWidgetInterface {
 
     constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
+        console.log("MapWidgetController -> constructor -> ctx", ctx)
         if (this.map) {
             this.map.map.remove();
             delete this.map;
@@ -83,6 +84,7 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     public static getProvidersSchema(mapProvider: MapProviders) {
+        console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider)
         mapProviderSchema.schema.properties.provider.default = mapProvider;
         return mergeSchemes([mapProviderSchema,
             ...Object.keys(providerSets)?.map(
@@ -94,8 +96,10 @@ export class MapWidgetController implements MapWidgetInterface {
         addToSchema(schema, this.getProvidersSchema(mapProvider));
         if (mapProvider !== 'image-map') {
             addGroupInfo(schema, 'Map Provider Settings');
-            addToSchema(schema, mergeSchemes([commonMapSettingsSchema, addCondition(mapPolygonSchema, 'model.showPolygon === true')]));
+            addToSchema(schema, commonMapSettingsSchema);
             addGroupInfo(schema, 'Common Map Settings');
+            addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true'));
+            addGroupInfo(schema, 'Polygon Settings');
             if (drawRoutes) {
                 addToSchema(schema, routeMapSettingsSchema);
                 addGroupInfo(schema, 'Route Map Settings');
@@ -127,8 +131,10 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     translate = (key: string, defaultTranslation?: string): string => {
-        return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key)
+        if (key)
-            || this.ctx.$injector.get(TranslateService).instant(key));
+            return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key)
+                || this.ctx.$injector.get(TranslateService).instant(key));
+        else return '';
     }
 
     getDescriptors(name: string): { [name: string]: ($event: Event) => void } {
@@ -156,24 +162,25 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     setMarkerLocation = (e) => {
+        console.log("setMarkerLocation -> e", e)
         const attributeService = this.ctx.$injector.get(AttributeService);
-        forkJoin(
+
-            this.data.filter(data => !!e[data.dataKey.name])
+        const entityId: EntityId = {
-                .map(data => {
+            entityType: e.$datasource.entityType,
-                    const entityId: EntityId = {
+            id: e.$datasource.entityId
-                        entityType: data.datasource.entityType,
+        };
-                        id: data.datasource.entityId
+        const keys = e.$datasource.dataKeys.map(key => {
-                    };
+            return {
-                    return attributeService.saveEntityAttributes(
+                key: key.name,
-                        entityId,
+                value: e[key.name]
-                        AttributeScope.SHARED_SCOPE,
+            }
-                        [{
+        })
-                            key: data.dataKey.name,
+        return attributeService.saveEntityAttributes(
-                            value: e[data.dataKey.name]
+            entityId,
-                        }]
+            AttributeScope.SHARED_SCOPE,
-                    );
+            keys
-                })).subscribe(res => {
+        ).subscribe(res => {
-                });
+        });
     }
 
     initSettings(settings: UnitedMapSettings): UnitedMapSettings {
@@ -214,8 +221,7 @@ export class MapWidgetController implements MapWidgetInterface {
         if (this.settings.draggableMarker) {
             this.map.setDataSources(parseData(this.data));
         }
-        else
+        this.map.updateMarkers(parseData(this.data));
-            this.map.updateMarkers(parseData(this.data));
     }
 
     resize() {

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

@@ -17,7 +17,6 @@
 import L from 'leaflet';
 import _ from 'lodash';
 import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models';
-import { parseWithTranslation } from '@app/core/utils';
 
 export function createTooltip(target: L.Layer,
     settings: MarkerSettings | PolylineSettings | PolygonSettings,

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

@@ -335,12 +335,7 @@ export const commonMapSettingsSchema =
             colorFunction: {
                 title: 'Color function: f(data, dsData, dsIndex)',
                 type: 'string'
-            },
+            },            
-            showPolygon: {
-                title: 'Show polygon',
-                type: 'boolean',
-                default: false
-            },
             markerImage: {
                 title: 'Custom marker image',
                 type: 'string'
@@ -439,8 +434,7 @@ export const commonMapSettingsSchema =
                     type: 'image'
                 }
             ]
-        },
+        }        
-        'showPolygon',
     ]
 };
 
@@ -450,6 +444,11 @@ export const mapPolygonSchema =
         title: 'Map Polygon Configuration',
         type: 'object',
         properties: {
+            showPolygon: {
+                title: 'Show polygon',
+                type: 'boolean',
+                default: false
+            },
             polygonKeyName: {
                 title: 'Polygon key name',
                 type: 'string',
@@ -491,6 +490,7 @@ export const mapPolygonSchema =
         required: []
     },
     form: [
+        'showPolygon',
         'polygonKeyName',
         {
             key: 'polygonColor',

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="trip-animation-widget">
     <div class="trip-animation-label-container" *ngIf="settings.showLabel">
-        {{label }}
+        {{label}}
     </div>
     <div class="trip-animation-container" fxLayout="column">
         <div class="map" #map></div>

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

@@ -100,8 +100,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   timeUpdated(time: number) {
     const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]);
     this.activeTrip = currentPosition[0];
-    this.minTime = moment(this.historicalData[0][this.historicalData.length - 1]?.time).format('YYYY-MM-DD HH:mm:ss')
+    this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss')
-     this.maxTime = moment(this.historicalData[0][0]?.time).format('YYYY-MM-DD HH:mm:ss')
+    this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss')
     this.calcLabel();
     this.calcTooltip();
     if (this.mapWidget) {

ui-ngx/src/tsconfig.app.json

@@ -2,7 +2,11 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify", "react", "react-dom", "jstree", "raphael", "canvas-gauges"]
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify",
+       "react", "react-dom", "jstree", "raphael", "canvas-gauges", "leaflet", "leaflet-markercluster"]
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true