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

<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.
customFilter	any		undefined	[EXPERIMENTAL] Specifies a custom filter which influences the displayed assets
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.
searchText	string	search-text		Specifies the text assets on the map are filtered for (read or write).
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.
statusFilter	AssetStatusFilter		undefined	[EXPERIMENTAL] Specifies a filter for the displayed assets according to different values of the AssetStatus enum
statusIndicator	boolean	status-indicator	false	Specifies whether status information about assets should be 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.
view	IMapViewModel			Returns an object for view handling, refer to IMapViewModel model.
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
searchTextChanged	EventEmitter<string>	Triggered when the search text changes.
statusFilterChanged	EventEmitter<AssetStatusFilter[]>	Triggered when the status filter changes.
selectedAssetChanged	EventEmitter<IAsset>	Triggered when a new asset or asset cluster is selected. This event is only triggered if SelectionList is configured in assetClickHandler.
assetsClicked	EventEmitter<AssetClickEvent>	Triggered when an asset or asset cluster is clicked. This event is only triggered if Custom is configured in assetClickHandler.
viewChanged	EventEmitter<IMapViewState>	Is triggered when map view is changed.
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

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

interface ILocation {
  country: string;
  region: string;
  locality: string;
  streetAddress: string;
  postalCode: string;
  longitude: number;
  latitude: number;
}

ISharing

interface ISharing {
  modes: SharingMode[];
}

SharingMode

enum SharingMode {
  Sharer = "SHARER",
  Receiver = "RECEIVER"
}

MapHierarchyMarkerStyle

class MapHierarchyMarkerStyle {
    public set default(style: any);
    public set selected(style: any);
    public set clustered(style: any);
    public set clusteredSelected(style: any);
}

MapMarkerStyle

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.

<mdsp-custom-map wheel-zoom="true" draggable="true" asset-click-handler="SelectionList"></mdsp-custom-map>

Use Custom Markers

This sample uses PNG images.

    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'};

Hide assets with a custom filter

In some use cases, you might want to hide specific assets. For this, the customFilter can be used.

  document.querySelector('mdsp-custom-map').customFilter = function(a){
    return a.filter(b=>b.name.includes('M') || b.name.includes('m'));
};

As a result, only the assets which include 'M' or 'm' in the asset name will be displayed. To reset the filter, set the customFilter to undefined.

Any questions left?

Ask the community

---

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.