Drawing Over a Bing Map

Vitalii Symon, 07 January 2011

Drawing Over a Bing MapDrawing Over a Bing Map 

Today I’ll provide you with couple of code snippets for handling right click for additional operations with Bing Maps. This might be needed if you want to create a dynamic map with the ability to add/remove some objects on the maps and preserve the ability to navigate the maps in a usual manner (with the left mouse button), so the look & feel of control will be pretty natural.

Step 1. Create blank functions for mouseDown event

        var center = null;
        var moving = false;
        function onmousedown(e) { }
        function onmousemove(e) { }
        function onmouseup(e) { }

and bind it to your maps event somewhere below function declaration:

            myMap.AttachEvent("onmousedown", onmousedown);
            myMap.AttachEvent("onmouseup", onmouseup);
            myMap.AttachEvent("onmousemove", onmousemove);

Step 2. Now all the events are handled and we can write actual code

        function onmousedown(e) {
            center = myMap.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
            return moving = e.rightMouseButton;
        }

The first line will map pixel coordinates onto geographical latitude and longitude pair; second line will assign true value to moving value if right button was pressed. After the value will be returned and true will indicate that event was handled and map will not do any actions related to the mouse down event.

Step 3. Other events. Writing move/up events is pretty straight-forward

        function onmousemove(e) {
            if (moving) {
              // do whatever here
            }
            return moving;
        }

Return true will mean blocking any further actions to reflect the event. And of course don’t forget to release mouse after up click:

        function onmouseup(e) {
            moving = false;
        }

This simple code will allow you to create quick and easy web applications integrated to Bing Maps with minimal effort.