B. Adding Pushpins, Polylines and Polygons using the VEShape Class
Overview: Virtual Earth maps become useful when you can add to the map data that is important to you. At the completion of this exercise you will understand how to use the VEShape Class to add your custom point, linear and polygonal data to a Virtual Earth map.
Step One: Open you text editor and add the following code. This code will place a 400x400 Virtual Earth map into your web page. You can view this page by saving the code as “MyVEMap.htm”, opening Microsoft Internet Explorer, clicking “File” the “Open,” navigating to MyVEMap.htm and click open.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(36.12247, -115.17112), 15,'h' ,false);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>
Step Two: Add a button to your page as illustrated below in red. We’ll put a value in to recognize the button and an onclick event (LoadVEPins) to add pins to the map.
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
<INPUT TYPE=BUTTON OnClick="LoadVEPins();" VALUE="Load Pins">
</body>
Step Three: Add pins to your map. Add a function to place the pins to the map when the Load Pins button is clicked. Insert the code in red into your file. Once complete, load the file in Internet Explorer and click the “Load Pins” button to see your pins appear on the map.
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(36.12247, -115.17112), 15,'h' ,false);
}
//Add Pushpins to the Map
function LoadVEPins()
{
//First, create an array of points
var myPinArray = new Array(
new VELatLong(36.13114, -115.16561),
new VELatLong(36.11467, -115.18032),
new VELatLong(36.11450, -115.16402));
//Loop through the points and use AddShape() to add them to the map
for(x in myPinArray)
{
//Instantiate the VE Shape - Pins
var myVEShapePins = new VEShape(VEShapeType.Pushpin, myPinArray[x]);
//Set the title for each pushpins
myVEShapePins.SetTitle("Pushpin " + x);
//Add Pins to the map
map.AddShape(myVEShapePins);
}
}
</script>
Step Four: Add a line to your map. We’ll need to do two things in this step. We need another button and we’ll add the script to draw a vector line onto your map. Instead of creating a whole new object layer for lines, we’ll use the VEShape Class to just add a new VEShapeType for our line. Add the code in red to your file. Once complete, load the file in Internet Explorer and click the “Draw Line” button to see your pins appear on the map.
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(36.12247, -115.17112), 15,'h' ,false);
}
//Add Pushpins to the Map
function LoadVEPins()
{
//First, create an array of points
var myPinArray = new Array(
new VELatLong(36.13114, -115.16561),
new VELatLong(36.11467, -115.18032),
new VELatLong(36.11450, -115.16402));
//Loop through the points and use AddShape() to add them to the map
for(x in myPinArray)
{
//Instantiate the VE Shape - Pins
var myVEShapePins = new VEShape(VEShapeType.Pushpin, myPinArray[x]);
//Set the title for each pushpins
myVEShapePins.SetTitle("Pushpin " + x);
//Add Pins to the map
map.AddShape(myVEShapePins);
}
}
//Add Polylines to the Map
function LoadVELine()
{
//Create an array of lat/lons
var myLineArray = new Array(
new VELatLong(36.13114, -115.16561),
new VELatLong(36.11467, -115.18032),
new VELatLong(36.11450, -115.16402),
new VELatLong(36.13114, -115.16561));
//Instantiate the VE Shape - Line
var myVEShapeLine = new VEShape(VEShapeType.Polyline, myLineArray);
//Set the line color
myVEShapeLine.SetLineColor(new VEColor(0, 255, 0, 1));
//Set the title for the pushpin
myVEShapeLine.SetTitle("My Polyline");
//Add the line to the map
map.AddShape(myVEShapeLine);
}
</script>
...
<form>
<input type=”button” value=”Load Pins” onclick=”LoadVEPins();”>
<br/>
<input type=”button” value=”Draw Line” onclick=”LoadVELine();”>
</form>
Step Five: Add a polygon to your map. You can add complex vector shapes to your map by using the same VEShape class and using the Polygon VEShapeType property. Once complete, load the file in Internet Explorer and click the “Draw Polygon” button to see your pins appear on the map.
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(36.12247, -115.17112), 15,'h' ,false);
}
//Add Pushpins to the Map
function LoadVEPins()
{
//First, create an array of points
var myPinArray = new Array(
new VELatLong(36.13114, -115.16561),
new VELatLong(36.11467, -115.18032),
new VELatLong(36.11450, -115.16402));
//Loop through the points and use AddShape() to add them to the map
for(x in myPinArray)
{
//Instantiate the VE Shape - Pins
var myVEShapePins = new VEShape(VEShapeType.Pushpin, myPinArray[x]);
//Set the title for each pushpins
myVEShapePins.SetTitle("Pushpin " + x);
//Add Pins to the map
map.AddShape(myVEShapePins);
}
}
//Add Polylines to the Map
function LoadVELine()
{
//Create an array of lat/lons
var myLineArray = new Array(
new VELatLong(36.13114, -115.16561),
new VELatLong(36.11467, -115.18032),
new VELatLong(36.11450, -115.16402),
new VELatLong(36.13114, -115.16561));
//Instantiate the VE Shape - Line
var myVEShapeLine = new VEShape(VEShapeType.Polyline, myLineArray);
//Set the line color
myVEShapeLine.SetLineColor(new VEColor(0, 255, 0, 1));
//Set the title for the pushpin
myVEShapeLine.SetTitle("My Polyline");
//Add the line to the map
map.AddShape(myVEShapeLine);
}
//Add Polygon to the Map
function LoadVEPolygon()
{
//Create an array of lat/lons
var myPolygonArray = new Array(
new VELatLong(36.13114, -115.16561),
new VELatLong(36.11467, -115.18032),
new VELatLong(36.11450, -115.16402),
new VELatLong(36.13114, -115.16561));
//Instantiate the VE Shape - Polygon
var myVEShapePolygon = new VEShape(VEShapeType.Polygon, myPolygonArray);
//Set the polygon shading color
myVEShapePolygon.SetFillColor(new VEColor(0, 0, 255, .1));
//Set the title for the pushpin
myVEShapePolygon.SetTitle("My Polygon");
//Add the polygon to the map
map.AddShape(myVEShapePolygon);
}
</script>
...
<form>
<input type=”button” value=”Load Pins” onclick=”LoadVEPins();”>
<br/>
<input type=”button” value=”Draw Line” onclick=”DrawLine();”>
<br/>
<input type=”button” value=”Draw Polygon” onclick=”DrawPolygon();”>
</form>
| 