Skip to content

MindSphere Web Components
Asset Map

The Asset Map displays assets of the current tenant on a geographic map based on OpenStreetMap. It uses the position of assets provided by Asset Management.

The center of the Asset Map is defined using coordinates and the location markers can be customized. Zooming can be configured to support CTRL key only or also mouse wheel.

Map deviation in region China 1

  • The map display is based on Amap in region China 1.
  • Zooming via CTRL key is not supported by Amap in region China 1.
  • You should follow the instructions from https://lbs.amap.com/dev/key/app to apply Web client(JS API) type Amap key for your Web application.
  • By default, Amap does not support detail oversea LBS service. If you need oversea LBS serivce, you should apply for it by creating ticket to Amap service via https://lbs.amap.com/dev/ticket/type.
  • You should add below code snippet into your Web application <head> for Amap integration.
Amap integration Sample
1
2
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&;key={Amap key}&plugin=AMap.MarkerClusterer"></script>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>

Example

Asset-Map

Interface

Selector

1
<mdsp-asset-map></mdsp-asset-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.
assetTypeFilter AssetTypeFilter Configures the asset types to be displayed.
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 map 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.
latitude number latitude Configures the latitude of the map center.
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.
longitude number longitude Configures the longitude of the map center.
markerStyle MapMarkerStyle Returns an object for customizing the marker, refer to MapMarkerStyle model.
model IDataModel Returns an object for data model handling, refer to IDataModel model.
popup MapPopup Returns an object for pop up handling, refer to MapPopup model.
popupVisible boolean
searchText string search-text Specifies the text assets on the map are filtered for.
selectedAsset IAsset Specifies the selected asset.
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.
Please use the subtenant id and not an asset id as the value.
view IMapViewModel Returns an object for view handling, refer to IViewModel model.
wheelZoom boolean wheel-zoom false Enables zoom control by mouse wheel if true. Otherwise, the control key must be pressed for zooming.
zoomLevel number zoom-level Specifies the zoom level of the map. 0 - 20

Properties deviation in region China 1

  • When wheelZoom property is set to false, zooming via CTRL key is not supported by Amap.
  • zoomLevel property allows 3-20 values by Amap.

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.
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
 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: FileAssignment[];
  locks: any[];
  timezone: string;
  twinType: string;
  _links: any;
}
ISharing
1
2
3
interface ISharing {
  modes: SharingMode[];
}
SharingMode
1
2
3
4
enum SharingMode {
  Sharer = "SHARER",
  Receiver = "RECEIVER"
}
IAssetClickEvent
1
2
3
4
interface IAssetClickEvent {
  position: IMapCoordinates;
  assets: IAsset[];
}
IDataModel
1
2
3
4
interface IDataModel {
    // forces reload of data, e.g. re-loading the assets
    refresh(): void;
}
IViewModel
1
2
3
interface IViewModel {
    refresh(): void;
}
IMapViewModel
1
2
3
interface IMapViewModel extends IViewModel {
    update(viewState: IMapViewState): void;
}
IMapViewState
1
2
3
4
interface IMapViewState {
    initial: IMapViewPort;
    current: IMapViewPort;
}
IMapViewPort
1
2
3
4
interface IMapViewPort {
    center: IMapCoordinates;
    zoom: number;
}
IMapCoordinates
1
2
3
4
interface IMapCoordinates {
    longitude: number;
    latitude: number;
}
MapPopup
1
2
3
4
5
6
class MapPopup {
    // Shows defined htmlElement as marker popup
    public show(position: MapCoordinates, htmlElement: HTMLElement): void;
    // Hides popup
    public hide(): void;
}
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 Asset 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.
  • Up to 25,000 requests to the underlying map service per month are free. For an extension please contact your assigned Account Executive or Customer Success Manager.

Roles

  • mdsp:core.AssetManagement.xxx (Asset Management API is used)

Snippets

Use Custom Markers

This sample uses PNG images.

1
2
3
4
5
const assetMapComp = document.querySelector('mdsp-asset-map');
assetMapComp.markerStyle.default = { src: '/lib/pin_red.png' };
assetMapComp.markerStyle.selected = { src: '/lib/pin_red_selected.png' };
assetMapComp.markerStyle.clustered = { src: '/lib/clustered.png' };
assetMapComp.markerStyle.clusteredSelected = { src: '/lib/clustered_selected.png' };

Asset-Map

Display a Built-In Pop-Up Window on Asset Click

Use the built-in assetClickHandler with the parameter SelectionList to open a pop-up window with available assets when a user clicks on a marker. The selectedAssetChanged event is triggered when the user selects an asset. This could be used for navigation purposes.

The following sample code shows a pure HTML implementation.

1
2
<mdsp-asset-map style="height: 450px; width: 600px; display: block" error-notification="true" zoom-level=2 draggable=true class="component-border" asset-click-handler="SelectionList"></mdsp-asset-map>
<mdsp-file-view error-notification="true"> </mdsp-file-view>

Custom-Popup

Add a JavaScript listener to detect when the asset is changed.

1
2
3
4
5
6
7
8
9
// get the javascript objects
const assetMapComp = document.querySelector('mdsp-asset-view');
const fileViewComp = document.querySelector('mdsp-file-view');

// add listener for selectedAssetChanged event
assetMapComp.addEventListener('selectedAssetChanged', function (eventParams) {
    // assign the changed asset id to the file view
    fileViewComp.assetId = eventParams.detail.assetId;
});

Display a Custom Pop-Up Window on Asset Click

Instead of the built-in pop-up, the Asset Map supports using custom pop-up windows. Therfore it raises an event onAssetsClicked when the user clicks on an asset marker. The following sample demonstrates how to use it.

Sample Pop-Up Window Definition
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style>
    .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
        display: none;
        max-height: 300px;
    }

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

    .ol-popup-closer:after {
        content: "✖";
    }
</style>

Add the pop-up window to your site as custom HTML element and add a JavaScript listener to detect the onAssetsClicked event:

1
2
3
4
<div id="map-popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// add event handler and show pop-up window on asset click
const assetMapComp = document.querySelector('mdsp-asset-map');
assetMapComp.addEventListener('assetsClicked', function(eventParams) {
    var eventData = eventParams.detail;
    //show pop-up window only if single asset was clicked
    if (eventData.assets && eventData.assets.length === 1) {
       document.getElementById('popup-content').innerHTML = 'Asset name: ' + eventData.assets[0].name;  
       var popup = document.getElementById("map-popup");
       popup.style.display = "block";
       assetMapComp.popup.show(eventData.position, popup);
    }
});
// add event handler for closing of the popup
var popupCloser = document.getElementById('popup-closer');
    popupCloser.onclick = function() {
    assetMapComp.popup.hide();
    return false;
};

Custom Pop-Up Window

Display Assets of a Specific Type

Use the assetypefilter parameter to only display assets of a specific type or of types derived from it.

1
2
3
// Set a filter for a specific asset type:
assetMapComp.assetTypeFilter = ["core.mcnano"];
// This displays all assets of type 'core.mcnano'.
1
2
3
4
5
// Set a filter for multiple asset types:
assetMapComp.assetTypeFilter = {
  supportedTypes: ["core.mcnano", "core.basicagent"]
};
// This displays all assets of type 'core.mcnano' or 'core.basicagent'.
1
2
3
4
5
6
// Set a filter to a specific asset type and all types derived from it:
assetMapComp.assetTypeFilter = {
  supportedTypes: ["core.basicagent"],
  includeInheritance: true
};
// This displays all assets of type 'core.basicagent' and types derived from it.

Filter the asset map with a search text

1
2
3
4
5
6
// Listen to the event of the asset-view component and use it in the asset-map
assetView.addEventListener('searchTextChanged', function (eventParams) {
    if (assetMap) {
        assetMap.searchText = eventParams.detail;
        }
    });

Any questions left?

Ask the community


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