Attaching custom ID with pushpin in Bing maps

Question

I want to add a unique ID number (taken from DB) to the pushpins I put on my Bing map. It works flawlessly when I do not use any themes (like Bing theme), like this:

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), 
{icon: some_icon, width: 34, height: 43});

pushpin.customid = 13;
map.entities.push(pushpin);

And then I can later on access this "customid" property through Pushpin object.

BUT, when I activate a Bing theme, everything works, except these custom values, which are crucial to my application.

Any ideas on other ways of attaching some unique ID to these pushpins, or ideas for solving this issue?

Answer 1

I use a plain JavaScript object to wrap the Pushpin and its functionality, so that instead of storing custom properties on the Pushpin, I store them on the wrapper object.

For example, assuming we have a map and location specified, we can then create our object:

var Pin = function(location, map) {
    this._pushpin = new Microsoft.Maps.Pushpin(location);
    map.entities.push(this._pushpin);
    this.id = (new Date).valueOf();
    var self = this;
    Microsoft.Maps.Events.addHandler(this._pushpin, 'click', function() {
        console.log(self.id);
    })
};

This way, when we need to reference the id of the pushpin later, e.g. when the pushpin is clicked, then we can fetch the id of the wrapper object.

It's a good practice to use the public API for extending the Bing Maps objects.

Wrote a blog post about it here.

Answer 2

Simply add a custom property to the pushpin like this:

pushpin.MyID = 'some id';

You can then retrieve the pushpin by id using the method described in this blog post: http://rbrundritt.wordpress.com/2012/04/02/get-entity-by-property-in-bing-maps-v7/

Answer 3

Instead of use pushpin.custid property you could use pushpin.getId() default method and redefine it to return custid

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), 
                                        {icon: some_icon, width: 34, height: 43});

var custid=13;
pushpin.getId = function (){
    return custid;
}
map.entities.push(pushpin);