Creating the base map with Virtual Earth

Most of the walk-throughs in the Getting Started section start with a basic map created with Virtual Earth. You may use this page as the starting point for the other pages. The complete code for the example is at the bottom of this page. You may want to copy and paste the code into a new page when you begin each walk-through. If you are already familiar with creating Virtual Earth maps, you may want to skip this walk-through.

Creating the Virtual Earth map

This walkthrough creates a basic Virtual Earth map on the page. For further help on creating and using VE itself, consult Microsoft's Virtual Earth resources.

In an HTML or text editor, create a new web page or file. A suggested name is VEMap1.htm. You can create the page in your Web server's folders, or in any location on your hard disk. Create an outline of an HTML page with the following content:
CopyStarting HTML content
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Adding an ArcGIS Server layer to Virtual Earth</title>
</head>
<body>
    <form action="" >
    </form>
</body>
</html>
```
The <meta> tag with UTF-8 encoding is required for the Virtual Earth map control to display all map elements properly.
Next, add the Virtual Earth map control. In the header section, just after the title, add the reference to the map control:
CopyAdding the map reference
```
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
```
Inside the <form> of the body, add a div element that will contain the map. The width and height of the map are specified in the style attribute of the div.
CopyAdding the map
```
<div id='mymap' style="position:relative; width: 750px; height: 500px;"></div>
```
In the head of the page, add a script block, and in the script block declare the map, and add a function that creates and loads the VE map:
CopyLoading the map
```
<script language="javascript" type="text/javascript" >
        var map = null;

        function OnPageLoad() {
            var centerat = new VELatLong(33.9795, -117.3716);
            map = new VEMap('mymap');
            map.LoadMap(centerat,12,VEMapStyle.Aerial ,false);
        }
</script>
```
The OnPageLoad function centers the map at a latitude-longitude location before creating and loading the map. The second argument (12) of LoadMap determines the zoom level, which is between 1 and 19.
Finally, in the <body> tag, call the OnPageLoad function so it runs when the page is loaded:
CopyLoading the map at startup
```
<body onload="OnPageLoad()" >
```
Save the page and load it into a browser (double-click on the file in your file browser, or access it through your Web server's URL). You should see the Virtual Earth map centered and zoomed at the location we specified.

Complete code for this walkthrough

CopyExample: creating the Virtual Earth map

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Creating a Virtual Earth map</title>
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" >
        var map = null;

        function OnPageLoad() {
            var centerat = new VELatLong(33.9795, -117.3716);
            map = new VEMap('mymap');
            map.LoadMap(centerat,12,VEMapStyle.Aerial ,false);
        }

    </script>
</head>
<body onload="OnPageLoad()" >
    <form action="" >
    <div id='mymap' style="position:relative; width: 750px; height: 500px;"></div>
    </form>
</body>
</html>