Adding multiple icons to a pushpin with Bing maps api v8

Question

Bing maps v8 - I am trying to represent more than one icon/symbol at a particular location in the map.

For example, at a particular location, i want to have a pushpin that denotes the location plus I want to have another icon/symbol below the pushpin which represents the severity of the location say (highly crowded - red, moderately crowded - yellow, and less crowded - green).

I am not interested in showing this in the pushpin (image) itself, but I want to have it under the pushpin image along with the title of the location.

With version 7 of bing maps, it was possible to add - atleast a border with different color for puspin image which would satisfy my requirement, but in v8 bing maps it is not possible to add custom CSS/HTML.

Also I want the puspin to be draggable. There are HTMLPushpins but they do not supply proper dragging of pushpin.

Any help at the earliest or need more info? Thanks in advance!

A sample image : As you see the markup in the following link works, but it just does not work in bing maps I dont know why!

`https://jsfiddle.net/BalakrishnanE/19z7rd1h/#&togetherjs=NwAKHyPv9G`

Answer 1

I highly recommend taking a look at using SVG templates for pushpins. This will allow you to easily change the color using the shapes color option. Here is a tool that provides some examples of different SVG pushpin templates: http://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Maker

If you can provide a screenshot of the pushpin you want to create, I can see if I can put together an SVG template that matches it.