VEMap.GetShapeByID Method

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.

Gets the reference to a VEShape Class object based on its internal identifier.

VEMap.GetShapeByID(ID);

Parameters

Parameter Description

ID

The identifier of the shape to retrieve. Required.

Return Value

A reference to the specified VEShape object. If no shape exists with the specified ID, this method returns null.

Remarks

A shape's ID is internal and cannot be changed. A shape's ID string as provided by an Event object (see VEMap Events) may have some extensions on it beyond the root ID string returned by VEShape.GetID Method. However, this method will always return the correct shape reference, regardless of any extension after the root ID.

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 lat1 = 44.88980971906551; 
         var lon1 = -85.39827346801759;
         var lat2 = 44.99879594361408; 
         var lon2 = -85.70159912109375;
         var latLong1 = new VELatLong(lat1, lon1);
         var latLong2 = new VELatLong(lat2, lon2);
         var latLong3 = new VELatLong(45.004622150149935, -85.56427001953126);
        
         //Create a pair of VELatLong arrays in the shape of an octagon
         var points01 = [
            new VELatLong(lat1, lon1 - 0.15),
            new VELatLong(lat1 + 0.1, lon1 - 0.05),
            new VELatLong(lat1 + 0.1, lon1 + 0.05),
            new VELatLong(lat1, lon1 + 0.15),
            new VELatLong(lat1 - 0.1, lon1 + 0.05),
            new VELatLong(lat1 - 0.1, lon1 - 0.05)];
            
         var points02 = [
            new VELatLong(lat2, lon2 - 0.15),
            new VELatLong(lat2 + 0.1, lon2 - 0.05),
            new VELatLong(lat2 + 0.1, lon2 + 0.05),
            new VELatLong(lat2, lon2 + 0.15),
            new VELatLong(lat2 - 0.1, lon2 + 0.05),
            new VELatLong(lat2 - 0.1, lon2 - 0.05)];
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.SetCenterAndZoom(latLong3, 9);
            map.SetMapStyle(VEMapStyle.Aerial);      
            map.AttachEvent("onclick", ShapeInfo);
            AddShapes();
         }   
     
         function AddShapes()
         {   
            //Create VEShape objects, set parameters, and add to the map         
            shape01 = new VEShape(VEShapeType.Polygon, points01);            
            shape01.SetLineWidth(2);
            shape01.SetLineColor(new VEColor(0,150,100,1.0));
            shape01.SetFillColor(new VEColor(0,100,150,0.5));
            shape01.SetTitle("Title for shape01");
            shape01.SetDescription("This is the description of shape01.");
            shape01.SetMoreInfoURL("https://msdn.microsoft.com");
            shape01.SetPhotoURL("https://dev.live.com/Themes/default/images/Mix08/service/logo_virtualearth.jpg");
            shape01.SetPoints(points01);
            shape01.ShowIcon();
            map.AddShape(shape01);
            
            shape02 = new VEShape(VEShapeType.Polygon, points02);            
            shape02.SetLineWidth(2);
            shape02.SetLineColor(new VEColor(0,100,150,1.0));
            shape02.SetFillColor(new VEColor(0,150,100,0.5));
            shape02.SetTitle("Title for shape02");
            shape02.SetDescription("This is the description of shape02.");
            shape02.SetMoreInfoURL("https://msdn.microsoft.com");
            shape02.SetPhotoURL("https://dev.live.com/Themes/default/images/Mix08/service/logo_virtualearth.jpg");
            shape02.SetPoints(points02);
            shape02.ShowIcon();
            map.AddShape(shape02);
         }
        
         function SwapPoints()
         {
            //Switch the points between the two shapes, making them trade places
            var pts = shape01.GetPoints();

            if (pts[0].Latitude == "44.88980971906551")
            {
               shape01.SetPoints(points02);
               shape02.SetPoints(points01);
            }
            else
            {
               shape01.SetPoints(points01);
               shape02.SetPoints(points02);
            }
         }
        
         function ShapeInfo(e)
         {
            if(e.elementID != null)
            {
               shape = map.GetShapeByID(e.elementID);
               var info = "";
               info += "ID (event object): " + e.elementID + "\n";
               info += "ID (GetID method): " + shape.GetID() + "\n";
               info += "Type: " + shape.GetType() + "\n";
               info += "Title: " + shape.GetTitle() + "\n";
               info += "Description: " + shape.GetDescription() + "\n";
               info += "More Info URL: " + shape.GetMoreInfoURL() + "\n";
               info += "Photo URL: " + shape.GetPhotoURL() + "\n";
             
               fillColor = shape.GetFillColor();
               info += "Fill Color: R: " + fillColor.R +
                       " | G: " + fillColor.G +
                       " | B: " + fillColor.B +
                       " | A: " + fillColor.A +
                       "\n";
          
               lineColor = shape.GetLineColor();  
               info += "Line Color: R: " + lineColor.R +
                       " | G: " + lineColor.G +
                       " | B: " + lineColor.B +
                       " | A: " + lineColor.A + "\n"; 
             
               info += "Line Width: " + shape.GetLineWidth() + "\n";

               alert(info);
            }
            else
            {
               alert("No shape information.");
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <a href='#' onclick="SwapPoints()">Swap Points</a><br />
      Click a shape to get more info.<br />
   </body>
</html>

See Also

Reference

VEMap.AddShape Method