Pushpins and Virtual Earth Web Service Maps

With the Virtual Earth Web Service not only can you get static maps via the Imagery Service, but you can add some of the default pushpins you see in Live Search Maps to the static map that is returned to you if you set the Pushpins as a part of the request. In the Imagery Service there are several options you can set, but the Pushpin is not one of them. For this sample, we will show how to add custom pushpins based on sprites.

image

Here’s the code (HTML, of course):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Sprite Pushpins using a Canvas - Bing Maps Samples</title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to use and image sprite to create pushpins via an HTML canvas." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
    <meta name="author" content="Microsoft Bing Maps" />
    <meta name="screenshot" content="screenshot.jpg" />
    
    <script>
    var map;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {});

        //Generate some random locations to add the pushpins to the map.
        var locs = Microsoft.Maps.TestDataGenerator.getLocations(2, map.getBounds());

        //Create a pushpin from a sprite and add it to the map.
        createPushpinFromSprite(locs[0], '/images/pushpins/PushpinSprite.png', 325, 57, 42, 52, function (pin) {
            map.entities.push(pin);
        });

        createPushpinFromSprite(locs[1], '/images/pushpins/PushpinSprite.png', 80, 0, 42, 52, function (pin) {
            map.entities.push(pin);
        });
    }

    function createPushpinFromSprite(location, spriteUrl, x, y, width, height, callback) {
        //Preload the pushpin sprite.
        var img = new Image();
        img.onload = function () {
            var c = document.createElement('canvas');
            c.width = width;
            c.height = height;

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

            //Draw the pushpin icon
            context.drawImage(img, x, y, width, height, 0, 0, width, height);

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

                //Anchor the pushpins to the center bottom of the image.
                anchor: new Microsoft.Maps.Point(width/2, height)
            });

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

        img.src = spriteUrl;
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
    
    <fieldset style="width:800px;margin-top:10px;">
        <legend>Image Sprite Pushpins using a Canvas Sample</legend>
        This sample shows how to use and image sprite to create pushpins via an HTML canvas.
    </fieldset>

    <script>
        // Dynamic load the Bing Maps Key and Script
        // Get your own Bing Maps key at https://www.microsoft.com/maps
        (async () => {
            let script = document.createElement("script");
            let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
            script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
            document.body.appendChild(script);
        })();
    </script>
</body>
</html>

 

Check out this and other samples at Samples.BingMapsPortal.com