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.
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.
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.
Add a JavaScript listener to detect when the asset is changed.
1
2
3
4
5
6
7
8
9
// get the javascript objectsconstassetMapComp=document.querySelector('mdsp-asset-view');constfileViewComp=document.querySelector('mdsp-file-view');// add listener for selectedAssetChanged eventassetMapComp.addEventListener('selectedAssetChanged',function(eventParams){// assign the changed asset id to the file viewfileViewComp.assetId=eventParams.detail.assetId;});
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.
// add event handler and show pop-up window on asset clickconstassetMapComp=document.querySelector('mdsp-asset-map');assetMapComp.addEventListener('assetsClicked',function(eventParams){vareventData=eventParams.detail;//show pop-up window only if single asset was clickedif(eventData.assets&&eventData.assets.length===1){document.getElementById('popup-content').innerHTML='Asset name: '+eventData.assets[0].name;varpopup=document.getElementById("map-popup");popup.style.display="block";assetMapComp.popup.show(eventData.position,popup);}});// add event handler for closing of the popupvarpopupCloser=document.getElementById('popup-closer');popupCloser.onclick=function(){assetMapComp.popup.hide();returnfalse;};
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.
// Listen to the event of the asset-view component and use it in the asset-mapassetView.addEventListener('searchTextChanged',function(eventParams){if(assetMap){assetMap.searchText=eventParams.detail;}});
