VEShape.SetCustomIcon 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.
Sets the VEShape object's custom icon.
VEShape.SetCustomIcon(customIcon);
Parameters
| Parameter | Description |
|---|---|
customIcon |
A String object containing either a URL to an image, custom HTML that defines the custom icon, or a VECustomIconSpecification Class object. |
Remarks
If the customIcon field is a string that begins with the < character, it is considered to be HTML, and it is used to create the pushpin icon. All other strings are treated as URLs to an image. If the URL is invalid or doesn't point to an image, then nothing will be displayed for the pushpin icon.
Do not use the <a> tag within custom HTML, as this will cause a browser error. The HTML for custom icons is automatically enclosed within an <a> tag. Adding an additional <a> tag results in an illegally nested tag.
You can also overlay text on top of your custom image by using HTML with an <img> tag. One possible use of this would be to show incremental numbers or letters on a group of pins that share the same custom image.
If you only want to use 2D mode, use raw html to create the pin. If you only want to use 3D mode, use a VECustomIconSpecification object and specify all of the 3D parameters.
The example for this topic uses the following custom icon images.
.jpg "Bb412425.49e551af-ba75-4ee1-a1f6-28fe4d25780c(en-us,MSDN.10).jpg")
.jpg "Bb412425.1eb51174-3e3e-475c-a01f-48063d84b762(en-us,MSDN.10).jpg")
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.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>