Export (0) Print
Expand All

VEShape.GetCustomIcon 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 VEShape objects custom icon.


VEShape.GetCustomIcon();

A String or VECustomIconSpecification Class object representing the custom icon of the VEShape object.

The example for this topic uses the following custom icon images.

Bb412517.49e551af-ba75-4ee1-a1f6-28fe4d25780c(en-us,MSDN.10).jpg

Bb412517.1eb51174-3e3e-475c-a01f-48063d84b762(en-us,MSDN.10).jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var lat1 = 44.890661025750134;
         var lon1 = -85.39930343627931;
         var latLong01 = new VELatLong(lat1, lon1); //Elk Rapids
         var latLong02 = new VELatLong(44.75453548416006, -85.62744140625001); //Traverse City
         var latLong03 = new VELatLong(44.98131376911565, -85.21270751953125); //Bellaire
         var poly01 = null;
         var pin02 = null;
         var pin03 = null;
         var shape = null;
     
         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 inTheLake = new VELatLong(lat1 - .007, lon1);
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            // This sample only works in 2D mode (SetCustomIcon w/HTML)
            if (map.GetMapMode() != VEMapMode.Mode2D)
            {
               alert("This sample only works in 2D mode");
               return;
            }

            map.SetCenterAndZoom(latLong01, 10);
            map.SetMapStyle(VEMapStyle.Hybrid);
            map.AttachEvent("onclick", ShapeInfo);
            AddShapes();
         }  
     
         function AddShapes()
         {
            //Create VEShape objects, assign parameters, and add to the map.
            poly01 = new VEShape(VEShapeType.Polygon, points01);
            poly01.SetTitle("poly01");
            poly01.SetCustomIcon(
               "<span style='font-family:Arial; font-size:x-small;" +
               "color:Black; background-color:White'>" +
               "<img src='images/boat.jpg'/>poly01</span>");
            poly01.SetIconAnchor(inTheLake);   
            map.AddShape(poly01);
         
            pin02 = new VEShape(VEShapeType.Pushpin, latLong02);
            pin02.SetTitle("pin02");
            pin02.SetCustomIcon(
               "<span style='font-family:Arial; font-size:x-small;" +
               "color:Black; background-color:White'>" +
               "<img src='images/ski.jpg'/>pin02</span>");  
            map.AddShape(pin02);
         
            pin03 = new VEShape(VEShapeType.Pushpin, latLong03);
            pin03.SetTitle("pin03");
            pin03.SetCustomIcon(
               "<span style='font-family:Arial; font-size:x-small;" +
               "color:Black; background-color:White'>" +
               "<img src='images/boat.jpg'/>pin03</span>"); 
            map.AddShape(pin03);
         } 
     
         function ShapeInfo(e)
         {
            if(e.elementID != null)
            {
               shape = map.GetShapeByID(e.elementID);
             
               //Respond to ctrl-click event (toggle polygon icon visibility).
               //Note that pushpin shapes ignore ShowIcon and HideIcon.
               if(e.ctrlKey == 1)
               {
                  shape.HideIcon();
               }
               else
               {
                  shape.ShowIcon();
               }
             
               //Display information for the selected shape.
               var info = "";
               info += "ID (event object): " + e.elementID + "<br />";
               info += "ID (GetID method): " + shape.GetID() + "<br />";
               info += "Type: " + shape.GetType() + "<br />";
               info += "Title: " + shape.GetTitle() + "<br />";                 
               icon = shape.GetCustomIcon();
               info += "Icon: " + icon + "<br />";
                
               //Note that the Icon Anchor value for pushpin shapes is always
               //the latitude and longitude of the pin itself.
               info += "Icon Anchor: " + shape.GetIconAnchor() + "<br />";
               label.innerHTML = info;
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      Ctrl-click to hide the polygon icon.<br />
      Click any shape for info.
      <div id="label"></div>
   </body>
</html>

Show:
© 2014 Microsoft