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 523f078bc7..16e1c809ce 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
@@ -94,6 +94,8 @@ export type MarkerSettings = {
tooltipFunction: GenericFunction;
labelFunction: GenericFunction;
markerImageFunction?: MarkerImageFunction;
+ markerOffsetX: number;
+ markerOffsetY: number;
}
export interface FormattedData {
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 3f4c4ab3f4..5c14ac80c3 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
@@ -96,7 +96,7 @@ export class MapWidgetController implements MapWidgetInterface {
const schema = initSchema();
addToSchema(schema, this.getProvidersSchema(mapProvider));
addGroupInfo(schema, 'Map Provider Settings');
- addToSchema(schema, addCondition(commonMapSettingsSchema, 'model.provider !== "image-map"'));
+ addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, 'Common Map Settings');
addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true', ['showPolygon']));
addGroupInfo(schema, 'Polygon Settings');
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 388f08eda5..38618efe2f 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
@@ -18,10 +18,12 @@ import L, { LeafletMouseEvent } from 'leaflet';
import { FormattedData, MarkerSettings } from './map-models';
import { aspectCache, createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
import tinycolor from 'tinycolor2';
+import { isDefined } from '@core/utils';
export class Marker {
leafletMarker: L.Marker;
tooltipOffset: [number, number];
+ markerOffset: [number, number];
tooltip: L.Popup;
location: L.LatLngExpression;
data: FormattedData;
@@ -34,9 +36,14 @@ export class Marker {
draggable: settings.draggableMarker
});
+ this.markerOffset = [
+ isDefined(settings.markerOffsetX) ? settings.markerOffsetX : 0.5,
+ isDefined(settings.markerOffsetY) ? settings.markerOffsetY : 1,
+ ];
+
this.createMarkerIcon((iconInfo) => {
this.leafletMarker.setIcon(iconInfo.icon);
- this.tooltipOffset = [0, -iconInfo.size[1] + 10];
+ this.tooltipOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
this.updateMarkerLabel(settings);
});
@@ -95,7 +102,7 @@ export class Marker {
updateMarkerIcon(settings: MarkerSettings) {
this.createMarkerIcon((iconInfo) => {
this.leafletMarker.setIcon(iconInfo.icon);
- this.tooltipOffset = [0, -iconInfo.size[1] + 10];
+ this.tooltipOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
this.updateMarkerLabel(settings);
});
}
@@ -130,7 +137,7 @@ export class Marker {
const icon = L.icon({
iconUrl: currentImage.url,
iconSize: [width, height],
- iconAnchor: [width / 2, height],
+ iconAnchor: [width * this.markerOffset[0], height * this.markerOffset[1]],
popupAnchor: [0, -height]
});
const iconInfo = {
@@ -152,7 +159,7 @@ export class Marker {
const icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color,
iconSize: [21, 34],
- iconAnchor: [10, 34],
+ iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]],
popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37],
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 bd12185ad6..fc4bbc6fcd 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
@@ -30,10 +30,11 @@ export class ImageMap extends LeafletMap {
width = 0;
height = 0;
imageUrl;
+ posFunction;
constructor($container: HTMLElement, options: UnitedMapSettings) {
super($container, options);
- options.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((origXPos, origYPos) => { x, y });
+ this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((origXPos, origYPos) => { x, y });
this.imageUrl = options.mapUrl;
aspectCache(this.imageUrl).subscribe(aspect => {
this.aspect = aspect;
@@ -132,9 +133,10 @@ export class ImageMap extends LeafletMap {
convertPosition(expression): L.LatLng {
if (isNaN(expression[this.options.xPosKeyName]) || isNaN(expression[this.options.yPosKeyName])) return null;
+ Object.assign(expression, this.posFunction(expression[this.options.xPosKeyName], expression[this.options.yPosKeyName]))
return this.pointToLatLng(
- expression[this.options.xPosKeyName] * this.width,
- expression[this.options.yPosKeyName] * this.height);
+ expression.x * this.width,
+ expression.y * this.height);
}
pointToLatLng(x, y): L.LatLng {
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 5008758e69..de155bf2b4 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
@@ -275,6 +275,16 @@ export const commonMapSettingsSchema =
type: 'string',
default: 'longitude'
},
+ xPosKeyName: {
+ title: 'X position key name',
+ type: 'string',
+ default: 'xPos'
+ },
+ yPosKeyName: {
+ title: 'Y position key name',
+ type: 'string',
+ default: 'yPos'
+ },
showLabel: {
title: 'Show label',
type: 'boolean',
@@ -323,6 +333,21 @@ export const commonMapSettingsSchema =
title: 'Tooltip function: f(data, dsData, dsIndex)',
type: 'string'
},
+ posFunction: {
+ title: 'Position conversion function: f(origXPos, origYPos), should return x,y coordinates as double from 0 to 1 each',
+ type: 'string',
+ default: 'return {x: origXPos, y: origYPos};'
+ },
+ markerOffsetX: {
+ title: 'Marker X offset relative to position',
+ type: 'number',
+ default: 0.5
+ },
+ markerOffsetY: {
+ title: 'Marker Y offset relative to position',
+ type: 'number',
+ default: 1
+ },
color: {
title: 'Color',
type: 'string'
@@ -366,14 +391,40 @@ export const commonMapSettingsSchema =
required: []
},
form: [
- 'defaultZoomLevel',
- 'useDefaultCenterPosition',
- 'defaultCenterPosition',
- 'fitMapBounds',
+ {
+ key: 'defaultZoomLevel',
+ condition: 'model.provider !== "image-map"'
+ },
+ {
+ key: 'useDefaultCenterPosition',
+ condition: 'model.provider !== "image-map"'
+ },
+ {
+ key: 'defaultCenterPosition',
+ condition: 'model.provider !== "image-map"'
+ },
+ {
+ key: 'fitMapBounds',
+ condition: 'model.provider !== "image-map"'
+ },
'draggableMarker',
'disableScrollZooming',
- 'latKeyName',
- 'lngKeyName',
+ {
+ key: 'latKeyName',
+ condition: 'model.provider !== "image-map"'
+ },
+ {
+ key: 'lngKeyName',
+ condition: 'model.provider !== "image-map"'
+ },
+ {
+ key: 'xPosKeyName',
+ condition: 'model.provider === "image-map"'
+ },
+ {
+ key: 'yPosKeyName',
+ condition: 'model.provider === "image-map"'
+ },
'showLabel',
'label',
'useLabelFunction',
@@ -407,6 +458,19 @@ export const commonMapSettingsSchema =
key: 'tooltipFunction',
type: 'javascript'
},
+ {
+ key: 'markerOffsetX',
+ condition: 'model.provider === "image-map"'
+ },
+ {
+ key: 'markerOffsetY',
+ condition: 'model.provider === "image-map"'
+ },
+ {
+ key: 'posFunction',
+ type: 'javascript',
+ condition: 'model.provider === "image-map"'
+ },
{
key: 'color',
type: 'color'
@@ -632,123 +696,6 @@ export const imageMapSettingsSchema =
title: 'Image URL source entity attribute',
type: 'string',
default: ''
- },
- disableScrollZooming: {
- title: 'Disable scroll zooming',
- type: 'boolean',
- default: false
- },
- xPosKeyName: {
- title: 'X position key name',
- type: 'string',
- default: 'xPos'
- },
- yPosKeyName: {
- title: 'Y position key name',
- type: 'string',
- default: 'yPos'
- },
- showLabel: {
- title: 'Show label',
- type: 'boolean',
- default: true
- },
- label: {
- title: 'Label (pattern examples: \'${entityName}\', \'${entityName}: (Text ${keyName} units.)\' )',
- type: 'string',
- default: '${entityName}'
- },
- useLabelFunction: {
- title: 'Use label function',
- type: 'boolean',
- default: false
- },
- labelFunction: {
- title: 'Label function: f(data, dsData, dsIndex)',
- type: 'string'
- },
- showTooltip: {
- title: 'Show tooltip',
- type: 'boolean',
- default: true
- },
- showTooltipAction: {
- title: 'Action for displaying the tooltip',
- type: 'string',
- default: 'click'
- },
- autocloseTooltip: {
- title: 'Auto-close tooltips',
- type: 'boolean',
- default: true
- },
- tooltipPattern: {
- title: 'Tooltip (for ex. \'Text ${keyName} units.\' or Link text\')',
- type: 'string',
- default: '${entityName}
X Pos: ${xPos:2}
Y Pos: ${yPos:2}'
- },
- useTooltipFunction: {
- title: 'Use tooltip function',
- type: 'boolean',
- default: false
- },
- tooltipFunction: {
- title: 'Tooltip function: f(data, dsData, dsIndex)',
- type: 'string'
- },
- color: {
- title: 'Color',
- type: 'string'
- },
- posFunction: {
- title: 'Position conversion function: f(origXPos, origYPos), should return x,y coordinates as double from 0 to 1 each',
- type: 'string',
- default: 'return {x: origXPos, y: origYPos};'
- },
- markerOffsetX: {
- title: 'Marker X offset relative to position',
- type: 'number',
- default: 0.5
- },
- markerOffsetY: {
- title: 'Marker Y offset relative to position',
- type: 'number',
- default: 1
- },
- useColorFunction: {
- title: 'Use color function',
- type: 'boolean',
- default: false
- },
- colorFunction: {
- title: 'Color function: f(data, dsData, dsIndex)',
- type: 'string'
- },
- markerImage: {
- title: 'Custom marker image',
- type: 'string'
- },
- markerImageSize: {
- title: 'Custom marker image size (px)',
- type: 'number',
- default: 34
- },
- useMarkerImageFunction: {
- title: 'Use marker image function',
- type: 'boolean',
- default: false
- },
- markerImageFunction: {
- title: 'Marker image function: f(data, images, dsData, dsIndex)',
- type: 'string'
- },
- markerImages: {
- title: 'Marker images',
- type: 'array',
- items: {
- title: 'Marker image',
- type: 'string'
- }
}
},
required: []
@@ -759,77 +706,7 @@ export const imageMapSettingsSchema =
type: 'image'
},
'imageEntityAlias',
- 'imageUrlAttribute',
- 'disableScrollZooming',
- 'xPosKeyName',
- 'yPosKeyName',
- 'showLabel',
- 'label',
- 'useLabelFunction',
- {
- key: 'labelFunction',
- type: 'javascript'
- },
- 'showTooltip',
- {
- key: 'showTooltipAction',
- type: 'rc-select',
- multiple: false,
- items: [
- {
- value: 'click',
- label: 'Show tooltip on click (Default)'
- },
- {
- value: 'hover',
- label: 'Show tooltip on hover'
- }
- ]
- },
- 'autocloseTooltip',
- {
- key: 'tooltipPattern',
- type: 'textarea'
- },
- 'useTooltipFunction',
- {
- key: 'tooltipFunction',
- type: 'javascript'
- },
- {
- key: 'color',
- type: 'color'
- },
- {
- key: 'posFunction',
- type: 'javascript'
- },
- 'markerOffsetX',
- 'markerOffsetY',
- 'useColorFunction',
- {
- key: 'colorFunction',
- type: 'javascript'
- },
- {
- key: 'markerImage',
- type: 'image'
- },
- 'markerImageSize',
- 'useMarkerImageFunction',
- {
- key: 'markerImageFunction',
- type: 'javascript'
- },
- {
- key: 'markerImages',
- items: [
- {
- key: 'markerImages[]',
- type: 'image'
- }
- ]
- }
+ 'imageUrlAttribute'
]
};