VEMap.AddControl Method

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

Adds a custom control to the map.

VEMap.AddControl(element, zIndex);

Parameters

Parameter Description

element

An HTML element that contains the control to be added

zIndex

The z-order for the control. Optional.

Caution The element parameter is an HTML element that can have JavaScript embedded in it. Verify the input value before executing it on your web page.

Remarks

You can use the document.CreateElement method of the Document Object Model (DOM) to create a new HTML element. Add the functionality you want, and then call the AddControl method. You can also use the DOM to remove the control once it has been added.

Because of the way Internet Explorer displays embedded controls on a Web page, when working with maps in 3D mode, custom controls are hidden behind the map. If you want to show a custom control on top of the 3D map, follow these steps:

  1. Create an IFRAME element that is the same size and at the same location as the custom control.

  2. Set the frameborder property of the IFRAME to 0 and the scrolling property to "no".

  3. In the style property for the IFRAME, set the z-index to 1 and the position settings to match those of your control.

  4. In the style property for your custom control, set the z-index to a number larger than 1.

  5. Call the following lines of code, where shim is the IFRAME element and el is your custom control:

    el.shimElement = shim;
el.parentNode.insertBefore(shim, el);

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var i = 0;
            
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();       
         }
         
         function AddControl()
         {
            var el = document.createElement("div"); 
            el.id = "myControl" + i; 
            el.style.top = 100 + (i * 10); 
            el.style.left = 100 + (i * 10);            
            el.style.border = "2px solid black";
            el.style.background = "White";
            el.innerHTML = el.id;  
            map.AddControl(el);
            addShim(el);
            counter.value = i;
            i++;
         }
         
         function addShim(el)
         {
            var shim = document.createElement("iframe");
            shim.id = "myShim" + i;
            shim.frameBorder = "0";
            shim.style.position = "absolute";
            shim.style.zIndex = "1";
            shim.style.top  = el.offsetTop;
            shim.style.left = el.offsetLeft;
            shim.width  = el.offsetWidth;
            shim.height = el.offsetHeight;
            el.shimElement = shim;
            el.parentNode.insertBefore(shim, el);
         }
         
         function DeleteControl()
         {
            var myControl = document.getElementById("myControl" + counter.value);

            if (myControl!=null)
            {
               var myControlID = myControl.id;
               map.DeleteControl(myControl);
               alert("Control " + myControlID + " has been deleted.");
            }
            else
            {
               alert("No control with ID " + counter.value + " was found.");
               return;
            }
            
            var myShim = document.getElementById("myShim" + counter.value);

            if (myShim!=null)
            {
               myShim.parentNode.removeChild(myShim);
            }

            myShim = null;
            i--;
            counter.value = i;
         }
         
         function HideControl()
         {
            var myControl = document.getElementById("myControl" + counter.value);

            if (myControl!=null)
            {
               map.HideControl(myControl);
               alert(myControl.id + " is now hidden from view.");
            }
            else
            {
               alert("No control with ID " + counter.value + " was found.");
               return;
            }
         }
         
         function ShowControl()
         {
            var myControl = document.getElementById("myControl" + counter.value);
   
            if (myControl!=null)
            {
               map.ShowControl(myControl);
               alert(myControl.id + " has been restored.");
            }
            else
            {
               alert("No control with ID " + counter.value + " was found.");
               return;
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial;font-size:x-small">
      <div id='myMap' style="position: relative; width: 400px; height: 400px;">
      </div>
      Control:&nbsp;
      <input type="text" id="counter" size="20" value="0"/>
      <br />
      <input type="button" value="add control" onclick="AddControl();"/>
      <input type="button" value="delete control" onclick="DeleteControl();"/>
      <br/>
      <input type="button" value="hide control" onclick="HideControl();"/>
      <input type="button" value="show control" onclick="ShowControl();"/>
   </body>
</html>

See Also

Reference

VEMap.DeleteControl Method
VEMap.HideControl Method
VEMap.ShowControl Method