MindSphere Web Components
Custom Map
The Custom Map displays assets of the current tenant based on their hierarchy level. The background image for each level can be uploaded by a user. The position of the assets can be changed by drag and drop.
Example¶
Component with an uploaded custom image¶
Empty component¶
Interface¶
Selector¶
1 | <mdsp-custom-map></mdsp-custom-map> |
Properties¶
Name | Type | Corresponding attribute | Default | Description | Allowed Values |
---|---|---|---|---|---|
assetClickHandler | AssetClickHandlerType |
asset-click-handler | Custom | Configures the event handler type for when the user selects an asset or asset group. | - Custom: Performs custom actions that you have implemented. - SelectionList: Opens an embedded pop up. |
assetId | string |
asset-id | ID of the asset of which the custom map is shown | ||
clusterDistance | number |
cluster-distance | 40 | Configures the minimum distance between clusters in pixels. Disables clustering if set to 0. | |
context | string |
context | Configures the context of the component. See also here. | ||
draggable | boolean |
draggable | Enables dragging of the image if true . |
||
errorNotification | boolean |
error-notification | Enables error control if an error is thrown. This can be used for debug purposes. For productive use, the error event should be caught and handled in the application. See also here. |
||
hierarchyClusterDistance | number |
hierarchy-cluster-distance | 60 | Configures the minimum distance between clusters in pixels. Disables clustering if set to 0. | |
hierarchyMarkerStyle | MapHierarchyMarkerStyle |
Returns an object for customizing the hierarchy marker, refer to MapHierarchyMarkerStyle model. | |||
locale | string |
locale | Specifies the locale in which the component is displayed. The locales en and de are provided by default.See also here. |
||
localeManager | LocaleManager |
Returns a LocaleManager object. This can be used to add locales or to get the locale settings. See also here. |
|||
markerStyle | MapMarkerStyle |
Returns an object for customizing the marker, refer to MapMarkerStyle model. | |||
selectedAsset | IAsset |
The asset that is selected on the map | |||
selectedAssetId | string |
selected-asset-id | ID of the asset that is selected on the map | ||
sharedAssets | boolean |
shared-assets | false | Specifies whether shared assets from other tenants are displayed. | |
subtenantFilter | string |
subtenant-filter | null | Specifies whether only assets of a specific subtenant should be displayed. | |
toolbarMode | CustomMapToolbarMode |
toolbar-mode | Default | Defines toolbar type. | - None: hides embedded toolbar. - Default: shows the embedded toolbar. |
wheelZoom | boolean |
wheel-zoom | false | Enables zoom control by mouse wheel if true . Otherwise, the control key must be pressed for zooming. |
Events¶
Name | Type | Description |
---|---|---|
selectedAssetChanged | EventEmitter<IAsset> |
Triggered when a new asset or asset cluster is selected. This event is only triggered if SelectionList is configured in assetClickHandler. |
connected | EventEmitter<any> |
Triggered after the component is created, initialized and appended to the DOM tree. |
error | EventEmitter<MdspUiError> |
Triggered when an error occurs in the component or while accessing APIs. See also here. |
Models¶
IAsset
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | interface IAsset { assetId: string; tenantId: string; name: string; etag: number; externalId: string; t2Tenant: string; subTenant: string; description: string; parentId: string; typeId: string; location: ILocation; variables: any[]; aspects: any[]; deleted: string; sharing?: ISharing; fileAssignments: any[]; locks: any[]; timezone: string; twinType: string; _links: any; } |
ILocation
1 2 3 4 5 6 7 8 9 | interface ILocation { country: string; region: string; locality: string; streetAddress: string; postalCode: string; longitude: number; latitude: number; } |
ISharing
1 2 3 | interface ISharing { modes: SharingMode[]; } |
SharingMode
1 2 3 4 | enum SharingMode { Sharer = "SHARER", Receiver = "RECEIVER" } |
MapHierarchyMarkerStyle
1 2 3 4 5 6 | class MapHierarchyMarkerStyle { public set default(style: any); public set selected(style: any); public set clustered(style: any); public set clusteredSelected(style: any); } |
MapMarkerStyle
1 2 3 4 5 6 | class MapMarkerStyle { public set default(style: any); public set selected(style: any); public set clustered(style: any); public set clusteredSelected(style: any); } |
Remarks¶
- The Custom Map supports up to 2,000 markers if
clusterDistance
is set to 0. - It is recommended to adapt the
clusterDistance
based on the pin size and number of assets in a tenant. - For shared assets from other tenants the background image and the position of the assets cannot be modified.
Roles¶
One of the following roles is required:
mdsp:core:assetmanagement.admin
mdsp:core:assetmanagement.standarduser
mdsp:core:assetmanagement.subtenantuser
Snippets¶
Use full-featured custom map¶
The following snippet will enable most common features of the custom map.
1 | <mdsp-custom-map wheel-zoom="true" draggable="true" asset-click-handler="SelectionList"></mdsp-custom-map> |
Use Custom Markers¶
This sample uses PNG images.
1 2 3 4 5 6 7 8 9 | const customMapComp = document.querySelector('mdsp-custom-map'); customMap.markerStyle.default = { src: './lib/pin_red.png'}; customMap.markerStyle.selected = { src: './lib/pin_red_selected.png'}; customMap.markerStyle.clustered = { src: './lib/clustered.png'}; customMap.markerStyle.clusteredSelected = { src: './lib/clustered_selected.png'}; customMap.hierarchyMarkerStyle.default = { src: './lib/rect_red.png'}; customMap.hierarchyMarkerStyle.selected = { src: './lib/rect_red_selected.png'}; customMap.hierarchyMarkerStyle.clustered = { src: './lib/rect_clustered.png'}; customMap.hierarchyMarkerStyle.clusteredSelected = { src: './lib/rect_clustered_selected.png'}; |
Any questions left?
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.