`
- })
+ style="transform: translate(-10px, -10px)
+ rotate(${data.rotationAngle}deg);
+ ${style}">
`
+ });
}
else {
this.options.icon = null;
@@ -268,6 +269,7 @@ export default abstract class LeafletMap {
this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings);
}
});
+ this.markersData = markersData;
}
dragMarker = (e, data?) => {
@@ -278,7 +280,8 @@ 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);
+ if (this.bounds)
+ this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
this.markers.set(key, newMarker);
if (this.options.useClusterMarkers) {
this.markersCluster.addLayer(newMarker.leafletMarker);
@@ -313,6 +316,29 @@ export default abstract class LeafletMap {
}
}
+ updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) {
+ this.map$.subscribe(map => {
+ if (this.points) {
+ map.removeLayer(this.points);
+ }
+ this.points = new FeatureGroup();
+ pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => {
+ const point = L.circleMarker(this.convertPosition(data), {
+ color: this.options.pointColor,
+ radius: this.options.pointSize
+ });
+ if (!this.options.pointTooltipOnRightPanel) {
+ point.on('click', () => getTooltip(data));
+ }
+ else {
+ createTooltip(point, this.options, pointsData, getTooltip(data, false));
+ }
+ this.points.addLayer(point);
+ });
+ map.addLayer(this.points);
+ });
+ }
+
setImageAlias(alias: Observable
) {
}
@@ -337,15 +363,17 @@ export default abstract class LeafletMap {
this.ready$.subscribe(() => {
const poly = new Polyline(this.map,
data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
- const bounds = this.bounds.extend(poly.leafletPoly.getBounds());
- this.fitBounds(bounds)
- this.polylines.set(data[0].entityName, poly)
+ const bounds = poly.leafletPoly.getBounds();
+ this.fitBounds(bounds);
+ this.polylines.set(data[0].entityName, poly);
});
}
updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
this.ready$.subscribe(() => {
- this.polylines.get(key).updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);
+ const poly = this.polylines.get(key);
+ poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);
+ const bounds = poly.leafletPoly.getBounds();
});
}
@@ -370,7 +398,7 @@ export default abstract class LeafletMap {
createPolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) {
this.ready$.subscribe(() => {
const polygon = new Polygon(this.map, polyData, dataSources, settings);
- const bounds = this.bounds.extend(polygon.leafletPoly.getBounds());
+ const bounds = polygon.leafletPoly.getBounds();
this.fitBounds(bounds);
this.polygons.set(polyData.datasource.entityName, polygon);
});
@@ -380,7 +408,6 @@ export default abstract class LeafletMap {
this.ready$.subscribe(() => {
const poly = this.polygons.get(polyData.datasource.entityName);
poly.updatePolygon(polyData.data, dataSources, settings);
- this.fitBounds(poly.leafletPoly.getBounds());
});
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index 16e1c809ce..28e9686bc1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
@@ -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 };
@@ -108,7 +114,8 @@ export interface FormattedData {
export type PolygonSettings = {
showPolygon: boolean;
- showTooltip: any;
+ polygonKeyName: string;
+ polKeyName: string;// deprecated
polygonStrokeOpacity: number;
polygonOpacity: number;
polygonStrokeWeight: number;
@@ -116,12 +123,13 @@ 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 };
+ usePolygonColorFunction: boolean;
+ polygonTooltipFunction: GenericFunction;
polygonColorFunction?: GenericFunction;
}
@@ -154,6 +162,88 @@ export interface HistorySelectSettings {
buttonColor: string;
}
+export type TripAnimationSttings = {
+ pointColor: string;
+ pointSize: number;
+ pointTooltipOnRightPanel: boolean;
+}
+
export type actionsHandler = ($event: Event, datasource: Datasource) => void;
-export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings;
+export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings & TripAnimationSttings;
+
+interface IProvider {
+ MapClass: Type,
+ 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']
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
index 9900d98e0b..be618128dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
@@ -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;
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index 5c14ac80c3..fb3e6662f3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -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 ||
'${entityName}
Latitude: ${' +
settings.latKeyName + ':7}
Longitude: ${' + settings.lngKeyName + ':7}',
@@ -295,78 +297,4 @@ export class MapWidgetController implements MapWidgetInterface {
export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController;
-interface IProvider {
- MapClass: Type,
- 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']
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index 2e3927fdc4..7c8f50e13f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
@@ -120,7 +120,6 @@ export class Marker {
[this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage;
const currentColor = tinycolor(this.settings.useColorFunction ? safeExecute(this.settings.colorFunction,
[this.data, this.dataSources, this.data.dsIndex]) : this.settings.color).toHex();
-
if (currentImage && currentImage.url) {
aspectCache(currentImage.url).subscribe(
(aspect) => {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
index 4f1fc9dd72..6954d122c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
@@ -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));
}
@@ -71,10 +72,12 @@ export class Polygon {
this.map.removeLayer(this.leafletPoly);
}
- updatePolygonColor(settings) {
+ updatePolygonColor(settings: PolygonSettings) {
+ 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,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
index fce2fb3644..ac46c2772b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
@@ -109,13 +109,13 @@ export class ImageMap extends LeafletMap {
lastCenterPos.y /= prevHeight;
this.updateBounds(updateImage, lastCenterPos);
this.map.invalidateSize(true);
- // TODO: need add update marker position
+ this.updateMarkers(this.markersData);
}
}
}
}
- fitBounds(bounds: LatLngBounds, useDefaultZoom = false, padding?: LatLngTuple) { }
+ fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { }
initMap(updateImage?) {
if (!this.map && this.aspect > 0) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
index de155bf2b4..4f8808e3e4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
@@ -546,6 +546,20 @@ export const mapPolygonSchema =
type: 'boolean',
default: false
},
+ polygonTooltipPattern: {
+ title: 'Tooltip (for ex. \'Text ${keyName} units.\' or Link text\')',
+ type: 'string',
+ default: '${entityName}
TimeStamp: ${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',
@@ -570,7 +584,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'
@@ -710,6 +732,161 @@ 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'
+ }
+ },
+ 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'
+ }
+ ]
+};
+
+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: {
@@ -755,7 +932,6 @@ export const mapProviderSchema =
]
};
-
export const tripAnimationSchema = {
schema: {
title: 'Openstreet Map Configuration',
@@ -776,11 +952,6 @@ export const tripAnimationSchema = {
type: 'string',
default: 'longitude'
},
- polKeyName: {
- title: 'Polygon key name',
- type: 'string',
- default: 'coordinates'
- },
showLabel: {
title: 'Show label',
type: 'boolean',
@@ -834,148 +1005,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 text\')',
- type: 'string',
- default: '${entityName}
TimeStamp: ${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',
@@ -1015,111 +1044,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'
- }
- ]
- }]
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html
index b973284b53..9449e3aba9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html
@@ -32,6 +32,6 @@
[ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">