<!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 layer01 = null;
var layer02 = null;
var shape01 = null;
var shape02 = null;
var id01 = null;
var id02 = null;
var layer = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.AttachEvent("onclick", ShapeLayerAlert);
}
function AddShapeLayers()
{
var points01 = 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),
new VELatLong(45.01188,-111.06687)
);
var points02 = new Array(
new VELatLong(43.01188,-109.06687),
new VELatLong(43.01534,-101.06324),
new VELatLong(39.01929,-101.06),
new VELatLong(39.003,-109.05878),
new VELatLong(43.01188,-109.06687)
);
layer01 = new VEShapeLayer();
layer01.SetTitle("layer01 title");
map.AddShapeLayer(layer01);
layer02 = new VEShapeLayer();
layer02.SetTitle("layer02 title");
map.AddShapeLayer(layer02);
shape01 = new VEShape(VEShapeType.Polygon, points01);
shape01.SetLineWidth(3);
shape01.SetLineColor(new VEColor(0,150,100,1.0));
shape01.SetFillColor(new VEColor(0,150,100,0.5));
layer01.AddShape(shape01);
shape02 = new VEShape(VEShapeType.Polygon, points02);
shape02.SetLineWidth(3);
shape02.SetLineColor(new VEColor(0,100,150,1.0));
shape02.SetFillColor(new VEColor(0,100,150,0.5));
layer02.AddShape(shape02);
map.SetMapView(points01);
id01 = shape01.GetID();
id02 = shape02.GetID();
var links = "Delete: <a href='#' onClick='DeleteOneShape(id01)'>" + id01 + "</a><br/>";
links += "Delete: <a href='#' onClick='DeleteOneShape(id02)'>" + id02 + "</a>";
shapeLinks.innerHTML = links;
ShapeLayerInfo();
}
function DeleteShapeLayer(layer)
{
map.DeleteShapeLayer(layer);
ShapeLayerInfo();
}
function DeleteAllLayers()
{
map.DeleteAllShapeLayers();
ShapeLayerInfo();
}
function DeleteAllShapes()
{
map.DeleteAllShapes();
}
function DeleteOneShape(id)
{
shape = map.GetShapeByID(id);
map.DeleteShape(shape);
alert("Shape ID: " + id + " has been deleted.");
}
function ShapeLayerInfo()
{
var layers = "Number of shape layers: " + map.GetShapeLayerCount() + " (including the base layer)";
layerInfo.innerHTML = layers;
}
function ShapeLayerAlert(e)
{
if(e.elementID != null)
{
shape = map.GetShapeByID(e.elementID);
layer = shape.GetShapeLayer();
alert("Shape ID " + shape.GetID() + "\nbelongs to shape layer '" + layer.GetTitle() + "'.");
}
}
</script>
</head>
<body onload="GetMap();" style="font-family:Arial">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div id="shapeLinks"></div>
<div id="layerInfo"></div>
<INPUT id="addshapelayers" type="button" value="Click to Add Shape Layers" name="addshapelayers"
onclick="AddShapeLayers();"/>
<INPUT id="deletelayer01" type="button" value="Click to Delete layer01" name="deletelayer01"
onclick="DeleteShapeLayer(layer01);"/>
<INPUT id="deletelayer02" type="button" value="Click to Delete layer02" name="deletelayer02"
onclick="DeleteShapeLayer(layer02);"/>
<INPUT id="deletealllayers" type="button" value="Click to Delete All Layers" name="deletealllayers"
onclick="DeleteAllLayers();"/>
<INPUT id="deleteallshapes" type="button" value="Click to Delete All Shapes" name="deleteallshapes"
onclick="DeleteAllShapes();"/><br />
</body>
</html>