ArcXML Overlay Exmple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Basic ArcXML Overlay Example</title>
<SCRIPT LANGUAGE=javascript src="scripts/Util.js"></SCRIPT>
<SCRIPT LANGUAGE=javascript src="/ecwplugins/lib/scripts/NCSConstants.js"></SCRIPT>
<SCRIPT LANGUAGE=vbscript src="/ecwplugins/lib/scripts/NCSCheckActiveX.vbs"></SCRIPT>
<SCRIPT LANGUAGE=javascript src="/ecwplugins/lib/scripts/NCSCheck.js"></SCRIPT>
<SCRIPT LANGUAGE=javascript src="/ecwplugins/lib/scripts/NCSCreateView.js"></SCRIPT>

<SCRIPT LANGUAGE=javascript src="/ecwplugins/lib/scripts/NCSControl.js"></SCRIPT>
<SCRIPT LANGUAGE=javascript src="/ecwplugins/lib/scripts/NCSToolbar.js"></SCRIPT>
<SCRIPT LANGUAGE=javascript src="/ecwplugins/lib/scripts/NCSProgressbar.js"></SCRIPT>

<script language="javascript">

function display(value){
// This function is for testing and can be called with a variable (like pResponse)
// to see the results displayed in a new browser window
// If you do not see results right-click on page and View Source as XML does not display
var oNavWin2 = window.open("","navwindow2","height = 400,width = 800, scrollbars=yes")
oNavWin2.opener = self;
oNavWin2.document.open();
oNavWin2.document.write("<html><body>" + value + "</body></html>")
alert("pause");
}

function onExtentsChangeCB(dWorldTLX, dWorldTLY, dWorldBRX, dWorldBRY) {
// ------- See Note 1 for a discussion of this function -------------
if (document.form1.checkbox1.checked == true || document.form1.checkbox2.checked == true ) {
if (tMapTimer != null){
clearTimeout(tMapTimer);
}
tMapTimer = setTimeout('onMapRedraw()',500); // draw in 1/2 a second
}
}

function onMouseUpCb(dMask,dScreenX, dScreenY, dWorldX, dWorldY)
{
// ------- See Note 2 for a discussion of setting color transparencies -------------
if( document && document.ECWView1 ) {
sRGB = document.ECWView1.GetLayerRGB("ArcXMLLayer",dWorldX, dWorldY);
if( sRGB != "#" ) {
if( aUserColors[sRGB] == null ) { // check to see if user has already set trans on this color
if( aStyleColors[sRGB] == null ) // see if this was a style color
dColor = 1.0;
else
dColor = aStyleColors[sRGB];
}
else // user has already set tranparency on this color
dColor = aUserColors[sRGB]; // pick up the last setting for this color
// cycle through none/all/shaded
dColor = dColor + 0.5;
if( dColor > 1.0 )
dColor = 0.0;
aUserColors[sRGB] = dColor; // store the new user set transparency value for that color
document.ECWView1.SetLayerTransparency("ArcXMLLayer", sRGB, aUserColors[sRGB]); // set the trans for that color
document.ECWView1.Refresh(); // make sure the view reflects the new value
}
}
}

ECWCheckPlugin(); // check the plug-in version and upgrade if required

function onLoadCB() {
tOnLoadTimer = setTimeout("LoadHandler()", 500);
}
function LoadHandler() {
if (document.ECWView1.AddLayer("ECW", "ecwp://demo.ermapper.com/images/geodetic/world/landsat742.ecw", "Landsat742", "quality=75;") < 0) {
alert("Error adding layer 'Landsat742' : \n\n" + document.ECWView1.GetLastErrorText());
}
}
function ECWToolbarCB(uid, value)
{
if (uid == "UID_VIEW_PAN")
{
document.ECWView1.SetPointerMode(0);
}
else if (uid == "UID_VIEW_ZOOM")
{
document.ECWView1.SetPointerMode(1);
}
else if (uid == "UID_VIEW_ZOOMBOX")
{
document.ECWView1.SetPointerMode(3);
}
else if (uid == "UID_VIEW_POINTER")
{
document.ECWView1.SetPointerMode(2);
}
else if (uid == "UID_VIEW_RESET")
{
document.ECWView1.SetExtentsAll();
}
else if (uid == "UID_IMAGE_COMBO")
{
document.ECWView1.DeleteAllLayers();
if (document.ECWView1.AddLayer("ECW", value, "RasterLayer", "") < 0 ) {
alert(document.ECWView1.GetLastErrorText());
}
}
}
// ---------------------------------------------------------------------------
// Global variables.
// ---------------------------------------------------------------------------

var ECWProgressBar = null;
var arcIMSURL = "";
var LocalServer = document.location.host; // derive the server name for web server serving this page

// see Note 3 for discussion of these variable assignments
var ArcIMSLayerRailroads, ArcIMSLayerLakes, ArcIMSLayerLand, ArcIMSLayerNonUSLand, ArcIMSLayerOceans;
ArcIMSLayerRailroads = true;
ArcIMSLayerLakes = true;
ArcIMSLayerLand = true;
ArcIMSLayerNonUSLand = true;
ArcIMSLayerOceans = true;

// global variables which hold the most recent map overlay extents - used for testing if the map extents have changed.
var dMapWorldTLX = 0.0;
var dMapWorldTLY = 0.0;
var dMapWorldBRX = 0.0;
var dMapWorldBRY = 0.0;

var tMapTimer = null; // used to set a timer for calling the GIS server.

var aUserColors = new NCSColorList(); // User selected colors to hide/show/make transparent on the GIS layer
var aStyleColors = new NCSColorList(); // map colors to turn off by default, based on scale etc. User colors overide these

var sCurrentMapURL = null;
var pCurrentBody = null;

var TransValue = 1.0; // default the transparency value for the Overlay Layer to 'fully not transparent'

// ---------------------------------------------------------------------------
// Extents change callback - update the GIS layer if changes or enough time has passed
// ---------------------------------------------------------------------------

// See Note 4 for discussion of the onMapReceived function
function onMapReceived(pName, sURL, pBody, pAction, dWorldTLX, dWorldTLY, dWorldBRX, dWorldBRY, pResponse) {
//display(pResponse); // can be used to display variable content into a popup window
//alert(pResponse);

// the following code strips out spurious characters if present
var newString = pResponse;
for (i=1;i<20;i++){
if((newString.indexOf("&")) >= 0) {
newString = newString.replace("&","&");
}
}
pResponse = newString;

clearTimeout( tMapTimer ); // stops the timer to prevent the GIS request being sent again after 5 second delay

// See Note 5 for discussion of the onMapReceived function
if(pResponse == "NCS_OVERLAY_SUCCESS") {
        // The control has already had a valid map back, and drawn it, so do nothing.
document.GIS_Busy.src="images/busy.gif"; // stop the Server Busy indicator
    } else if(pResponse.substr(0, ("NCS_OVERLAY_FAILURE").length) == "NCS_OVERLAY_FAILURE") {
        alert("Overlay Error\r\nURL: " + sURL + "\r\nBody: " + pBody + "\r\nResponse: " + pResponse);
document.GIS_Busy.src="images/busy.gif"; // stop the Server Busy indicator
    } else {
// See Note 6 for discussion of the onMapReceived function
        if((i = pResponse.indexOf("<ARCXML")) >= 0) {
            pTempStr = pResponse.substr(pResponse.indexOf("<OUTPUT"));
            pImageURL = ((pTempStr.substr(pTempStr.indexOf("url=\"") + 5)).split("\""))[0];
            pTempStr = pResponse.substr(pResponse.indexOf("<ENVELOPE"));

            if(sURL == sCurrentMapURL && pBody == pCurrentBody) {
var sParams = "";
sParams = "mode=WORLD;";
sParams += "body=;";
sParams += "action=GET;";
sParams += "worldTLX=" + dWorldTLX + ";";
sParams += "worldTLY=" + dWorldTLY + ";";
sParams += "worldBRX=" + dWorldBRX + ";";
sParams += "worldBRY=" + dWorldBRY + ";";
sParams += "url=" + pImageURL + ";"

document.ECWView1.SetLayerParameter("ArcXMLLayer", sParams);
            }
// See Note 7 for discussion of the onMapReceived function
        } else {
// This branch indicates an error condition and the following code alerts the user
document.GIS_Busy.src="images/busy.gif"; // stop the Server Busy indicator
            // If its html, open a window, else just pop up an alert
            if(pResponse.indexOf("<html") >= 0 || pResponse.indexOf("<HTML") >= 0) {
                newWin = window.open("", "ErrorWin", "menubar:no,toolbar:no,resize:no,scrollbars=yes,width=500,height=400");
                newWin.document.writeln("<H2><B>Overlay error :</B></H2>");
                newWin.document.writeln("<B>URL :</B><BR>");
                newWin.document.writeln(sURL);
                newWin.document.writeln("<BR><B>RESPONSE :</B>");
                newWin.document.writeln(pResponse);
            } else {
                alert("Unknown Overlay Response\r\nURL: " + sURL + "\r\nBody: " + pBody + "\r\nResponse: " + pResponse);
            }
        }
    }
    onMapRedraw();      // user may have zoomed since last map update, so go and check if extents have changed
}

/**
* onMapRedraw : called via a timer. When the user is roaming and zooming, periodically send off a
*       request to the map server to get a new map image.
*/
// See Note 8 for discussion of onMapRedraw function
function onMapRedraw() {
var sz_lat = 0.0;
    var sz_long = 0.0;
    var rbody = "";
    var sParams = "";

    // store the current extents of the map view
    dViewTLX = document.ECWView1.GetTopLeftWorldCoordinateX();
    dViewTLY = document.ECWView1.GetTopLeftWorldCoordinateY();
    dViewBRX = document.ECWView1.GetBottomRightWorldCoordinateX();
    dViewBRY = document.ECWView1.GetBottomRightWorldCoordinateY();

// check if the current extents have changed from the stored extents and if so structure a new request
    if( dMapWorldTLX != dViewTLX
|| dMapWorldTLY != dViewTLY
|| dMapWorldBRX != dViewBRX
|| dMapWorldBRY != dViewBRY ) {

        nWidth = document.ECWView1.GetViewWidth();
        nHeight = document.ECWView1.GetViewHeight();

// -------- preset some colors to "punch out" fill colors from the overlay image --------------
// See Note 9 for discussion of presetting color transparency
        aStyleColors["#FFFFCC"] = 0.0;
       //aStyleColors["#84C1FF"] = 0.0;
aStyleColors["#FFFFFF"] = 0.0;
//aStyleColors["#CCCCCC"] = 0.75;

        // Format some ArcXML to describe the area and the image we want to display.

// See Note 10 for discussion of rBody
rbody = "<ARCXML version=\"1.0.1\"><REQUEST><GET_IMAGE><PROPERTIES>";
        rbody += "<ENVELOPE minx=\"" + Math.min(dViewTLX, dViewBRX) + "\" miny=\"" + Math.min(dViewTLY, dViewBRY) + "\" maxx=\"" + Math.max(dViewTLX, dViewBRX) + "\" maxy=\"" + Math.max(dViewTLY, dViewBRY) + "\"/>";
        rbody += "<IMAGESIZE width=\"" + nWidth + "\" height=\"" + nHeight + "\" />";
        rbody += "<OUTPUT type=\"PNG\" />";

        rbody += "<LAYERLIST order=\"true\">";
        rbody += "<LAYERDEF name=\"Oceans and Seas\" visible=\"" + ArcIMSLayerOceans + "\" />";
        rbody += "<LAYERDEF name=\"Non-U.S. Land\" visible=\"" + ArcIMSLayerNonUSLand + "\" />";
        rbody += "<LAYERDEF name=\"Land\" visible=\"" + ArcIMSLayerLand + "\" />";
        rbody += "<LAYERDEF name=\"Lakes\" visible=\"" + ArcIMSLayerLakes + "\" />";
        rbody += "<LAYERDEF name=\"Railroads\" visible=\"" + ArcIMSLayerRailroads + "\">";

        rbody += "<GROUPRENDERER>";
        rbody += "<SIMPLERENDERER><HASHLINESYMBOL color=\"0,0,0\" linethickness=\"1\" tickthickness=\"1\" transparency=\"1.0\" interval=\"16\" width=\"6\" type=\"foreground\" antialiasing=\"false\" overlap=\"true\" /></SIMPLERENDERER>";
        rbody += "<SIMPLELABELRENDERER field=\"NAME\" linelabelposition=\"placeontop\" howmanylabels=\"one_label_per_shape\"><TEXTSYMBOL glowing=\"255,255,255\" antialiasing=\"false\" font=\"Arial\" fontstyle=\"regular\" fontsize=\"12\" /></SIMPLELABELRENDERER>";
        rbody += "</GROUPRENDERER>";

        rbody += "</LAYERDEF>";
        rbody += "</LAYERLIST>";
        rbody += "</PROPERTIES></GET_IMAGE></REQUEST></ARCXML>";
        pCurrentBody = rbody;
        sCurrentMapURL = arcIMSURL;

        tMapTimer = setTimeout('onMapRedraw()',5000);        // If no response in 5 seconds, try again
        // set the stored extents to the current map extents
dMapWorldTLX = dViewTLX;
        dMapWorldTLY = dViewTLY;
        dMapWorldBRX = dViewBRX;
        dMapWorldBRY = dViewBRY;

// Structure the parameters string that is used by the control to make the Server request
sParams = "mode=WORLD;";
sParams += "body=" + rbody + ";";
sParams += "action=POST;";
sParams += "worldTLX=" + dMapWorldTLX + ";";
sParams += "worldTLY=" + dMapWorldTLY + ";";
sParams += "worldBRX=" + dMapWorldBRX + ";";
sParams += "worldBRY=" + dMapWorldBRY + ";";
sParams += "url=" + arcIMSURL + ";";
sParams += "header=;"; // added to get results back in xml rather than binary

// See Note 11 for discussion of SetLayerParameter
document.ECWView1.SetLayerParameter( "ArcXMLLayer", sParams);

// See Note 2 for general discussion of setting color transparencies
// The following code sets individual color transparency on the layer from the style color array
        for( c in aStyleColors ) // set style color transparencies for ones not overridden by user
            if( aUserColors[c] == null ) {
                document.ECWView1.SetLayerTransparency("ArcXMLLayer", c, aStyleColors[c]);
            }

// The following code sets individual color transparency on the layer from the user color array
        for( c in aUserColors )          // set user colors from aUserColors array
            document.ECWView1.SetLayerTransparency("ArcXMLLayer", c, aUserColors[c]);

// See Note 12 for discussion of setting overall transparency
document.ECWView1.SetLayerTransparency( "ArcXMLLayer", "#", TransValue); // sets layer transparency

document.GIS_Busy.src = "images/busy_on.gif";
    }
}

function OpenMapOverlay(checkbox) {
// This function is called when the user clicks on or off one of the checkboxes for the ArcXML Service overlays

    document.ECWView1.DeleteLayer("ArcXMLLayer"); // delete the existing overlay layer if it exists

var bValue = checkbox.checked; // if checkbox is on then bValue = true else it is false
// ------- find out which Server the user has selected ------
if(document.form1.checkbox1.checked==true){
arcIMSURL = "http://" + LocalServer + "/servlet/com.esri.esrimap.Esrimap?ServiceName=/SampleIWS/images/geodetic/USADemo.ecw";
}
else{
    arcIMSURL = "http://www.geographynetwork.com/servlet/com.esri.esrimap.Esrimap?ServiceName=Atlas_Railroads&CustomStream=False&Encode=True";
}

if (bValue == true){ // if a Server is selected start the process of ordering a map
        if (tMapTimer != null)
            clearTimeout( tMapTimer );
        dMapWorldTLX = 0.0; dMapWorldTLY = 0.0; dMapWorldBRX = 0.0; dMapWorldBRY = 0.0; // clear any old stored map extents

        delete aStyleColors;     aStyleColors = new NCSColorList();
        delete aUserColors;      aUserColors = new NCSColorList();

// Open an empty GIS layer, with no datasource or parameters just yet. They will be set in the extent change callback.

// See Note 13 for discussion of GISOverlay layers

if (document.ECWView1.GetLayerIndex("ArcXMLLayer") == -1) {
if (document.ECWView1.AddLayer( "GISOverlay", "", "ArcXMLLayer", "") == -1) {
alert("Error adding ArcIMS layer to view : " + document.ECWView1.GetLastErrorText());
}
}
//See Note 14 for discussion of retrieving the map extents
        if( document && document.ECWView1 ){     // force an extents callback to update this new map
            onExtentsChangeCB(document.ECWView1.GetTopLeftWorldCoordinateX(),
                              document.ECWView1.GetTopLeftWorldCoordinateY(),
                              document.ECWView1.GetBottomRightWorldCoordinateX(),
                              document.ECWView1.GetBottomRightWorldCoordinateY());
}
    }
    else {
       document.ECWView1.DeleteLayer("ArcXMLLayer"); // no GIS server now selected kill the layer
    }
}
// See Note 15 for discussion of this function
function set_transparency(value) {
var percent = parseFloat(value);
if (percent > 100) percent = 100;
if (percent < 0) percent = 0;
TransValue = percent / 100;
document.ECWView1.SetLayerTransparency( "ArcXMLLayer", "#", TransValue );
    document.form1.txtTransparency.value = Math.round(percent) + " %";
}

</SCRIPT>
</head>
<body onload="onLoadCB();">

<table width ="90%" align = "center" border = 1 bordercolor = gray>
<tr>
<th colspan = "4">
<font color=gray face=verdana size=2>BASIC ARCXML OVERLAY EXAMPLE</font>
    </th>
   </tr>
   <tr>
<td colspan = "4">
<font face = arial size = 2 color = black>
This sample demonstrates how to overlay an image generated from an ESRI ArcIMS� web map server. By modifying the ArcXML� sent to the ArcIMS� server, individual layers can be requested from the map server. The sample data is from the U.S. Geological Survey and is hosted by the Geography Network. You must be connected to the internet for this sample to work. <a href = "#use">Usage instructions</a>
</font>
</td>
</tr>
<TR bgcolor='#dddddd'>
<form name = "form1">

<TD width = 15%>
<SCRIPT LANGUAGE=javascript>
var ECWToolbar1 = new NCSToolbar("UID_VIEW_TOOLBAR", null, false, -1);
ECWToolbar1.addButton("Pan around the image by click-dragging the hand on the image",
                      "/ecwplugins/lib/bitmaps/buttons/roam.png", "/ecwplugins/lib/bitmaps/buttons/roamSelect.png", true, ECWToolbarCB, "UID_VIEW_PAN");
ECWToolbar1.addButton("Zoom in or out of the image interactively by click-dragging the magnifier on the image",
                      "/ecwplugins/lib/bitmaps/buttons/zoom.png", "/ecwplugins/lib/bitmaps/buttons/zoomSelect.png", true, ECWToolbarCB, "UID_VIEW_ZOOM");
ECWToolbar1.addButton("Zoom into the image by click-dragging a zoom box over the image",
                      "/ecwplugins/lib/bitmaps/buttons/zoombox.png", "/ecwplugins/lib/bitmaps/buttons/zoomboxSelect.png", true, ECWToolbarCB, "UID_VIEW_ZOOMBOX");
ECWToolbar1.addButton("Select pointer mode to profile or select image features",
                      "/ecwplugins/lib/bitmaps/buttons/pointer.png", "/ecwplugins/lib/bitmaps/buttons/pointerSelect.png", true, ECWToolbarCB, "UID_VIEW_POINTER");
ECWToolbar1.addSpace ("SPACE", "UID_VIEW_SPACE1");
ECWToolbar1.addButton("Reset the image to maxiumum extents",
                      "/ecwplugins/lib/bitmaps/buttons/reset.png", "/ecwplugins/lib/bitmaps/buttons/resetSelect.png", false, ECWToolbarCB, "UID_VIEW_RESET");
ECWToolbar1.addSpace ("SPACE", "UID_VIEW_SPACE1");
//ECWToolbar1.addPopdownCombo ("Image : ", imageArray, ECWToolbarCB, "UID_IMAGE_COMBO");

document.writeln(ECWToolbar1.rebuild());
ECWToolbar1.setCurrentItem("UID_VIEW_PAN");
ECWToolbar1.getTable().border=0;
ECWToolbar1.getTable().cellSpacing=2;
ECWToolbar1.getTable().cellPadding=0;
</SCRIPT>
</TD>
<td align = center>
<input type="checkbox" id="checkbox1" name="checkbox1" onClick="document.form1.checkbox2.checked=false;OpenMapOverlay(this);">
<font color = blue face = verdana size =2>Local ArcXML Server
</td>
<td align = center>
 <input type="checkbox" id="checkbox2" name="checkbox2" onClick="document.form1.checkbox1.checked=false;OpenMapOverlay(this);">
<font color = blue face = verdana size =2>ESRI ArcIMS� Server
</font>
</td>
<td align = center>
<font face = verdana color = blue size = 2> Set Transparency </font>
<input type = "text" name = "txtTransparency" value = "100 %" size = "4" onchange = "set_transparency(document.form1.txtTransparency.value);">
   </td>
</form>
</tr>
<tr>

<TD colspan = 4>
<SCRIPT LANGUAGE=javascript>
// See Note 16 for discussion of the callbacks defined in setting up the view
NCSCreateView("ECWView1", "100%", "400", PARAM_VIEW_ONLAYERRESPONSE,"onMapReceived();", PARAM_VIEW_ONPERCENTCOMPLETE, " ECWProgressBar.setProgress(value);", PARAM_VIEW_ONMOUSEUP,"onMouseUpCb();", PARAM_VIEW_ONEXTENTCHANGE,"onExtentsChangeCB();");
</SCRIPT>
</TD>
</tr>
<tr>
<TD valign = "center" colspan = 1 height = 30 bgcolor='#dddddd'>
<font face = verdana size = 2 color = black>
Server Status : <img src = "images/busy.gif" name = "GIS_Busy">
</font>
</td>

<TD class="NCSTableHeading" colspan = 3 bgcolor='#dddddd'>
<SCRIPT LANGUAGE=javascript>
ECWProgressBar = new NCSProgressbar("NCS_UID_PROGRESS", null, 50, false);
ECWProgressBar.label = "Progress : ";
document.writeln(ECWProgressBar.build());
</SCRIPT>
</TD>

<tr>
<td colspan=4>
<font size ="2" face ="arial," color ="black">
<p><A name="use"></A>
<B>Usage:</B>
<ul>
<li>Click the 'Local ArcXML Server' check box to display an ArcXML overlay from your local Image Web Server.
<li>Click the 'ESRI ArcIMS� Server' check box to display an ArcXML overlay from an ESRI GIS Server.
<li>Pan and Zoom the image and the Overlay Image will automatically be updated.</li>
<li>Modify the 'Set Transparency' text and click outside the box to change the overall tranparency of the overlay image.</li>
<li>Select pointer mode from the toolbar and click on a color in the vector display to toggle that color from 0% transparent, to 100% transparent to 50% transparent. (This is only effective on the ESRI GIS Server Image which is vector data).</li>
</ul>
</font>
</td>
</tr>
</table>
</body>
</html>