The Virtual Earth Lab @ MIX '07

Article
04/30/2007

Tonight is the night of the big mashup camp for all you late night campers. It will be @ The Venetian in the Tuscana Room 3701 (3rd Floor) from 8P - 2A. For those of you unlucky enough to not be here, fear not. You can have access to the Virtual Earth Version 5 lab I wrote for MIX. I've pasted it below for your coding pleasure. It's fairly simple, but highlights the core changes in Version 5 around the VEShape Class and additional GeoRSS support (now supporting Lines and Polygons). Enjoy!

Microsoft ^® Virtual Earth ^™

Hands-On-Lab Virtual Earth Mash-up - Mix 2007

Creating a Microsoft Virtual Earth Application

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links are provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Unless expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

Microsoft are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

The names of actual companies and products mentioned herein may be the trademarks of their respective owners.

Version 1.0

Introduction

The Virtual Earth platform is Microsoft’s next generation mapping and location service. The Virtual Earth platform enables you to deliver innovative solutions and breakthrough customer experiences. Microsoft 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 and ImportShapeLayerData Classes to add your custom point, linear and polygonal data to a Virtual Earth map. The following exercises will illustrate two ways of achieving this with Version 5 of the Virtual Earth Map Control.

Contents:

A. Exercise 1 – Using Pushpins, Polylines and Polygons using GeoRSS (Beginner) 4

B. Exercise 2 – Using Pushpins, Polylines and Polygons using the VEShape Class (Advanced) 6

C. Conclusion. 11

A. Adding Pushpins, Polylines and Polygons using GeoRSS

Overview: GeoRSS specifies a simple model for tagging external content with geographic feature properties which are consistent with the general feature model and syntax of OGC GML. We can take advantage of a GeoRSS schema to plot pushpins, polylines and polygons onto a map. The following exercise will walk you through the steps of integrating an existing GeoRSS method into Virtual Earth.

Step One: Open your text editor and add the following code. Save the file as myGeoRSS.htm.

<html>

<head>

var map = null;

function GetMap()

{

//Instatiate the map control

map = new VEMap('myMap');

//Load the map into the page

map.LoadMap();

}

</script>

</head>

</body>

</html>

Step Two: Add a button for loading the GeoRSS feed. Also, add functions to get the GeoRSS feed and load it into the map. Once you’ve complete this you can replace the GeoRSS with any GeoRSS feed and render pushpins onto a map. Open the file in Internet Explorer and click the “Load GeoRSS Button.”

<html>

<head>

var map = null;

function GetMap()

{

//Instatiate the map control

map = new VEMap('myMap');

//Load the map into the page

map.LoadMap();

}

function AddGeoRSSLayer()

{

//Create the VEShapeSourceSpecification. The attributes include

//VEDataType, the URL for the GeoRSS file and the lay you want the //data added to

var myShapeSourceSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, 'https://earthquake.usgs.gov/eqcenter/catalogs/eqs1day-M2.5.xml', 1);

//Import the GeoRSS data into the map

map.ImportShapeLayerData(myShapeSourceSpec, onFeedLoad);

}

function onFeedLoad(feed)

{

alert('RSS or Collection loaded');

}

</script>

</head>

<INPUT TYPE=BUTTON OnClick="AddGeoRSSLayer();" VALUE="Load GeoRSS">

</body>

</html>

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>

var map = null;

function GetMap()

{

map = new VEMap('myMap');

map.LoadMap(new VELatLong(36.12247, -115.17112), 15,'h' ,false);

}

</script>

</head>

</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.

<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.

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.

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>

<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.

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>

<br/>

<br/>

<input type=”button” value=”Draw Polygon” onclick=”DrawPolygon();”>

</form>

C. Conclusion

You have successfully created a Virtual Earth Application! You did this by accessing components of the Virtual Earth API using JavaScript and HTML. You were able to successfully load a GeoRSS (XML) feed into a Virtual Earth map to render pushpins identifying locations from the feed. You also used the new VEShape Class and rendered pushpins, polylines and polygons on a Virtual Earth map. To learn more about Virtual Earth go to https://dev.live.com.

The Virtual Earth Lab @ MIX '07

Additional resources