Adding an ArcGIS Server service to the Virtual Earth map

You may want to display a map layer from an ArcGIS Server service on top of the Virtual Earth (VE) map. This is not required in order to query or work with map layers, but it does show the map layer to the user of your website.

This walk-through closely parallels the "Add a service from my ArcGIS Server" example in the ArcGIS Virtual Earth Interactive SDK. The complete code for the walk-through is at the bottom of this page if you have any questions about where code goes during the steps below.

Adding an ArcGIS Server service

This walk-though adds an ArcGIS Server service onto a Virtual Earth map. You will do this by providing a button that the user clicks to add the service. You could, of course, have the service be added immediately upon load of the page.

Create a web page with a basic Virtual Earth map. You may use the walk-through in this Help, Creating a base map with Virtual Earth. Save the file, for example to ArcGISVEMap1.htm.
Add a reference to the ArcGIS JavaScript client script. This is required for every page to use the ArcGIS JavaScript Extension for Virtual Earth. Add this in the header section, just below the reference to the Virtual Earth script.
CopyArcGIS JavaScript Extension for Virtual Earth script reference
```
<script src="http://serverapi.arcgisonline.com/jsapi/ve/?v=1.4" type="text/javascript"></script>
```
Now add a button to the page, just after the <div> with id of "mymap". The user will click this button to add the ArcGIS Server map service. We'll code the onclick event of this button next.
CopyButton to add map layer
```
<input type="button" id="addMapButton" value="Add ArcGIS Service" style="width: 200px;" onclick="AddMap()" />
```
Just after the OnPageLoad function inside the existing <script> block, add the following code. The AddMap function will be called when the user clicks the button. This function creates a "layer factory" that will create the map layer. The layer factory's CreateLayer method takes three arguments: the URL of the map service (which is set just outside the function), the name of the layer within the map service to use, and the name of a function that will receive information for adding the layer to the VE map.

You must know the URL of the map service at this point. The administrator of the ArcGIS Server may provide information on the map service for you. Alternatively, you may be able to discover the information about the server if you know the URL of the server. See The Services Directory and the REST API for tips on discovering service information.
CopyCreating the map layer
```
var agisve_services = null; 
var tileUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer"; 

function AddMap() {
    agisve_services = new ESRI.ArcGIS.VE.ArcGISLayerFactory();
    agisve_services.CreateLayer(tileUrl, "Parcels", GetMap);   
}
```
Finally, add the GetMap function that is specified in the AddMap function. The ArcGIS Server will pass to this function a VETileSourceSpecification object (tileSourceSpec) with the information required to add the map layer to the Virtual Earth map. The GetMap function uses this object to actually add the layer to the map, using the VE map's AddTileLayer method. The minimum zoom level, which prevents drawing the layer when the map is zoomed out to small scales, is set before adding the layer.
CopyAdding the layer to the VE map
```
function GetMap(tileSourceSpec, resourceInfo) {
    tileSourceSpec.MinZoom = 10;
    tileSourceSpec.Opacity=0.5;
    map.AddTileLayer(tileSourceSpec,true);
    $get("addMapButton").disabled = true;
}
```
The $get function is a shortcut built into ASP.NET AJAX for the document.getElementById function. We use it to disable the add-layer button after the layer is added.
Save the page. Then open it in a browser, either by double-clicking the file in your file browser, or loading it from your Web server. It should display the standard Virtual Earth map. When you click the button, the ArcGIS Server map layer should be added to the map.

Discussion

Remember that each page that uses the ArcGIS JavaScript Extension for Virtual Earth requires references both to the VE script library and to the ArcGIS Virtual Earth script library (step 2 above). The URL of each script library is an online resource. This means that the browser must be connected to the Internet.

To add an ArcGIS Server map layer to the VE map, you must embed the URL of the map service into the page (step 4). For more information about finding map services in ArcGIS Server, see The Services Directory and the REST API.

The code in steps 4 and 5 are the most difficult in this walkthrough. In order to add a layer to a Virtual Earth map, you must use the VE map's AddTileLayer method. The AddTileLayer requires as its first argument a VETileSourceSpecification object. The ArcGIS JavaScript Extension for Virtual Earth makes creating this object relatively easy. You use the ArcGISLayerFactory to create the layer. The layer factory's CreateLayer method accepts the name of a function that will receive the VETileSourceSpecification object. The layer factory creates the object and passes it to the function, in our case the GetMap function. That function then uses the tileSourceSpec object in the VE map's AddTileLayer method.

Complete code for this walkthrough

CopyExample: Adding an ArcGIS Server layer to Virtual Earth

<!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>
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/ve/?v=1.4" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" >
        var map = null;

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

        var agisve_services = null; 
        var tileUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer"; 

        function AddMap() {
            agisve_services = new ESRI.ArcGIS.VE.ArcGISLayerFactory();
            agisve_services.CreateLayer(tileUrl, "Parcels", GetMap);   
        }

        function GetMap(tileSourceSpec, resourceInfo) {
            tileSourceSpec.MinZoom = 10;
            tileSourceSpec.Opacity=0.5;
            map.AddTileLayer(tileSourceSpec,true);
            $get("addMapButton").disabled = true;
        }

    </script>
</head>
<body onload="OnPageLoad()" >
    <form action="" >
    <div id='mymap' style="position:relative; width: 750px; height: 500px;"></div>
    <input type="button" id="addMapButton" value="Add ArcGIS Service" style="width: 200px;" onclick="AddMap()" />
    </form>
</body>
</html>