none
custom infobox for clusters RRS feed

  • Question

  • im pretty new to the bing map api, im trying to create an infobox when you click on a cluster, but im not having any success, i have it working for a regular pin.

    i keep getting the following error: "n is undefined" veapicore.js (line1)

    at "newpin.setOptions( { visible:true } )"

    if someone has an example of how to set it up, that would be great 

    thanks

    createClusteredPin: function (data, latLong) {
            var pushpinOptions = { icon: 'images/mapPinCluster.png', width: 29, height: 34 }; 
            var infoboxOptions = { width: 388, height: 275, showCloseButton: true, zIndex: 1000, offset: new Microsoft.Maps.Point(-194, 350), showPointer: true, visible: false, title:'cluster' };
            var pin = new Microsoft.Maps.Pushpin(latLong, pushpinOptions);
            pin.ID = +new Date() ;
            pin.title = "cluster";
            pin.description = 'Number of pins : ' + data.length ;
            
            for (var i = 0; i < data.length; i++) {
                this.dataInfo.push(data[i])
                this.addOne(data[i]);
            }
    
            var pinInfobox = new Microsoft.Maps.Infobox(data._LatLong, infoboxOptions);
            pinInfobox.ID = pin.ID;
            pinInfobox.data = data;
    
    
            var self = this;
            Microsoft.Maps.Events.addHandler(pin, 'click', function (e) {
                console.log("click cluster")
                console.log(e)
                console.log(data)
    
                for(var i=0; i < self.map.entities.getLength(); i++){
    
                    if( e.target.ID == self.map.entities.get(i).ID){                
                            var newpin = self.map.entities.get(i);
                            newpin.targetType = e.targetType;
                       
                            var arrTemp = [];
    
                            for(j = 0; j < newpin.data.length; j++){
                                arrTemp.push( newpin.data[j].attributes.Address );
                            }
    
                            newpin.setOptions({ visible: true });
    
                            var holder=[];
                            holder.data = arrTemp;
                            holder.pin = e;
                
                            self.currentInfoBox = e;
                            self.isOpen = true;
    
                        }
    
                    }
    
    
                
    
            }.bind(pinInfobox));
    
            this.map.entities.push(pinInfobox);
            this.map.entities.push(pin);
    
            return pin;
        },


    Monday, July 30, 2012 8:19 PM

Answers

  • I would first suggest using this method for displaying infoboxes: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/

    Now to create a custom infobox for clusters what you can do is add a property to the pushpin like so: pin.isCluster = true; Then in the click event of the pushpin you can get the pushpin and determine if the pin is a cluster or not and if it is render the infobox accordingly. For example:

    if(e.target.isCluster){

    //render clustered infobox

    }else{

    //render standard infobox

    }


    http://rbrundritt.wordpress.com

    Tuesday, July 31, 2012 9:45 AM