Web Components for Insights Hub and Industrial IoT
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¶
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¶
By utilizing custom markers, you have the ability to configure the visual representation of markers on a map. You can either assign specific marker images directly to corresponding marker types or utilize a callback function. The callback function allows you to define conditions that determine what should be displayed when a particular marker needs to be rendered on the map.
Direct assignment of images to marker types¶
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'};
Assignment of a callback to marker types¶
This sample uses PNG images and is only overriding the default marker type.
const customMapComp = document.querySelector('mdsp-custom-map');
customMapComp.markerStyle.default = (feature) => {
// feature parameter has all the data and information regarding the marker.
// Attention: the property path to the asset model in custom map differs from the asset-map feature so be aware of that.
const typeId = feature.data.item.typeId; // is the typeid of the underlying asset object
const name = feature.data.item.name; // name of the asset
// define marker image depending on asset typeId and name. Use the asset object information to build your own conditions.
// the return object should contain at least these two properties.
// src: is the path to your custom marker images
// styleCacheId: is a unique cache id which is used to cache the provided image and marker configuration within the map.
if(typeId==='tenant.Automotive'){
if(name === 'Green Car Model'){
return {src: './assets/green-car.png', styleCacheId:'green-car'};
}else if(name === 'Red Car Model'){
return {src: './assets/red-car.png', styleCacheId: 'red-car'};
}else if(name === 'Yellow Car Model'){
return {src: './assets/yellow-car.png', styleCacheId: 'yellow-car'};
}else if(name === 'Blue Car Model'){
return {src: './assets/blue-car.png', styleCacheId: 'blue-car'};
}
}
// provide always a default src and styleCacheId
return {src: './assets/default.png', styleCacheId:'default-car'};
};
Please note that in order to achieve the same effect for clustered markers, it is also necessary to provide the callback function for the clustered marker types. This ensures consistent customization for both individual and clustered markers on the map.
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
.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.