Identifying pushpins after plotting them - Bingmaps

Question

I am currently working with Bing maps version 8 . I was previously working with version 7 . When plotting pushpins in version 7 a htmlContent attribute was sent along with the pushpins. What this html content did was that the pushpin was contained inside the div element .

var pushpinOptions = {
                htmlContent: "<div  id='container" + siteIndex + "'style='pointer-events: all !important; z-index: 35000; '></div><div id='lines"+siteIndex+"'></div>",
                anchor:new Microsoft.Maps.Point(iconWidth/2,iconHeight/2),
                width: iconWidth,
                height: iconHeight

            };

 var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);

I used Konva JS to plot over these pushpins which i plotted with BingMaps.

 var stage = new Konva.Stage({
        container: 'container' + siteIndex,
        width: width,
        height: height,
        stroke: 'green'
    });

'container' + siteIndex, was the id of the div i set in bing maps pushpins which i used in konva to plot another image over the pushpins. This is my requirement . I have to plot a pushpin with coordinates and then plot some images over the pushpins . Now when i shifted from v7 to v8 for various reasons, I am facing an issue .

In v8 htmlContent is not sent with the pushpins, rather we send an svg image which has no way to identify after being plotted other than co-ordinates .

var customHtml = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle id="myCircle htmlId" cx="25" cy="25" r="20" stroke="orange" stroke-width="4" fill="yellow" /></svg>';

 var pin = new Microsoft.Maps.Pushpin(latLon, {

                icon: customHtml.replace("htmlId",siteIndex.toString()),
                anchor: new Microsoft.Maps.Point(iconWidth/2,iconHeight/2)
            });

Now , what i am lokking for is a way to either plot images with a third party api which plots over co-ordinates or find to way to get access of the pushpins i plotted without the html content i.e with svg images. When i access the id with

document.getElementById("myCircle 0"); 

i get null.

I have looked for many different third party apis like leafleat js, konva js , Graphics js. But i do not find a way to identify my pushpins .

Is there a way to achieve what i wish to? There must be.

Answer 1

HTML pushpins are not supported in Bing Maps V8 as they can't be drawn on an HTML5 canvas. Using SVG would render on the Canvas but there is no DOM element create, which is why you aren't able to use document.getElementById. Using DOM elements with maps really limits performance and is the main reason why rendering is now done with an HTML5 canvas. That said, even in V7 using the approach of custom HTML in general so you can do document.getElementById to retrieve the pushpins was not a good approach. If you want to assign a unique ID to each pushpin and then be able to retrieve it, you should use a custom JavaScript property, or the existing metadata property. For example:

var pin = new Microsoft.Maps.Pushpin(map.getCenter());

pin.metadata = {
    id: 'myCircle 0'
};

map.entities.push(pin);


function getPushpinById(id){
    var pin;

    for(var i=0,len = map.entities.getLength(), i<len;i++){
        pin = map.entities.get(i);

        if(pin.metadata && pin.metadata.id === id){
            return pin;
        }
    }
}

Using this approach would allow the greatest performance in your app. However, if you really want to use custom HTML to create pushpins, it is possible to achieve this in V8 by using a custom overlay. Here is a code sample: https://msdn.microsoft.com/en-US/library/mt762877.aspx