Web Components for Insights Hub and Industrial IoT
Custom Map

<mdsp-custom-map></mdsp-custom-map>

<mdsp-custom-map wheel-zoom="true" draggable="true" asset-click-handler="SelectionList"></mdsp-custom-map>

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

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

};

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