CODEWITHSUNDEEP
bing-mapsbing-api
Prowling Duck
Prowling Duck

Reputation: 447

How do I alter a Bing Maps Pushpin's size?

When adding width and height properties to the PushpinOptions Object, according to the documentation found here https://msdn.microsoft.com/en-us/library/gg427629.aspx, the pushin refuses to use the specified size. Instead it seems to base it's size on that of the image used for it.

You can try it for yourself by adding "height:50, width:50" over here: http://www.bing.com/api/maps/sdk/mapcontrol/isdk#setPushpinColor+JS

Can anybody tell me what I'm doing wrong?

Upvotes: 0

Views: 4097

Answers (2)

Saji
Saji

Reputation: 1394

Please check this one Multiple Custom Markers with Bing Maps API

You can specify pushpin image as well its size. Please add px with the width and height you specify.

Upvotes: 0

Prowling Duck
Prowling Duck

Reputation: 447

Apparently I've confused V7 for V8 documentation. that actualy resizing of the pushpin image is not supported.

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

You can find the code sample over here: https://social.msdn.microsoft.com/Forums/en-US/909162ea-3ac5-4960-82ed-6ddf02eb6ead/alter-size-of-custom-pushpin-isnt-working?forum=bingmaps

Here's the code taken from the link above:

<!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>

Upvotes: 3

Related Questions