none
Cluster Pushpin color RRS feed

  • Question

  • Hi 

    I'm using Bing maps Clustering. I would like to change the Individual Pushpin color(NOT Cluster color) based on a metadata property. The Metadata Property is the GeoLocation Confidence. If the Confidence is high I would like to show the Default color, else the color need to be red for the Pushpin (Individual Pushpin NOT Cluster). 

    How can I achieve this?

    Thanks

    function loadMapScenario(){
            if (dataSource.data().length != 0 )
            {
                GetDataSourceLocations();
    
                map = new Microsoft.Maps.Map(document.getElementById('Map'), {
                    credentials: '',
                    enableClickableLogo: false
                });
    
                infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
                infobox.setMap(map);
    
                Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
                        clusterLayer = new Microsoft.Maps.ClusterLayer(pins, { 
                        gridSize: 100,
                        clusteredPinCallback: customizeClusteredPin,
                        
                    });
                    map.layers.insert(clusterLayer);
                });
                
                var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);
                map.setView({bounds:bounds, padding: 100});
            }
        }
    
    function GetDataSourceLocations(){
            var grid = $("#SearchGrid").data("kendoGrid");
            var dataSource = grid.dataSource;
            pins = []; locs =[];
            for(var i =0; i < dataSource.data().length; i++){
                var longitude = dataSource.data()[i].Longitude;
                var latitude = dataSource.data()[i].Latitude;
                if(longitude != null && latitude != null){
                    pins.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude)));
                    pins[i].metadata = { ProductId : dataSource.data()[i].Id, Confidence : dataSource.data()[i].Confindence};
                    Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
                    locs.push(new Microsoft.Maps.Location(latitude, longitude));
                }
                else{
                    pins.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 0)));
                    pins[i].metadata = { ProductId: dataSource.data()[i].Id};
                }
            }
            return;
        }
    
    function customizeClusteredPin(cluster) {
            Microsoft.Maps.Events.addHandler(cluster, 'click', clusterClicked);
        }



    Tuesday, October 3, 2017 4:15 PM

Answers

  • The easiest and fastest option would be to do this inside the GetDataSourceLocations function. Simply add your business logic in there. For example:

    function GetDataSourceLocations(){
     var grid = $("#SearchGrid").data("kendoGrid");
     var dataSource = grid.dataSource;
     pins = []; locs =[];
     for(var i =0; i < dataSource.data().length; i++){
      var longitude = dataSource.data()[i].Longitude;
      var latitude = dataSource.data()[i].Latitude;
      if(longitude != null && latitude != null){
       var color = 'purple';
       
       //Just making this up, not sure what your data looks like, adjust as needed.
       switch(dataSource.data()[i].Confindence.toLowerCase()){    
        case 'high':
         color = 'green';
         break;      
        case 'medium':
         color = 'orange';
         break;      
        case 'low':
         color = 'red';
         break;
        default:
         break;
       }
      
       pins.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: color }));
       pins[i].metadata = { ProductId : dataSource.data()[i].Id, Confidence : dataSource.data()[i].Confindence};
       Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
       locs.push(new Microsoft.Maps.Location(latitude, longitude));
      }
      else{
       pins.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 0)));
       pins[i].metadata = { ProductId: dataSource.data()[i].Id};
      }
     }
     return;
    }


    [Blog] [twitter] [LinkedIn]

    Tuesday, October 3, 2017 8:03 PM

All replies

  • The easiest and fastest option would be to do this inside the GetDataSourceLocations function. Simply add your business logic in there. For example:

    function GetDataSourceLocations(){
     var grid = $("#SearchGrid").data("kendoGrid");
     var dataSource = grid.dataSource;
     pins = []; locs =[];
     for(var i =0; i < dataSource.data().length; i++){
      var longitude = dataSource.data()[i].Longitude;
      var latitude = dataSource.data()[i].Latitude;
      if(longitude != null && latitude != null){
       var color = 'purple';
       
       //Just making this up, not sure what your data looks like, adjust as needed.
       switch(dataSource.data()[i].Confindence.toLowerCase()){    
        case 'high':
         color = 'green';
         break;      
        case 'medium':
         color = 'orange';
         break;      
        case 'low':
         color = 'red';
         break;
        default:
         break;
       }
      
       pins.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: color }));
       pins[i].metadata = { ProductId : dataSource.data()[i].Id, Confidence : dataSource.data()[i].Confindence};
       Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
       locs.push(new Microsoft.Maps.Location(latitude, longitude));
      }
      else{
       pins.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 0)));
       pins[i].metadata = { ProductId: dataSource.data()[i].Id};
      }
     }
     return;
    }


    [Blog] [twitter] [LinkedIn]

    Tuesday, October 3, 2017 8:03 PM
  • Thanks Ricky. 
    Tuesday, October 3, 2017 9:07 PM