Web Components for Insights Hub and Industrial IoT
Asset Map

<mdsp-asset-map></mdsp-asset-map>

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

const assetMapComp = document.querySelector('mdsp-asset-map');
assetMapComp.markerStyle.default = (feature) => {
    // feature parameter has all the data and information regarding the marker.
    const typeId = feature.data.typeId; // is the typeid of the underlying asset object
    const name = feature.data.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'};

};

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

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

<div id="map-popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>

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

// Set a filter for a specific asset type:
assetMapComp.assetTypeFilter = ["core.mcnano"];
// This displays all assets of type 'core.mcnano'.

// 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'.

// 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-map
assetView.addEventListener('searchTextChanged', function (eventParams) {
    if (assetMap) {
        assetMap.searchText = eventParams.detail;
        }
    });

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