WIP on trip-animation settings

@@ -15,13 +15,19 @@
 ///
 
 import { LatLngTuple } from 'leaflet';
-import { Datasource } from '@app/shared/models/widget.models';
+import { Datasource, JsonSettingsSchema } from '@app/shared/models/widget.models';
+import { Type } from '@angular/core';
+import LeafletMap from './leaflet-map';
+import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
+import {
+    openstreetMapSettingsSchema, tencentMapSettingsSchema,
+    googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema
+} from './schemes';
 
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 
 export type MapSettings = {
-    polygonKeyName: any;
     draggableMarker: boolean;
     initCallback?: () => any;
     posFunction: (origXPos, origYPos) => { x, y };
@@ -106,7 +112,8 @@ export interface FormattedData {
 
 export type PolygonSettings = {
     showPolygon: boolean;
-    showTooltip: any;
+    polygonKeyName: string;
+    polKeyName: string;// deprecated
     polygonStrokeOpacity: number;
     polygonOpacity: number;
     polygonStrokeWeight: number;
@@ -114,12 +121,12 @@ export type PolygonSettings = {
     polygonColor: string;
     showPolygonTooltip: boolean;
     autocloseTooltip: boolean;
-    tooltipFunction: GenericFunction;
     showTooltipAction: string;
     tooltipAction: { [name: string]: actionsHandler };
-    tooltipPattern: string;
-    useTooltipFunction: boolean;
+    polygonTooltipPattern: string;
+    usePolygonTooltipFunction: boolean;
     polygonClick: { [name: string]: actionsHandler };
+    polygonTooltipFunction: GenericFunction;
     polygonColorFunction?: GenericFunction;
 }
 
@@ -155,3 +162,79 @@ export interface HistorySelectSettings {
 export type actionsHandler = ($event: Event, datasource: Datasource) => void;
 
 export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings;
+
+interface IProvider {
+    MapClass: Type<LeafletMap>,
+    schema: JsonSettingsSchema,
+    name: string
+}
+
+export const providerSets: { [key: string]: IProvider } = {
+    'openstreet-map': {
+        MapClass: OpenStreetMap,
+        schema: openstreetMapSettingsSchema,
+        name: 'openstreet-map',
+    },
+    'tencent-map': {
+        MapClass: TencentMap,
+        schema: tencentMapSettingsSchema,
+        name: 'tencent-map'
+    },
+    'google-map': {
+        MapClass: GoogleMap,
+        schema: googleMapSettingsSchema,
+        name: 'google-map'
+    },
+    here: {
+        MapClass: HEREMap,
+        schema: hereMapSettingsSchema,
+        name: 'here'
+    },
+    'image-map': {
+        MapClass: ImageMap,
+        schema: imageMapSettingsSchema,
+        name: 'image-map'
+    }
+};
+
+export const defaultSettings: any = {
+    xPosKeyName: 'xPos',
+    yPosKeyName: 'yPos',
+    markerOffsetX: 0.5,
+    markerOffsetY: 1,
+    latKeyName: 'latitude',
+    lngKeyName: 'longitude',
+    polygonKeyName: 'coordinates',
+    showLabel: false,
+    label: '${entityName}',
+    showTooltip: false,
+    useDefaultCenterPosition: false,
+    showTooltipAction: 'click',
+    autocloseTooltip: false,
+    showPolygon: false,
+    labelColor: '#000000',
+    color: '#FE7569',
+    polygonColor: '#0000ff',
+    polygonStrokeColor: '#fe0001',
+    polygonOpacity: 0.5,
+    polygonStrokeOpacity: 1,
+    polygonStrokeWeight: 1,
+    useLabelFunction: false,
+    markerImages: [],
+    strokeWeight: 2,
+    strokeOpacity: 1.0,
+    initCallback: () => { },
+    defaultZoomLevel: 8,
+    disableScrollZooming: false,
+    minZoomLevel: 16,
+    credentials: '',
+    markerClusteringSetting: null,
+    draggableMarker: false,
+    fitMapBounds: true
+};
+
+export const hereProviders = [
+    'HERE.normalDay',
+    'HERE.normalNight',
+    'HERE.hybridDay',
+    'HERE.terrainDay']

@@ -26,7 +26,7 @@ export interface MapWidgetInterface {
 
 export interface MapWidgetStaticInterface {
     settingsSchema(mapProvider?: MapProviders, drawRoutes?: boolean): JsonSettingsSchema;
-    getProvidersSchema(mapProvider?: MapProviders): JsonSettingsSchema
+    getProvidersSchema(mapProvider?: MapProviders, ignoreImageMap?: boolean): JsonSettingsSchema
     dataKeySettingsSchema(): object;
     actionSources(): object;
 }

@@ -14,23 +14,17 @@
 /// limitations under the License.
 ///
 
-import { MapProviders, UnitedMapSettings } from './map-models';
+import { MapProviders, UnitedMapSettings, providerSets, hereProviders, defaultSettings } from './map-models';
 import LeafletMap from './leaflet-map';
 import {
-    openstreetMapSettingsSchema,
-    googleMapSettingsSchema,
-    imageMapSettingsSchema,
-    tencentMapSettingsSchema,
     commonMapSettingsSchema,
     routeMapSettingsSchema,
     markerClusteringSettingsSchema,
     markerClusteringSettingsSchemaLeaflet,
-    hereMapSettingsSchema,
     mapProviderSchema,
     mapPolygonSchema
 } from './schemes';
 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
-import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
 import { of, Subject } from 'rxjs';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
@@ -39,7 +33,6 @@ import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType,
 import { EntityId } from '@shared/models/id/entity-id';
 import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { AttributeService } from '@core/http/attribute.service';
-import { Type } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { UtilsService } from '@core/services/utils.service';
 
@@ -85,11 +78,19 @@ export class MapWidgetController implements MapWidgetInterface {
         return {};
     }
 
-    public static getProvidersSchema(mapProvider: MapProviders) {
-        mapProviderSchema.schema.properties.provider.default = mapProvider;
-        return mergeSchemes([mapProviderSchema,
+    public static getProvidersSchema(mapProvider: MapProviders, ignoreImageMap = false) {
+        if (mapProvider)
+            mapProviderSchema.schema.properties.provider.default = mapProvider;
+        const providerSchema = mapProviderSchema;
+        if (ignoreImageMap) {
+            providerSchema.form[0].items = providerSchema.form[0]?.items.filter(item => item.value !== 'image-map');
+        }
+        return mergeSchemes([providerSchema,
             ...Object.keys(providerSets)?.map(
-                (key: string) => { const setting = providerSets[key]; return addCondition(setting?.schema, `model.provider === '${setting.name}'`) })]);
+                (key: string) => {
+                    const setting = providerSets[key];
+                    return addCondition(setting?.schema, `model.provider === '${setting.name}'`);
+                })]);
     }
 
     public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema {
@@ -218,6 +219,7 @@ export class MapWidgetController implements MapWidgetInterface {
             polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
             markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
             labelColor: this.ctx.widgetConfig.color,
+            polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName,
             tooltipPattern: settings.tooltipPattern ||
                 '<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' +
                 settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}',
@@ -295,78 +297,4 @@ export class MapWidgetController implements MapWidgetInterface {
 
 export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController;
 
-interface IProvider {
-    MapClass: Type<LeafletMap>,
-    schema: JsonSettingsSchema,
-    name: string
-}
-
-export const providerSets: { [key: string]: IProvider } = {
-    'openstreet-map': {
-        MapClass: OpenStreetMap,
-        schema: openstreetMapSettingsSchema,
-        name: 'openstreet-map',
-    },
-    'tencent-map': {
-        MapClass: TencentMap,
-        schema: tencentMapSettingsSchema,
-        name: 'tencent-map'
-    },
-    'google-map': {
-        MapClass: GoogleMap,
-        schema: googleMapSettingsSchema,
-        name: 'google-map'
-    },
-    here: {
-        MapClass: HEREMap,
-        schema: hereMapSettingsSchema,
-        name: 'here'
-    },
-    'image-map': {
-        MapClass: ImageMap,
-        schema: imageMapSettingsSchema,
-        name: 'image-map'
-    }
-};
-
-export const defaultSettings: any = {
-    xPosKeyName: 'xPos',
-    yPosKeyName: 'yPos',
-    markerOffsetX: 0.5,
-    markerOffsetY: 1,
-    latKeyName: 'latitude',
-    lngKeyName: 'longitude',
-    polygonKeyName: 'coordinates',
-    showLabel: false,
-    label: '${entityName}',
-    showTooltip: false,
-    useDefaultCenterPosition: false,
-    showTooltipAction: 'click',
-    autocloseTooltip: false,
-    showPolygon: false,
-    labelColor: '#000000',
-    color: '#FE7569',
-    polygonColor: '#0000ff',
-    polygonStrokeColor: '#fe0001',
-    polygonOpacity: 0.5,
-    polygonStrokeOpacity: 1,
-    polygonStrokeWeight: 1,
-    useLabelFunction: false,
-    markerImages: [],
-    strokeWeight: 2,
-    strokeOpacity: 1.0,
-    initCallback: () => { },
-    defaultZoomLevel: 8,
-    disableScrollZooming: false,
-    minZoomLevel: 16,
-    credentials: '',
-    markerClusteringSetting: null,
-    draggableMarker: false,
-    fitMapBounds: true
-};
 
-export const hereProviders = [
-    'HERE.normalDay',
-    'HERE.normalNight',
-    'HERE.hybridDay',
-    'HERE.terrainDay']

@@ -53,8 +53,9 @@ export class Polygon {
     }
 
     updateTooltip(data: DatasourceData) {
-        const pattern = this.settings.useTooltipFunction ?
-            safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern;
+        const pattern = this.settings.usePolygonTooltipFunction ?
+            safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) :
+            this.settings.polygonTooltipPattern;
         this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
     }
 
@@ -72,9 +73,11 @@ export class Polygon {
     }
 
     updatePolygonColor(settings) {
+        const color = settings.usePolygonColorFunction ?
+            safeExecute(settings.polygoncolorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor;
         const style: L.PathOptions = {
             fill: true,
-            fillColor: settings.polygonColor,
+            fillColor: color,
             color: settings.polygonStrokeColor,
             weight: settings.polygonStrokeWeight,
             fillOpacity: settings.polygonOpacity,

@@ -482,6 +482,20 @@ export const mapPolygonSchema =
                 type: 'boolean',
                 default: false
             },
+            polygonTooltipPattern: {
+                title: 'Tooltip (for ex. \'Text ${keyName} units.\' or <link-act name=\'my-action\'>Link text</link-act>\')',
+                type: 'string',
+                default: '<b>${entityName}</b><br/><br/><b>TimeStamp:</b> ${ts:7}'
+            },
+            usePolygonTooltipFunction: {
+                title: 'Use polygon tooltip function',
+                type: 'boolean',
+                default: false
+            },
+            polygonTooltipFunction: {
+                title: 'Polygon tooltip function: f(data, dsData, dsIndex)',
+                type: 'string'
+            },
             usePolygonColorFunction: {
                 title: 'Use polygon color function',
                 type: 'boolean',
@@ -506,7 +520,15 @@ export const mapPolygonSchema =
             key: 'polygonStrokeColor',
             type: 'color'
         },
-        'polygonStrokeOpacity', 'polygonStrokeWeight', 'usePolygonColorFunction', 'showPolygonTooltip',
+        'polygonStrokeOpacity', 'polygonStrokeWeight', 'showPolygonTooltip',
+        {
+            key: 'polygonTooltipPattern',
+            type: 'textarea'
+        }, 'usePolygonTooltipFunction', {
+            key: 'polygonTooltipFunction',
+            type: 'javascript'
+        },
+        'usePolygonColorFunction',
         {
             key: 'polygonColorFunction',
             type: 'javascript'
@@ -833,6 +855,195 @@ export const imageMapSettingsSchema =
     ]
 };
 
+export const pathSchema =
+{
+    schema: {
+        title: 'Trip Animation Path Configuration',
+        type: 'object',
+        properties: {
+            color: {
+                title: 'Path color',
+                type: 'string'
+            },
+            strokeWeight: {
+                title: 'Stroke weight',
+                type: 'number',
+                default: 2
+            },
+            strokeOpacity: {
+                title: 'Stroke opacity',
+                type: 'number',
+                default: 1
+            },
+            useColorFunction: {
+                title: 'Use path color function',
+                type: 'boolean',
+                default: false
+            },
+            colorFunction: {
+                title: 'Path color function: f(data, dsData, dsIndex)',
+                type: 'string'
+            },
+            usePolylineDecorator: {
+                title: 'Use path decorator',
+                type: 'boolean',
+                default: false
+            },
+            decoratorSymbol: {
+                title: 'Decorator symbol',
+                type: 'string',
+                default: 'arrowHead'
+            },
+            decoratorSymbolSize: {
+                title: 'Decorator symbol size (px)',
+                type: 'number',
+                default: 10
+            },
+            useDecoratorCustomColor: {
+                title: 'Use path decorator custom color',
+                type: 'boolean',
+                default: false
+            },
+            decoratorCustomColor: {
+                title: 'Decorator custom color',
+                type: 'string',
+                default: '#000'
+            },
+            decoratorOffset: {
+                title: 'Decorator offset',
+                type: 'string',
+                default: '20px'
+            },
+            endDecoratorOffset: {
+                title: 'End decorator offset',
+                type: 'string',
+                default: '20px'
+            },
+            decoratorRepeat: {
+                title: 'Decorator repeat',
+                type: 'string',
+                default: '20px'
+            },
+            showPoints: {
+                title: 'Show points',
+                type: 'boolean',
+                default: false
+            },
+            pointColor: {
+                title: 'Point color',
+                type: 'string'
+            },
+            pointSize: {
+                title: 'Point size (px)',
+                type: 'number',
+                default: 10
+            },
+            usePointAsAnchor: {
+                title: 'Use point as anchor',
+                type: 'boolean',
+                default: false
+            },
+            pointAsAnchorFunction: {
+                title: 'Point as anchor function: f(data, dsData, dsIndex)',
+                type: 'string'
+            },
+            pointTooltipOnRightPanel: {
+                title: 'Independant point tooltip',
+                type: 'boolean',
+                default: true
+            },
+        },
+        required: []
+    },
+    form: [
+        {
+            key: 'color',
+            type: 'color'
+        }, 'useColorFunction', {
+            key: 'colorFunction',
+            type: 'javascript'
+        }, 'strokeWeight', 'strokeOpacity',
+        'usePolylineDecorator', {
+            key: 'decoratorSymbol',
+            type: 'rc-select',
+            multiple: false,
+            items: [{
+                value: 'arrowHead',
+                label: 'Arrow'
+            }, {
+                value: 'dash',
+                label: 'Dash'
+            }]
+        }, 'decoratorSymbolSize', 'useDecoratorCustomColor', {
+            key: 'decoratorCustomColor',
+            type: 'color'
+        }, {
+            key: 'decoratorOffset',
+            type: 'textarea'
+        }, {
+            key: 'endDecoratorOffset',
+            type: 'textarea'
+        }, {
+            key: 'decoratorRepeat',
+            type: 'textarea'
+        }, 'showPoints', {
+            key: 'pointColor',
+            type: 'color'
+        }, 'pointSize', 'usePointAsAnchor', {
+            key: 'pointAsAnchorFunction',
+            type: 'javascript'
+        }, 'pointTooltipOnRightPanel',
+    ]
+};
+
+export const pointSchema =
+{
+    schema: {
+        title: 'Trip Animation Path Configuration',
+        type: 'object',
+        properties: {
+            showPoints: {
+                title: 'Show points',
+                type: 'boolean',
+                default: false
+            },
+            pointColor: {
+                title: 'Point color',
+                type: 'string'
+            },
+            pointSize: {
+                title: 'Point size (px)',
+                type: 'number',
+                default: 10
+            },
+            usePointAsAnchor: {
+                title: 'Use point as anchor',
+                type: 'boolean',
+                default: false
+            },
+            pointAsAnchorFunction: {
+                title: 'Point as anchor function: f(data, dsData, dsIndex)',
+                type: 'string'
+            },
+            pointTooltipOnRightPanel: {
+                title: 'Independant point tooltip',
+                type: 'boolean',
+                default: true
+            },
+        },
+        required: []
+    },
+    form: [
+        'showPoints', {
+            key: 'pointColor',
+            type: 'color'
+        }, 'pointSize', 'usePointAsAnchor', {
+            key: 'pointAsAnchorFunction',
+            type: 'javascript'
+        }, 'pointTooltipOnRightPanel',
+    ]
+};
+
 export const mapProviderSchema =
 {
     schema: {
@@ -878,7 +1089,6 @@ export const mapProviderSchema =
     ]
 };
 
-
 export const tripAnimationSchema = {
     schema: {
         title: 'Openstreet Map Configuration',
@@ -899,11 +1109,6 @@ export const tripAnimationSchema = {
                 type: 'string',
                 default: 'longitude'
             },
-            polKeyName: {
-                title: 'Polygon key name',
-                type: 'string',
-                default: 'coordinates'
-            },
             showLabel: {
                 title: 'Show label',
                 type: 'boolean',
@@ -957,148 +1162,6 @@ export const tripAnimationSchema = {
                 title: 'Tooltip function: f(data, dsData, dsIndex)',
                 type: 'string'
             },
-            color: {
-                title: 'Path color',
-                type: 'string'
-            },
-            strokeWeight: {
-                title: 'Stroke weight',
-                type: 'number',
-                default: 2
-            },
-            strokeOpacity: {
-                title: 'Stroke opacity',
-                type: 'number',
-                default: 1
-            },
-            useColorFunction: {
-                title: 'Use path color function',
-                type: 'boolean',
-                default: false
-            },
-            colorFunction: {
-                title: 'Path color function: f(data, dsData, dsIndex)',
-                type: 'string'
-            },
-            usePolylineDecorator: {
-                title: 'Use path decorator',
-                type: 'boolean',
-                default: false
-            },
-            decoratorSymbol: {
-                title: 'Decorator symbol',
-                type: 'string',
-                default: 'arrowHead'
-            },
-            decoratorSymbolSize: {
-                title: 'Decorator symbol size (px)',
-                type: 'number',
-                default: 10
-            },
-            useDecoratorCustomColor: {
-                title: 'Use path decorator custom color',
-                type: 'boolean',
-                default: false
-            },
-            decoratorCustomColor: {
-                title: 'Decorator custom color',
-                type: 'string',
-                default: '#000'
-            },
-            decoratorOffset: {
-                title: 'Decorator offset',
-                type: 'string',
-                default: '20px'
-            },
-            endDecoratorOffset: {
-                title: 'End decorator offset',
-                type: 'string',
-                default: '20px'
-            },
-            decoratorRepeat: {
-                title: 'Decorator repeat',
-                type: 'string',
-                default: '20px'
-            },
-            showPolygon: {
-                title: 'Show polygon',
-                type: 'boolean',
-                default: false
-            },
-            polygonTooltipPattern: {
-                title: 'Tooltip (for ex. \'Text ${keyName} units.\' or <link-act name=\'my-action\'>Link text</link-act>\')',
-                type: 'string',
-                default: '<b>${entityName}</b><br/><br/><b>TimeStamp:</b> ${ts:7}'
-            },
-            usePolygonTooltipFunction: {
-                title: 'Use polygon tooltip function',
-                type: 'boolean',
-                default: false
-            },
-            polygonTooltipFunction: {
-                title: 'Polygon tooltip function: f(data, dsData, dsIndex)',
-                type: 'string'
-            },
-            polygonColor: {
-                title: 'Polygon color',
-                type: 'string'
-            },
-            polygonOpacity: {
-                title: 'Polygon opacity',
-                type: 'number',
-                default: 0.5
-            },
-            polygonStrokeColor: {
-                title: 'Polygon border color',
-                type: 'string'
-            },
-            polygonStrokeOpacity: {
-                title: 'Polygon border opacity',
-                type: 'number',
-                default: 1
-            },
-            polygonStrokeWeight: {
-                title: 'Polygon border weight',
-                type: 'number',
-                default: 1
-            },
-            usePolygonColorFunction: {
-                title: 'Use polygon color function',
-                type: 'boolean',
-                default: false
-            },
-            polygonColorFunction: {
-                title: 'Polygon Color function: f(data, dsData, dsIndex)',
-                type: 'string'
-            },
-            showPoints: {
-                title: 'Show points',
-                type: 'boolean',
-                default: false
-            },
-            pointColor: {
-                title: 'Point color',
-                type: 'string'
-            },
-            pointSize: {
-                title: 'Point size (px)',
-                type: 'number',
-                default: 10
-            },
-            usePointAsAnchor: {
-                title: 'Use point as anchor',
-                type: 'boolean',
-                default: false
-            },
-            pointAsAnchorFunction: {
-                title: 'Point as anchor function: f(data, dsData, dsIndex)',
-                type: 'string'
-            },
-            pointTooltipOnRightPanel: {
-                title: 'Independant point tooltip',
-                type: 'boolean',
-                default: true
-            },
             autocloseTooltip: {
                 title: 'Auto-close point popup',
                 type: 'boolean',
@@ -1138,111 +1201,35 @@ export const tripAnimationSchema = {
         },
         required: []
     },
-    form: [{
-        key: 'mapProvider',
-        type: 'rc-select',
-        multiple: false,
-        items: [{
-            value: 'OpenStreetMap.Mapnik',
-            label: 'OpenStreetMap.Mapnik (Default)'
-        }, {
-            value: 'OpenStreetMap.BlackAndWhite',
-            label: 'OpenStreetMap.BlackAndWhite'
-        }, {
-            value: 'OpenStreetMap.HOT',
-            label: 'OpenStreetMap.HOT'
-        }, {
-            value: 'Esri.WorldStreetMap',
-            label: 'Esri.WorldStreetMap'
-        }, {
-            value: 'Esri.WorldTopoMap',
-            label: 'Esri.WorldTopoMap'
-        }, {
-            value: 'CartoDB.Positron',
-            label: 'CartoDB.Positron'
-        }, {
-            value: 'CartoDB.DarkMatter',
-            label: 'CartoDB.DarkMatter'
-        }]
-    }, 'normalizationStep', 'latKeyName', 'lngKeyName', 'polKeyName', 'showLabel', 'label', 'useLabelFunction', {
+    form: ['normalizationStep', 'latKeyName', 'lngKeyName', 'showLabel', 'label', 'useLabelFunction', {
         key: 'labelFunction',
         type: 'javascript'
     }, 'showTooltip', {
-        key: 'tooltipColor',
-        type: 'color'
-    }, {
-        key: 'tooltipFontColor',
-        type: 'color'
-    }, 'tooltipOpacity', {
-        key: 'tooltipPattern',
-        type: 'textarea'
-    }, 'useTooltipFunction', {
-        key: 'tooltipFunction',
-        type: 'javascript'
-    }, {
-        key: 'color',
-        type: 'color'
-    }, 'useColorFunction', {
-        key: 'colorFunction',
-        type: 'javascript'
-    }, 'usePolylineDecorator', {
-        key: 'decoratorSymbol',
-        type: 'rc-select',
-        multiple: false,
-        items: [{
-            value: 'arrowHead',
-            label: 'Arrow'
+            key: 'tooltipColor',
+            type: 'color'
+        }, {
+            key: 'tooltipFontColor',
+            type: 'color'
+        }, 'tooltipOpacity', {
+            key: 'tooltipPattern',
+            type: 'textarea'
+        }, 'useTooltipFunction', {
+            key: 'tooltipFunction',
+            type: 'javascript'
+        }, 'autocloseTooltip', {
+            key: 'markerImage',
+            type: 'image'
+        }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction',
+        {
+            key: 'markerImageFunction',
+            type: 'javascript'
         }, {
-            value: 'dash',
-            label: 'Dash'
+            key: 'markerImages',
+            items: [
+                {
+                    key: 'markerImages[]',
+                    type: 'image'
+                }
+            ]
         }]
-    }, 'decoratorSymbolSize', 'useDecoratorCustomColor', {
-        key: 'decoratorCustomColor',
-        type: 'color'
-    }, {
-        key: 'decoratorOffset',
-        type: 'textarea'
-    }, {
-        key: 'endDecoratorOffset',
-        type: 'textarea'
-    }, {
-        key: 'decoratorRepeat',
-        type: 'textarea'
-    }, 'strokeWeight', 'strokeOpacity', 'showPolygon', {
-        key: 'polygonTooltipPattern',
-        type: 'textarea'
-    }, 'usePolygonTooltipFunction', {
-        key: 'polygonTooltipFunction',
-        type: 'javascript'
-    }, {
-        key: 'polygonColor',
-        type: 'color'
-    }, 'polygonOpacity', {
-        key: 'polygonStrokeColor',
-        type: 'color'
-    }, 'polygonStrokeOpacity', 'polygonStrokeWeight', 'usePolygonColorFunction', {
-        key: 'polygonColorFunction',
-        type: 'javascript'
-    }, 'showPoints', {
-        key: 'pointColor',
-        type: 'color'
-    }, 'pointSize', 'usePointAsAnchor', {
-        key: 'pointAsAnchorFunction',
-        type: 'javascript'
-    }, 'pointTooltipOnRightPanel', 'autocloseTooltip', {
-        key: 'markerImage',
-        type: 'image'
-    }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction',
-    {
-        key: 'markerImageFunction',
-        type: 'javascript'
-    }, {
-        key: 'markerImages',
-        items: [
-            {
-                key: 'markerImages[]',
-                type: 'image'
-            }
-        ]
-    }]
 }

@@ -22,8 +22,8 @@ import { interpolateOnPointSegment } from 'leaflet-geometryutil';
 import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, SecurityContext, ViewChild } from '@angular/core';
 import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2';
 import { MapProviders } from '../lib/maps/map-models';
-import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils';
-import { tripAnimationSchema } from '../lib/maps/schemes';
+import { initSchema, addToSchema, addGroupInfo, addCondition } from '@app/core/schema-utils';
+import { tripAnimationSchema, mapPolygonSchema, pathSchema, pointSchema } from '../lib/maps/schemes';
 import { DomSanitizer } from '@angular/platform-browser';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 import { findAngle, getRatio, parseArray, parseWithTranslation, safeExecute } from '../lib/maps/maps-utils';
@@ -61,10 +61,16 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
 
   static getSettingsSchema(): JsonSettingsSchema {
     const schema = initSchema();
-    addToSchema(schema, TbMapWidgetV2.getProvidersSchema());
+    addToSchema(schema, TbMapWidgetV2.getProvidersSchema(null, true));
     addGroupInfo(schema, 'Map Provider Settings');
     addToSchema(schema, tripAnimationSchema);
     addGroupInfo(schema, 'Trip Animation Settings');
+    addToSchema(schema, pathSchema);
+    addGroupInfo(schema, 'Path Settings');
+    addToSchema(schema, addCondition(pointSchema, 'model.showPoint === true', ['showPoint']));
+    addGroupInfo(schema, 'Polygon Settings');
+    addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true', ['showPolygon']));
+    addGroupInfo(schema, 'Polygon Settings');
     return schema;
   }
 
@@ -79,7 +85,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     }
     this.settings = { ...settings, ...this.ctx.settings };
     const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
-    if (subscription) subscription.callbacks.onDataUpdated = (updated) => {
+    if (subscription) subscription.callbacks.onDataUpdated = () => {
       this.historicalData = parseArray(this.ctx.data);
       this.activeTrip = this.historicalData[0][0];
       this.calculateIntervals();
@@ -107,6 +113,9 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       if (this.settings.showPolygon) {
         this.mapWidget.map.updatePolygons(this.interpolatedData);
       }
+      if(this.settings.showPoint){
+        this.mapWidget.map.updateMarkers(this.interpolatedData)
+      }
       this.mapWidget.map.updateMarkers(currentPosition);
     }
   }