<!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.2"></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("http://msdn.microsoft.com");
shape01.SetPhotoURL("http://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("http://msdn.microsoft.com");
shape02.SetPhotoURL("http://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>