Bing Maps V8 Pushpin Opacity

Question

What I wanted to do was upon hovering over another element on the page, was to change the opacity of the Bing Maps V8 Pushpins. I know this is possible through Google Maps as I had it implemented there, but I haven't been able to find such an option with Bing Maps yet.

Currently I am using a modified Pushpin to mark the location of a bus on a map:

Here is an example of the code I use to initialize the pins:

new Microsoft.Maps.Pushpin(map.getCenter(), {
    icon: 'img/bus1.png',
    anchor: new Microsoft.Maps.Point(14, 44),
    visible: false,
    text: "",
    title: ""
})

The PushpinOptions object doesn't seem to have anything relating to opacity. Is there an official or hack-y way that is used to go about this?

rbrundritt rbrundritt · Accepted Answer · 2017-11-09T18:10:31

Changing the opacity of a pushpin is not a commonly requested feature, in fact I think this is only the second time in 10 years anyone has asked about this. That said, there are several ways to go about this. Since you are using an image URL, the easiest method would be to just create another image that has your opacity applied to it and then update the icon property as needed.

If you want to get more complicated but make a more flexible solution you can use SVG's for pushpins and dynamically control the opacity that way. Here is an example that creates SVG based pushpins with different settings: https://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Maker Since you aren't using the text property, you could easily use that as a placeholder in your SVG for opacity and dynamically update single property as needed.

Another method is to use an HTML5 canvas, here is an example that scales the pushpin image: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Pushpins/Pushpin_Scaled.html

Bing Maps V8 Pushpin Opacity

1 Answers