none
enableHoverStyle on SVG Pushpins RRS feed

  • Question

  • I am migrating my app to use the Bing Maps v8. I previously used htmlContent and different effects on hover & mousedown. Is this something we can do with SVG pushpins? I noticed I have access to the pushpin in the event, but I am not sure how to proceed.

    Thanks.

    Thursday, July 14, 2016 12:41 PM

Answers

  • As you likely found in the documentation, the enableHoverStyle option is only for the default pushpin. For custom pushpins you can use the setOptions function on the pushpin to customize it. You can then change the options using mouse events. Here is a simple example where I simply changed the color when the user hovers and mousedowns on a pushpin. I used color to keep things simple as custom icons would likely require additional options to be set like anchor position.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
    
        <script type='text/javascript'>
        var map;
    
        var defaultColor = 'blue';
        var hoverColor = 'red';
        var mouseDownColor = 'purple';
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
                color: defaultColor
            });
    
            map.entities.push(pin);
    
            Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
                e.target.setOptions({ color: hoverColor });
            });
    
            Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
                e.target.setOptions({ color: mouseDownColor });
            });
    
            Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
                e.target.setOptions({ color: defaultColor });
            });
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:800px;height:600px;"></div>
    </body>
    </html>

    You can find documentation on all the pushpin options here: https://msdn.microsoft.com/en-US/library/mt712673.aspx

    You can also find a bunch of useful code samples around creating custom pushpins here: https://msdn.microsoft.com/en-US/library/mt712640.aspx


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Thursday, July 14, 2016 7:09 PM
    • Marked as answer by LambdaFun Thursday, July 14, 2016 9:00 PM
    Thursday, July 14, 2016 7:09 PM