VEMap.AddShape 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 VEShape Class object or array of VEShape pushpin objects to the base layer.

VEMap.AddShape(shape);

Parameters

Parameter Description

Shape

The VEShape object or array of VEShape pushpin objects to be added. Required.

Remarks

The shape parameter can be a single pushpin, polyline, or polygon, or an array of pushpins. If the map is in 3D mode, the shapes are added one-by-one. If the map has been redrawn, shapes are added one-by-one. If a shape with the same internal identifier already exists in the base layer, this method throws an exception.

Examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>VEMap.AddShape, VEMap.DeleteShape, VEMap.Clear, VEShape.Hide, VEShape.Show</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 shape   = null;
         var c1Shape = null;
         var c2Shape = null;
         var c3Shape = null;
         var c4Shape = null;

         var cornerOne   = new VELatLong(45.01188,-111.06687);
         var cornerTwo   = new VELatLong(45.01534,-104.06324);
         var cornerThree = new VELatLong(41.01929,-104.06);
         var cornerFour  = new VELatLong(41.003,-111.05878);
         
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            // Set initial button states.
            btnDeleteShape.disabled = "disabled";
            btnAddShape.disabled = 0;
            btnHideShape.disabled = "disabled";
            btnShowShape.disabled = "disabled";
         }
         
         function AddShape()
         {
            // Create pushpins at each corner
            c1Shape = new VEShape(VEShapeType.Pushpin, cornerOne);
            c2Shape = new VEShape(VEShapeType.Pushpin, cornerTwo);
            c3Shape = new VEShape(VEShapeType.Pushpin, cornerThree);
            c4Shape = new VEShape(VEShapeType.Pushpin, cornerFour);

            // Create the VEShape object and assign parameters.
            var points = new Array(cornerOne, cornerTwo, cornerThree, cornerFour);
            
            shape = new VEShape(VEShapeType.Polygon, points);
            shape.SetLineWidth(3);
            shape.SetLineColor(new VEColor(0,150,100,1.0));
            shape.SetFillColor(new VEColor(0,150,100,0.5));

            // Add the shapes to the map
            map.AddShape(shape);
            map.AddShape(c1Shape);
            map.AddShape(c2Shape);
            map.AddShape(c3Shape);
            map.AddShape(c4Shape);
            
            // Set the map view to the same points used by the shape.
            map.SetMapView(points);
            
            // Toggle button states.
            btnDeleteShape.disabled = 0;
            btnAddShape.disabled = "disabled";
            btnHideShape.disabled = 0;
            btnShowShape.disabled = "disabled";
         }
         
         function DeleteShape()
         {
            // Delete the shape.
            map.DeleteShape(shape);

            // Toggle button states.
            btnDeleteShape.disabled = "disabled";
            btnAddShape.disabled = 0;
            btnHideShape.disabled = "disabled";
            btnShowShape.disabled = "disabled";
         }
         
         function HideShape()
         {
            // Hide the shape from view.
            shape.Hide();

            // Toggle button states.
            btnDeleteShape.disabled = 0;
            btnAddShape.disabled = "disabled";
            btnHideShape.disabled = "disabled";
            btnShowShape.disabled = 0;
         }
         
         function ShowShape()
         {
            // Make the shape visible again.
            shape.Show();

            // Toggle button states.
            btnDeleteShape.disabled = 0;
            btnAddShape.disabled = "disabled";
            btnHideShape.disabled = 0;
            btnShowShape.disabled = "disabled";
         }

         function ClearMap()
         {
            map.Clear();
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       <input id="btnAddShape" type="button" value="Click to Add a Shape" 
       name="addshape" onclick="AddShape()"><br />
       <input id="btnDeleteShape" type="button" value="Click to Delete the Shape" 
       name="deleteshape" onclick="DeleteShape()"><br />
       <input id="btnHideShape" type="button" value="Click to Hide the Shape" 
       name="hideshape" onclick="HideShape()"><br />
       <input id="btnShowShape" type="button" value="Click to Show the Shape" 
       name="showshape" onclick="ShowShape()"><br />
       <input id=btnClear" type="button" value="Click to clear the map"
       name="clearmap" onclick="ClearMap()">
   </body>
</html>

See Also

Reference

VEMap.DeleteShape Method