Use ArcXML to dynamically add data layers in the HTML Viewer

Summary

The MAP ArcXML tag uses the dynamic attribute to add layers to a mapservice on the fly without having to add them to the mapservice configuration AXL file. This article provides an example of enabling the HTML viewer to accomplish this task.

Procedure

1. Create an AXL file in Author or a text editor with the states shapefile as the only layer.
2. Open the AXL file in a text editor and change the existing MAP element from:
   
   

   Code:
   <MAP>

   
   -to-
   
   

   Code:
   <MAP dynamic="true" />

   
   
   
3. Open Administrator and create an image mapservice from the AXL file. Then open Designer and create an HTML Viewer Web site using the image mapservice. Accept the defaults.
4. Modify the deBugOn variable to see the ArcXML sent to the ArcIMS server, by following this example:
   
   A. Open ArcIMSParams.js in a text editor and search for deBugOn. Modify the line to read:
   
   

   Code:
   deBugOn = 3;

   
   B. Add the following line at the top of the file:
   
   

   Code:
   addDynLayer = true;

   
   
5. Add a button to the HTML viewer toolbar by following the example below. When clicked, the button runs a function that adds ArcXML code referencing a new data layer in a request for a map image.
   
   Open toolbar.htm in a text editor and scroll to the bottom. Change the following code:
   
   

   Code:
   if (parent.MapFrame.allowOptions) {
   	// Options. . . requiers aimsOptions.js... allowOptions is set to true in this file
   	document.write('<td align="center" valign="middle">');
   	document.write('<img src="images/wrench.gif" width=16 height=16 hspace=1 vspace=1 border=0 alt=" ' + t.buttonList[40] + '" onmousedown="parent.MapFrame.writeOptionForm();" onmouseover="window.status=\' ' + t.buttonList[40] + '\'">');
   	isSecond = !isSecond
   	document.writeln('</td>');
   	if (isSecond) document.write('</tr><tr>');
   }
   if (parent.MapFrame.canLoad) {
   	// Load MapService. . . requires aimsGeneric.js
   	document.write('<td align="center" valign="middle">');
   	document.write('<img src="images/open_1.gif" width=16 height=16 hspace=1 vspace=1 border=0 alt=" ' + t.buttonList[41] + '" onmousedown="parent.MapFrame.loadMapForm();" onmouseover="window.status=\' ' + t.buttonList[41] + '\'">');
   	document.writeln('</td>');
   }
   				

   
   -to-
   
   

   Code:
   if (parent.MapFrame.allowOptions) {
   	// Options. . . requiers aimsOptions.js... allowOptions is set to true in this file
   	document.write('<td align="center" valign="middle">');
   	document.write('<img src="images/wrench.gif" width=16 height=16 hspace=1 vspace=1 border=0 alt=" ' + t.buttonList[40] + '" onmousedown="parent.MapFrame.writeOptionForm();" onmouseover="window.status=\' ' + t.buttonList[40] + '\'">');
   	isSecond = !isSecond
   	document.writeln('</td>');
   	if (isSecond) document.write('</tr><tr>');
   }
   if (parent.MapFrame.addDynLayer) {
   	document.write('<td align="center" valign="middle">');
   	document.write('<img src="images/wrench.gif" width=16 height=16 hspace=1 vspace=1 border=0 alt="Add Dynamic Layer" onmousedown="parent.MapFrame.clickFunction(\'CustomAXL\');" onmouseover="window.status=\'Add Dynamic Layer \'">');
   	isSecond = !isSecond
   	document.writeln('</td>');
   	if (isSecond) document.write('</tr><tr>');
   }
   
   if (parent.MapFrame.canLoad) {
   	// Load MapService. . . requires aimsGeneric.js
   	document.write('<td align="center" valign="middle">');
   	document.write('<img src="images/open_1.gif" width=16 height=16 hspace=1 vspace=1 border=0 alt=" ' + t.buttonList[41] + '" onmousedown="parent.MapFrame.loadMapForm();" onmouseover="window.status=\' ' + t.buttonList[41] + '\'">');
   	document.writeln('</td>');
   } 

   
   
6. To enable the function responsible for adding the dynamic layer and request a new map image, perform the following edits:
   
   A. Open aimsClick.js in a text editor. Find the clickFunction() function and change the following code:
   
   

   Code:
   function clickFunction (toolName) {
   	if (hasLayer("measureBox"))
   		hideLayer("measureBox");
   	switch(toolName) {
   	
   	// Zooming functions
   	case "zoomin":
   

   
   -to-
   
   

   Code:
   function clickFunction (toolName) {
   	if (hasLayer("measureBox"))
   		hideLayer("measureBox");
   	switch(toolName) {
   	// Zooming functions
   	case "CustomAXL":
   		
   		if (aimsCustomPresent){
   		 aimsCustomPresent=false
   		} else {
   		 aimsCustomPresent=true;
   		}
   		
   		parent.MapFrame.sendMapXML();
   		
   		break
   
   	case "zoomin":

   
   
   When aimsCustomPresent equals true, the following line in the writeXML() function of the aimsXML.js file will call the addCustomToMap1() function in the aimsCustom.js file.
   
   

   Code:
   	if (aimsCustomPresent) theString += addCustomToMap1();
   

   
   Note that writeXML() is called when a new map image is requested.
7. Open aimsCustom.js in a text editor. Change the following:
   
   A. Change the following line:
   
   

   Code:
   aimsCustomPresent=true;

   
   -to-
   
   

   Code:
   aimsCustomPresent=false;

   
   B. Change the following section of code in the addCustomToMap1() function:
   

   Code:
   function addCustomToMap1(){
   	var customString = "";
   	/*
   		customString += '<LAYER type="ACETATE" name="theMode">\n';
   		customString += '<OBJECT units="PIXEL">\n<TEXT coord="5 ' + (iHeight-10) + '" label="This is a test">\n';
   		customString += '<TEXTMARKERSYMBOL fontstyle="BOLD" fontsize="12" font="ARIAL" fontcolor="' + modeMapColor + '" ';
   		customString += 'threed="TRUE" glowing="' + modeMapGlow + '" />\n</TEXT>\n</OBJECT>';
   		customString += '\n</LAYER>\n';
   	*/
   	return customString;
   }

   
   -to-
   
   

   Code:
   function addCustomToMap1(){
   	var customString = "";
   	 customString += '<WORKSPACES>\n';	
   	 customString += '<SHAPEWORKSPACE name="shp_ws-1" directory="C:/Program Files/ArcGIS/ArcIMS/Samples/TutorialData" />\n';
   	 customString += '</WORKSPACES>\n'; 
   	 customString += '<LAYER type="featureclass" name="cities" visible="true" id="2">\n';	
   	 customString += '<DATASET name="cities" type="point" workspace="shp_ws-1" />\n';
   	 customString += '<SIMPLERENDERER>\n';
   	 customString += '<SIMPLEMARKERSYMBOL color="255,0,0" width="20" />\n';	
   	 customString += '</SIMPLERENDERER>\n';
   	 customString += '</LAYER>\n';
   	return customString;
   }

   
   
8. Save all files.
9. Load the Web site in a browser. Note that message boxes should popup to indicate that ArcXML is being sent from the client to the server (REQUEST) and received from the server by the client (RESPONSE).
10. Click the wrench icon in the toolbar. Your custom ArcXML string should be added to a GET_IMAGE request and sent to the ArcIMS server. You should see a REQUEST (containing the string in the addCustomToMap1() function in aimsCustom.js) and a RESPONSE (containing the location of the output image).