none
Alter size of custom Pushpin isn't working RRS feed

  • Question

  • I'm having trouble altering the size of the pushpin I'm adding to my map. It seems to take the size of the png I'm using for it instead.

    I've tried setting the width and height according to the documentation found here https://msdn.microsoft.com/en-us/library/gg427615.aspx

    Tuesday, September 20, 2016 2:17 PM

Answers

  • The documentation you are referencing if for Bing Maps V7 which is nearing end of life and has been replaced by V8. V8 doesn't provide width/height options for pushpins, that said, in V7 these did not change the size of the pushpin. The purpose of these in V7 were to specify the clickable area of the pushpin. In V8, the size of the image is calculated behind the scenes.

    If you want to be able to scale the size of the pushpin, you will need to use an HTML5 canvas to render a scaled version of your image. Here is a code sample:

    <!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'>
        function GetMap() {
            var map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            createScaledPushpin(map.getCenter(), 'images/myPushpinIcon.png', 2, function (pin) {
                map.entities.push(pin);
            });
        }
    
        function createScaledPushpin(location, imgUrl, scale, callback) {
            var img = new Image();
            img.onload = function () {
                var c = document.createElement('canvas');
                c.width = img.width * scale;
                c.height = img.height * scale;
    
                var context = c.getContext('2d');
    
                //Draw scaled image
                context.drawImage(img, 0, 0, c.width, c.height);
    
                var pin = new Microsoft.Maps.Pushpin(location, {
                    //Generate a base64 image URL from the canvas.
                    icon: c.toDataURL(),
    
                    //Anchor based on the center of the image.
                    anchor: new Microsoft.Maps.Point(c.width/2, c.height/2)
                });
    
                if (callback) {
                    callback(pin);
                }
            };
    
            img.src = imgUrl;
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, September 20, 2016 4:31 PM

All replies

  • The documentation you are referencing if for Bing Maps V7 which is nearing end of life and has been replaced by V8. V8 doesn't provide width/height options for pushpins, that said, in V7 these did not change the size of the pushpin. The purpose of these in V7 were to specify the clickable area of the pushpin. In V8, the size of the image is calculated behind the scenes.

    If you want to be able to scale the size of the pushpin, you will need to use an HTML5 canvas to render a scaled version of your image. Here is a code sample:

    <!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'>
        function GetMap() {
            var map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            createScaledPushpin(map.getCenter(), 'images/myPushpinIcon.png', 2, function (pin) {
                map.entities.push(pin);
            });
        }
    
        function createScaledPushpin(location, imgUrl, scale, callback) {
            var img = new Image();
            img.onload = function () {
                var c = document.createElement('canvas');
                c.width = img.width * scale;
                c.height = img.height * scale;
    
                var context = c.getContext('2d');
    
                //Draw scaled image
                context.drawImage(img, 0, 0, c.width, c.height);
    
                var pin = new Microsoft.Maps.Pushpin(location, {
                    //Generate a base64 image URL from the canvas.
                    icon: c.toDataURL(),
    
                    //Anchor based on the center of the image.
                    anchor: new Microsoft.Maps.Point(c.width/2, c.height/2)
                });
    
                if (callback) {
                    callback(pin);
                }
            };
    
            img.src = imgUrl;
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, September 20, 2016 4:31 PM
  • I like it! Thanks
    Saturday, May 20, 2017 2:26 AM
  • I h
                            var pushpinLoc = new Microsoft.Maps.Pushpin(map.getCenter(),
                           {
                            icon: stormicon, width: '260px' , height: '260px', 
                            title: HailEntity.Address, subTitle: HailEntity.County 
                           });

    ave the following code that is having no effect on the icon size. What is the proper why to dynamically scale the size of an icon?
    Friday, July 26, 2019 2:17 PM
  • Hi DDL,

    I think you might want to take a look at this posting https://stackoverflow.com/questions/39597766/how-do-i-alter-a-bing-maps-pushpins-size in StackOverflow that points back to this forum solution provided by Ricky.

    Sincerely,

    IoTGirl


    Saturday, July 27, 2019 5:46 AM
    Owner
  • I create a map, v8, and in javascript, we get the location of the pushpins and place it on the maps. For this map I need to resize the pushpins and found I needed to use a canvas element. However I can't get the event handlers to work. This is what I have. Any help is appreciated.

    function AddPin(Title, Name, Lat, Long, size, color) {
            // Add a new pushpin to the map for the vessel
            var point = new Microsoft.Maps.Location(Lat, Long);
            var pin = null;

            try {
                pin = new Microsoft.Maps.Pushpin(point);
                pin.metadata = {
                    title: Title,
                    name: Name,
                    offset: new Microsoft.Maps.Infobox(0, 15),
                };

                // circle color
                switch (color) {
                    case "GREEN":
                        imgIcon = 'images/green_52x52x5_fw.gif';
                        break;
                    case "ORANGE":
                        imgIcon = 'images/orange_52x52x5_fw.png';
                        break;
                    case "RED":
                        imgIcon = 'images/red_52x52x5_fw.png';
                        break;
                    case "YELLOW":
                        imgIcon = 'images/yellow_52x52x5_fw.png';
                        break;
                    case "WHITE":
                        imgIcon = 'images/clear_52x52x8_sm_fw.png';
                        break;
                }

                // circle size
                if (size == 100)
                    resize = 1;
                else if (size == 80)
                    resize = .8;
                else if (size ==60)
                    resize = .6;
                else if (size == 40)
                    resize = .4;
                else
                    resize = .2;

                // To resize the image of the pushpins, must use a canvas
                pin.setOptions({
                    icon: createScaledPushpin(point, imgIcon, resize, function (pin) {
                        map.entities.push(pin)
                    })
                });
            }
            catch (eX) {
                window.alert(eX.message);
            }
        }

        function createScaledPushpin(location, imgUrl, scale, callback) {
            var img = new Image();
            img.onload = function () {
                var c = document.createElement('canvas');
                c.width = img.width * scale;
                c.height = img.height * scale;

                var context = c.getContext('2d');          

                //Draw scaled image
                context.drawImage(img, 0, 0, c.width, c.height);

                c.addEventListener("mousemove", startHover);

                var pin = new Microsoft.Maps.Pushpin(location, {
                    //Generate a base64 image URL from the canvas.
                    icon: c.toDataURL(),

                    //Anchor based on the center of the image.
                    anchor: new Microsoft.Maps.Point(c.width / 2, c.height / 2)
                });

                if (callback) {
                    callback(pin);
                }
            };

            img.src = imgUrl;
        }

    Thursday, April 2, 2020 6:57 PM
  • It's not exactly the same issue. I used the link in stackoverflow forum to fix the pin size but I am unable to get the event handlers to work. I've been researching how to make it work with canvas but so far, nothing is working.
    Thursday, April 2, 2020 10:08 PM
  • Hi tfmarler,

    If you use the basic sample above, rather than your modified code, does it work to scale as you expect?  

    Sincerely,

    IoTGirl

    Friday, April 3, 2020 3:02 AM
    Owner
  • Yes, the scaling works fine. What I'm trying to do is when the user hovers over the pin, have an infobox appear.

    That's why I said this isn't the same issue


    Friday, April 3, 2020 1:38 PM
  • I finally found the issue. When I was setting up my  pushpin options, I was calling the function to resize the pin. When it returned, I would push the pin to the map and was then trying to add event handlers.

    pin.setOptions({
                    icon: createScaledPushpin(point, imgIcon, resize, function (pin) {
                     map.entities.push(pin)
                    })
                });

    I pushed the pins to the map inside createScaledPushpin and was able to add the event listener to the pin there. Now it's working correctly.

    Thanks.

    Monday, April 6, 2020 2:35 PM
  • Excellent!  Thank you for returning and explaining your issue and the fix!
    Monday, April 6, 2020 10:32 PM
    Owner