none
Change Pushpin Color Back To Default RRS feed

  • Question

  • I have a map with multiple pins. When one pin is clicked, I change its color. When another pin is clicked, I want to change the previous pin's color back to default and change the color of the recently clicked pin. How do I do this?

    Setting the color to null does not change the color of the pin, I cannot clone the color of an unmodified pin, and it's not even the default 'purple' css color. I'd rather not change the colors of all the pins if I don't have to. I also know that I can just color pick the default color out of a pin, but was just wondering if I could avoid doing this.

    Monday, April 2, 2018 2:27 PM

Answers

  • To go to the default color you would have to create a new pushpin without the color value set.  

    Alternatively, you can just set the color to hex value #AA298F (which is the value set by default in the control).

    You can set the color with hex value with the following code:

    pushpin.setOptions({color: Microsoft.Maps.Color.fromHex('#AA298F')});


    Tuesday, April 3, 2018 2:42 PM
    Moderator

All replies


  • You can try to utilize an event handler with a layer event. That way you can access the pushpins that the event occurred on. Event handler for layer events receive a LayerMouseEventArgs object: https://msdn.microsoft.com/en-us/library/mt748663.aspx

    You can access the pushpins using this argument's primitive property and using primitives (pushpin) setOptions function:

    Microsoft.Maps.Events.addHandler(layer, 'click', function (e) { 
        var pin = e.primitive;
        pin.setOptions({color: '' });
    });


    You can change the color of the pin to default by passing an empty string like so. It appears that setting color option to null also returns the default purple pin: 


    Here's additional documentation on Layers and Events: https://msdn.microsoft.com/en-us/library/mt712656.aspx


    Cheers!




    Monday, April 2, 2018 5:43 PM
    Moderator
  • Yeah I thought that would work as well, but it doesn't.

    Go to this link and paste the code below and you'll see what I'm talking about: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/deletepushpins

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
    document.getElementById('printoutPanel').innerHTML =
        'Deleting pushpins in 2 seconds...';
    map.entities.push(Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds()));
    var updatePrintout = setTimeout(function () {
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin) {
                pushpin.setOptions({color: 'red'});
            }
        }
        document.getElementById('printoutPanel').innerHTML =
            'Pushpins removed.';
    }, 2000);

    var updatePrintout = setTimeout(function () {
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin) {
                pushpin.setOptions({color: ''});
            }
        }
        document.getElementById('printoutPanel').innerHTML =
            'Pushpins turned back.';
    }, 3000);

    Tuesday, April 3, 2018 1:48 PM
  • To go to the default color you would have to create a new pushpin without the color value set.  

    Alternatively, you can just set the color to hex value #AA298F (which is the value set by default in the control).

    You can set the color with hex value with the following code:

    pushpin.setOptions({color: Microsoft.Maps.Color.fromHex('#AA298F')});


    Tuesday, April 3, 2018 2:42 PM
    Moderator
  • I'm marking this as the answer because this is the method that I decided to use yesterday, but it's not the ideal solution.

    The functionality that I was expecting was basically what John_W_Tan proposed. Although I'm sure it's not happening any time soon, if the default color of the pins was to change, this would break the code that I've written. Thanks for the help.

    Tuesday, April 3, 2018 3:10 PM