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¶

Events¶

Models¶

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

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

interface ISharing {
  modes: SharingMode[];
}

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

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

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 Development License Agreement.