Bing Map v8 - deselect selected pushpin event

0
votes

Bing has a 2 eventStyles for a pushpin.

  • enableHoverStyle : Boolean
  • enableClickedStyle : Boolean

go to link below to see these events/styles in action http://www.bing.com/api/maps/sdk/mapcontrol/isdk#setPushpinOptions+JS

So what im trying to accomplish is deselected a already selected pin when another pin is selected. Is there a way to do that?

Edited:

I have found a solution not sure if it is optimal but here it is.

I had the event trigger on pushpin click

Microsoft.Maps.Events.addHandler(pushpin, 'click', togglePinState);

Then, the togglePinState function

function togglePinState(pinData){

        if(pinData.target == null)
            return;

        if(selectedPin == null){
            selectedPin = pinData.target;
            selectedPin.setOptions({enableClickedStyle: true});
            return;
        }
        if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin = pinData.target;
            selectedPin.setOptions({enableClickedStyle: true});
        }
    }
1
javascripteventsbing-maps

1 Answers

1
votes

I haven't seen any code addressing this particular case when using bing-v8 built in eventStyles, so I hope this helps someone.

This is newer code than the one in my original post. This works perfectly fine for me now. Except it doesn't allow you to deselect pins. The update code lets you do this, look below.

function togglePinState(pinData){

        if(pinData.target == null)
            return;

        if(selectedPin == null){
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
            return;
        }
        // Checks if the pin that triggered the event is not equal to the selected pin if so, we change states of both pins.
        if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin.setOptions({enableClickedStyle: true});
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
        }       
    }

Update 1

Added the functionality of when you want to just toggle the current selected to de-selected state. 

function togglePinState(pinData){

        // Just in case
        if(pinData.target == null)
            return;

        // There is no selected Pin so we just assign the first pin to be the selectedPin
        if(selectedPin == null){
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
            return;
        }
        // Checks if the pin that triggered the event is not equal to the selected pin if so, we change states of both pins.
        else if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin.setOptions({enableClickedStyle: true});
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
        } 
        // if the pin that triggered the event is equal to the selected pin then we set everything to null.
        else {
            selectedPin = null;
            PopulateSidePanel(null);
        }       
    }