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