VEShapeLayer.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 objects to the layer.

VEShapeLayer.AddShape(shape);

Parameters

Parameter Description

Shape

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

Remarks

The shape parameter can be a single pushpin, polyline, or polygon, or an array of pushpins. You must add the VEShapeLayer to the map before calling this method, otherwise, the shapes are added one-by-one. 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 layer, this method throws an exception.

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 links = "Click for info: <a href='#' onClick='ShapeLayerInfo(0)'>Base Layer</a><br/>";
         var title = null;
         var layer = null;
         var selIndex = 0;
         var index = 0;
         var shapes = "";
         var shapeID = null;
 
         function GetMap()
         {
            map = new VEMap('myMap');

            // SetDashboardSize must be called before calling LoadMap
            map.SetDashboardSize("tiny");

            map.LoadMap();

            // Create some shape layers;
            // generate some links with index values;
            // display message with shape info on click.
            for (var i = 1; i < 4; i++)
            {
               layer = "layer" + i;
               layer = new VEShapeLayer();
               layer.SetTitle("ShapeLayer" + i);
               layer.SetDescription("This is ShapeLayer " + i + ".");
               title = layer.GetTitle();
               map.AddShapeLayer(layer);
               links += "Click for info:" +
                        "<a href='#' onClick='ShapeLayerInfo(" + i + ")'>" + 
                        title + "</a><br/>";
            }
            // Add a title and description for the base layer.
            baseLayer = map.GetShapeLayerByIndex(0);
            baseLayer.SetTitle("Base Layer");
            baseLayer.SetDescription(
               "This is the base layer. " +
               "It always has index 0, and cannot be deleted.");
            
            // Add links.
            divInfo.innerHTML = links;
            AddShapes();
            IndexChanged(0);
         } 
        
         // Add a shape to each layer.
         function AddShapes()
         {
            var points = new Array(
               new VELatLong(45.01188,-111.06687),
               new VELatLong(45.01534,-104.06324),
               new VELatLong(41.01929,-104.06),
               new VELatLong(41.003,-111.05878)
            );
            
            for (var i = 0; i < 4; i++)
            {
               shape = new VEShape(VEShapeType.Pushpin, points[i]);
               layer = map.GetShapeLayerByIndex(i);
               shape.SetDescription("This is pushpin " + i + ".");
               shape.SetTitle("Pushpin " + i);
               layer.AddShape(shape);
            }
            
            map.SetMapView(points);
         }
        
         // Display some info about each layer when the link is clicked.
         function ShapeLayerInfo(index)
         {
            var layer = map.GetShapeLayerByIndex(index);
            var count = layer.GetShapeCount();
            alert("Title: " + layer.GetTitle() + "\nIndex: " + 
               index + "\nDescription: " + layer.GetDescription() + 
               "\nShape Count: " + count);
         }
        
         // Hide the layer at the selected index.
         function HideLayer()
         {
            layer = map.GetShapeLayerByIndex(selIndex);

            if(layer.IsVisible())
            {
               layer.Hide();
            }
         }
        
         // Hide all layers.
         function HideAllLayers()
         {  
            map.HideAllShapeLayers();
         }
        
         // Show all layers.
         function ShowAllLayers()
         {  
            map.ShowAllShapeLayers();
         }
        
         // Make the layer at the selected index visible again.
         function ShowLayer()
         {
            layer = map.GetShapeLayerByIndex(selIndex);

            if(!layer.IsVisible())
            {
               layer.Show();
            }
         }
        
         // Add a shape to the center of the layer at the selected index.
         function AddShapeToLayer()
         {
            var center = new VELatLong();
            center = map.GetCenter();
            shape = new VEShape(VEShapeType.Pushpin, center);
            shape.SetTitle("Another new shape");
            layer = map.GetShapeLayerByIndex(selIndex);
            layer.AddShape(shape);
            AdjustView();
            IndexChanged(selIndex);
         }
        
         // Delete all shapes within the layer at the selected index.
         function DeleteAllShapes()
         {
            layer = map.GetShapeLayerByIndex(selIndex);
            layer.DeleteAllShapes();
            IndexChanged(selIndex);
         }
        
         // Delete the specified shape within the specified layer.
         function DeleteOneShape(shapeIdx, layerIdx)
         {
            if (shapeIdx != null && layerIdx != null)
            {
               try
               {
                  layer = map.GetShapeLayerByIndex(layerIdx);
                  shape = layer.GetShapeByIndex(shapeIdx);
                  layer.DeleteShape(shape);
                  IndexChanged(selIndex);
               }
               catch(e)
               {
                  alert(e.message);
               }
            }
            else
            {
               alert("The specified shape, or layer, does not exist.");
            }
         }
        
         // Update hyperlinks when the index selection changes, and shapes are added/removed.
         function IndexChanged(index)
         {
            selIndex = index;
            layer = map.GetShapeLayerByIndex(index);
            count = layer.GetShapeCount();
            
            var links = "<a href='#' id='HideLayer' onclick='HideLayer()'>Click to hide " + 
               layer.GetTitle() + "</a><br />";
            
            links += "<a href='#' id='ShowLayer' onclick='ShowLayer()'>Click to show " + 
               layer.GetTitle() + "</a><br />";
            
            links += "<a href='#' id='HideAllLayers' onclick='HideAllLayers()'>" + 
               "Click to hide all layers</a><br />";
  
            links += "<a href='#' id='ShowAllLayers' onclick='ShowAllLayers()'>" + 
               "Click to show all layers</a><br />";
        
            links += "<a href='#' id='AddShapeToLayer' onclick='AddShapeToLayer()'>" + 
               "Click to add a shape to the center of " + layer.GetTitle() + "</a><br />";
            
            links += "<a href='#' id='DeleteAllShapes' onclick='DeleteAllShapes()'>" + 
               "Click to delete all shapes from " + layer.GetTitle() + "</a><br />";
            
            links += "Click to delete a shape: ";
            
            for (var i = 0; i < count; i++)
            {
               shape = layer.GetShapeByIndex(i);
               shapeID = shape.GetID();
               links += "<a href='#' id='DeleteOneShape' onclick='DeleteOneShape(" + i +  
                  ", " + selIndex + ")'>" + shapeID + "</a> | ";
            }              
            
            divLinks.innerHTML = links;
         }
        
         // Adjust the map view when a shape is added.
         function AdjustView()
         {
            // Click and drag the map a bit, and add a pushpin to the center
            // to see VEGetBoundingRectangle in action.
            layer = map.GetShapeLayerByIndex(selIndex);
            rect = layer.GetBoundingRectangle();
            count = layer.GetShapeCount();
            map.SetMapView(rect);

            if (count <= 1)
            {
               map.SetZoomLevel(7);
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      Select a Layer by Index:
      <form id="indexRadio">
         0<input name="radio" type="radio" value="0" onclick="IndexChanged(0)" checked="checked"/>&nbsp;
         1<input name="radio" type="radio" value="1" onclick="IndexChanged(1)"/>&nbsp;
         2<input name="radio" type="radio" value="2" onclick="IndexChanged(2)"/>&nbsp;
         3<input name="radio" type="radio" value="3" onclick="IndexChanged(3)"/>&nbsp;
      </form>
      <div id="divLinks"></div>  
      <div id="divShapes"></div>      
      <div id="divInfo"></div>
   </body>
</html>

See Also

Reference

VEShapeLayer.DeleteShape Method
VEShapeLayer.DeleteAllShapes Method