Maintain the state of an HTML Viewer while dynamically resizing the MapFrame

Summary

Currently, when a browser containing an HTML Viewer is resized, the HTML Viewer is reloaded and the state of the application is cleared. In addition, when the frame containing the map image is resized, the map image does not adjust to fill the new frame boundaries.

Note:
 This sample assumes that no other changes have been made to a HTML Viewer created by ArcIMS Designer.  If frame names or variables have been changed, variable references in the example may need to be changed. 

Procedure

1. In the HTML Viewer's root folder, open the viewer.htm file in a text editor.
   
   
2. Change the following line within the FRAMESET tag at the bottom of the file from
   
   

   Code:
   document.writeln('<FRAME NAME="MapFrame" SRC="MapFrame.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="Yes" RESIZE="YES">');

   
   to
   
   

   Code:
   document.writeln('<FRAME NAME="MapFrame" SRC="MapFrame.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="Yes" RESIZE="YES" onresize="reloadApp()">');

   
   This edit will call the reloadApp() function upon resize of the frame containing the map image (MapFrame).
3. Change the following content from
   
   

   Code:
   function reloadApp() {
   		//document.location = "default.htm";
   		window.clearTimeout(reloadTimer);
   		reloadTimer = window.setTimeout("document.location = 'viewer.htm' + cmdString",1000);
   }

   
   to
   
   

   Code:
   function reloadApp() {
   		window.clearTimeout(reloadTimer);
   		reloadTimer = window.setTimeout("reMap()",1000);
   }
   
   function reMap(){
   
   	var mf = MapFrame;
   
   	mf.mWidth = mf.getMapWidth();
   	mf.mHeight = mf.getMapHeight();
   	mf.iWidth = mf.mWidth;
   	mf.iHeight = mf.mHeight;
   	mf.sWidth = mf.screen.width;
   	mf.sHeight = mf.screen.height;
   
   	mf.ovRatio = mf.mWidth / mf.mHeight;
   	mf.locHeight = parseInt(mf.mHeight/5);
   	mf.locWidth = parseInt(mf.locHeight*mf.ovRatio);
   	mf.loadBannerLeft = parseInt((mf.mWidth - 273)/2);
   	mf.loadBannerTop = parseInt((mf.mHeight - 30)/2);
   
   	mf.theImage.width = mf.mWidth;
   	mf.theImage.height = mf.mHeight;
   
   	mf.ovImage.width = mf.locWidth;
   	mf.ovImage.height = mf.locHeight;
   
   	mf.pixel.width = mf.sWidth;
   	mf.pixel.height = mf.sHeight;
   
   	mf.ovShadow.style.width = mf.locWidth+4;
   	mf.ovLayer.style.width = mf.locWidth+4;
   	mf.ovShadow.style.height = mf.locHeight+4;
   	mf.ovLayer.style.height = mf.locHeight+4;
   
   	mf.zoomOVBoxTop.style.visibility = 'hidden';
   	mf.zoomOVBoxLeft.style.visibility = 'hidden';
   	mf.zoomOVBoxRight.style.visibility = 'hidden';
   	mf.zoomOVBoxBottom.style.visibility = 'hidden';
   
   	mf.zoomOVBoxTop.style.width = mf.locWidth+4;
   	mf.zoomOVBoxLeft.style.width = mf.locWidth+4;
   	mf.zoomOVBoxRight.style.width = mf.locWidth+4;
   	mf.zoomOVBoxBottom.style.width = mf.locWidth+4;
   
   	mf.zoomOVBoxTop.style.height = mf.locHeight+4;
   	mf.zoomOVBoxLeft.style.height = mf.locHeight+4;
   	mf.zoomOVBoxRight.style.height = mf.locHeight+4;
   	mf.zoomOVBoxBottom.style.height = mf.locHeight+4;
   
   	mf.i2Width = mf.locWidth;
   	mf.i2Height = mf.locHeight;
   
   	mf.forceNewOVMap = true;
   	mf.sendMapXML();
   
   }

   
   This change will call the reMap() function one second after a resize event on the MapFrame has occurred. The reMap() function resets a number of variables associated with the main map and overview map image size. In addition, it updates Cascading Style Sheet (CSS) style properties for a number of layers. Once these changes have been added to an HTML Viewer, the frame containing the map image can be resized by moving a frame boundary or by changing the size of the browser window without losing HTML Viewer state (extent, selections, frame content, etc.).