English

How To: Customize the HTML Viewer print functionality to print larger sizes

Summary

Instructions provided describe how to customize the HTML Viewer print functionality in order to print as a larger size. The ArcIMS HTML viewer is designed to print maps on 8 1/2" x 11" paper; however, with a few modifications the viewer can be customized to output maps on larger sized paper.

Procedure

1. Copy the following code and save it as printForm.htm in the root of the HTML viewer Web site, overwriting the existing file:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<HTML>
<HEAD>
<title>PrintForm</title>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
var t;
if (opener) {
if (opener.name=="MapFrame") {
t = opener.parent.MapFrame;
} else {
t = opener;
}
} else {

if (parent.MapFrame) {
t = parent.MapFrame;
} else {
t=document;
}
}

function goPrint() {
alert("Remember to set your print layout to Landscape if necessary before printing.");
var theForm = document.forms[0];
var theTitle = theForm.title.value;

// Get print size from form
var theMapHeight = theForm.height.value;
var theMapWidth = theForm.width.value;
t.getPrintMap(theTitle, theMapWidth, theMapHeight);

var useTextFrame = t.useTextFrame;
t=null;
if (opener) {
window.close();
} else {
if (useTextFrame) document.location = "text.htm";
}
}

//set the size of the print image
function setPrintSize(s){

var mWidth = t.getMapWidth();
var mHeight = t.getMapHeight();

var w, h, r;
r = mHeight/mWidth;
switch(s) {
case 'letter':
w = 600;

break;

case 'tabloid':
w = 1000;
break;

case 'dsize':
w = 2200;
break;

case 'esize':
w = 3000;

break;
default:
w = 600;
break;
} // end switch
h = w * r;
document.thePrintForm.width.value = w;
document.thePrintForm.height.value = Math.round(h);
} // end function
</SCRIPT>
</HEAD>

<BODY BGCOLOR="White" style="font-family:Arial,sans-serif; color:black">
<FORM onsubmit="goPrint();return false;" name="thePrintForm" ID="Form1">
<table style="font-size:smaller;" width="100%" ID="Table1">
<tr valign="top">
<td width="200">
<b>Print Map</b>

<a href="PrintHelp.htm" target="_blank">Help</a><br>

<font size="-2">
Click Create Print Page, then use the menu's File-Print to send the map
to your printer.
</font>
</td>

<td align="center">
Title to display on Map:<br>
<INPUT TYPE="Text" NAME="title" VALUE="ArcIMS HTML Viewer Map" size="30" ID="Text1">
</td>

<td valign="middle" align="center">
<INPUT TYPE="Submit" NAME="submit" VALUE="Create Print Page" ID="Submit1">
</td>

</tr>
<tr>

<td colspan="2" align="center"> Size of Page:
<INPUT name="mapSize" type="radio" value="latter" checked onClick="setPrintSize('letter');" ID="Radio1">11x8.5
<INPUT name="mapSize" type="radio" value="tabloid" onClick="setPrintSize('tabloid');" ID="Radio2">17x11
<INPUT name="mapSize" type="radio" value="dsize" onClick="setPrintSize('dsize');" ID="Radio3">D Size
<INPUT name="mapSize" type="radio" value="esize" onClick="setPrintSize('esize');" ID="Radio4">E Size
</td>
<td colspan="2" align="center">
Map Width
<INPUT NAME="width" VALUE="600" size="5" style="font-size:xx-small; background-color:#CCCCCC" ID="Text2">
Height
<INPUT NAME="height" VALUE="450" size="5" style="font-size:xx-small; background-color:#CCCCCC" ID="Text3">
in pixels
</td>
</tr>
</table>
</form>
</BODY>
</HTML>


2. Copy the following HTML into a new file called 'PrintHelp.htm' and save it in the root of the HTML Viewer Web site. This is a new file and does not overwrite any existing files:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Printing Information</title>
</head>

<body bgcolor="#c0c0c0">
<div align="center"><form><input type="button" onclick="window.close()" value="Close"></form>


<h2>Printing Information</h2>


To print, change the settings as desired in the print settings dialog.
Then click on "Create Print Page" to open
a new Browser window with the Map Image, Overview Map Image, and Legend displayed
(your existing map page remains in the background).
You can then use the browser's File/Print menu item to send the display to your printer. <br>
<br>
Note that the geographical area covered by the printed map may be slightly larger than
the area you are viewing. If the dimensions of the printed map are
different from the viewed map, then one dimension (x or y) must be enlarged to
include the currently viewed map extent.<br>
<br>
If you wish to change any settings after generating the print preview page,
you will need to close the print page, return to the main mapping page and create
a new print page.



<h4>Map Title</h4>


The map title you type will be displayed at the top of the printed page.



<h4>Print Size</h4>


You may choose a size from the options listed, or enter a size in terms of pixels.
For larger map sizes, the map service must be configured to allow large map images.
Contact the website administrator if you have problems printing large maps.<br>
<br>
Technical
note: the size is based on the standard 96 dpi in viewing the map. The actual map image
produced will be adjusted
based on the selected printer resolution dpi.


</body>
</html>

3. Overwrite aimsPrint.js completely with the following code:

// aimsPrint.js
/*
* JavaScript template file for ArcIMS HTML Viewer
* dependent on aimsXML.js, ArcIMSparam.js, aimsCommon.js, aimsMap.js,
* aimsLayers.js, aimsDHTML.js
* aimsClick.js, aimsNavigation.js,
* aimsLegend.js
*/

var printDPI = 300; // BB: printer DPI--may be overridden by print form
var printHeight = 0; // BB: default print dimensions
var printWidth = 0; // BB
var printScale = 0; // BB: RF scale (1:x number) for printing
var INCH_TO_MAP_UNITS = 69 * 63360 // BB: inches in one map unit -- converts DPI to scale
// NOTE that for decimal-degree map, scale is only correct in x or y
// due to convergence of meridians toward the poles!

aimsPrintPresent=true;
var printTitle = titleList[4];
var printMapURL="";
var printOVURL="";
var printLegURL="";
var legVis2=false;
//Print functions

// display print form
function printIt() {
hideLayer("measureBox");
if (useTextFrame) {
parent.TextFrame.document.location = "printform.htm";
} else {
var Win1 = open("printform.htm","PrintFormWindow","width=575,height=150,scrollbars=yes,resizable=yes");
}
}

// create web page for printing
// first get Map
function getPrintMap(title, w, h) {
var tLeft, tRight, tBottom, tTop;
showRetrieveMap();
printTitle=title;

legVis2=legendVisible;
if (aimsLegendPresent) legendVisible=true;

// BB: set print size to input values
if (w != "") printWidth = parseInt(w);
if (h != "") printHeight = parseInt(h);

// BB: set map extent if scale specified
tLeft = eLeft;
tRight = eRight;
tBottom = eBottom;
tTop = eTop;


//BB: set XMLMode so get print res.
XMLMode = 101;
// BB: enlarge legend in proportion to map
var tempLegW = legWidth;
var tempLegH = legHeight;
legWidth = parseInt(printWidth/4);
legHeight = parseInt(printWidth/3);


if (printWidth == 1000){

legLayerfontsize=12;
legSwatchheight=16;
legSwatchwidth=20;

}

if (printWidth == 2200){

legLayerfontsize=14;
legSwatchheight=18;
legSwatchwidth=22;

}

if (printWidth == 3000){

legLayerfontsize=16;
legSwatchheight=20;
legSwatchwidth=24;

}

var theString = writeXML();

eLeft = tLeft;
eRight = tRight;
eBottom = tBottom;
eTop = tTop;
legWidth = tempLegW; // BB: restore default leg vars
legHeight = tempLegH; // BB
legendVisible = legVis2;
sendToServer(imsURL,theString,101);
theString=null;
}

// second, get OVMap
function getPrintOV() {
var tempWidth = i2Width;
var tempHeight = i2Height;
i2Width=parseInt(printWidth/4); //BB: scale to print
i2Height=parseInt(printHeight/4); // BB: scale to print
var tempDraw=drawOVExtentBox;
drawOVExtentBox=true;
XMLMode = 102;
var theString = writeOVXML();
drawOVExtentBox=tempDraw;
i2Width=tempWidth;
i2Height = tempHeight;
sendToServer(imsOVURL,theString,102);
tempWidth=null;
tempHeight=null;
theString=null;
}
// third, get Legend
function getPrintLegend() {
if (printLegURL=="") printLegURL = "images/nolegend.gif";
writePrintPage();
}

// fourth, write the web page
function writePrintPage() {
var Win1 = open("","PrintPage");
Win1.document.writeln('<html><meta http-equiv="Content-Type" content="text/html; charset=' + charSet + '"><head>');
Win1.document.writeln(' <title>' + titleList[5] + '</title>');
Win1.document.writeln('</head>');
Win1.document.writeln('<body BGCOLOR="White" TEXT="Black" LEFTMARGIN=0 TOPMARGIN=0>');
Win1.document.writeln('<FONT FACE="Arial"><B>');

Win1.document.writeln('<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="0" NOWRAP>'); //BB: omit width
Win1.document.writeln(' <TR>');
Win1.document.writeln(' <TH COLSPAN="2" style="font-size:' + parseInt(printWidth/20) + 'px">' + printTitle + '</TH>'); // BB: scale title
Win1.document.writeln(' </TR>');
Win1.document.writeln(' <TR>');
Win1.document.write(' <TD');
if (hasOVMap) Win1.document.write(' ROWSPAN="2"');
Win1.document.writeln('>');
Win1.document.writeln(' <IMG SRC="' + printMapURL + '" WIDTH=' + printWidth + ' HEIGHT=' + printHeight + ' HSPACE=0 VSPACE=0 BORDER=0 ALT="Main map">'); //BB: set size
Win1.document.writeln(' </TD>');
if (hasOVMap) {
Win1.document.writeln(' <TD height="' + parseInt(printHeight/4) + '" valign="top">'); //BB: set size
Win1.document.writeln(' <IMG SRC="' + printOVURL + '" WIDTH=' + parseInt(printWidth/4) + ' HEIGHT=' + parseInt(printHeight/4) + ' HSPACE=0 VSPACE=0 BORDER=0 ALT="Overview">'); // BB: set size
Win1.document.writeln(' </TD>');
}
Win1.document.writeln(' </TR>');
Win1.document.writeln(' <TR>');
Win1.document.writeln(' <TD ALIGN="CENTER" VALIGN="TOP">');
Win1.document.write(' <span style="font-size:' + parseInt(printWidth/40) + 'px">');
Win1.document.writeln(legTitle + '</span><br><br> '); // BB: add Legend title, set size
Win1.document.write(' <IMG SRC="' + printLegURL + '" HSPACE=0 VSPACE=0 BORDER=0 ALT="Legend"');
Win1.document.writeln(' width="' + parseInt(printWidth/4) + '" >'); // BB: set size
Win1.document.writeln(' </TD>');
Win1.document.writeln(' </TR>');

Win1.document.writeln('</TABLE>');
Win1.document.writeln('</B></FONT>');
Win1.document.writeln('</body></html>');
Win1.document.close();

legendVisible=legVis2;
Win1=null;
hideRetrieveMap();
printWidth = 0;
printScale = 0;

}


4. A few changes need to made to aimsXML.js in order to handle the new printWidth & printHeight, identify 'function writeXML() {' and replace the code below:

Code:
function writeXML() {
var theString = '<ARCXML version="1.1">\n<REQUEST>\n<GET_IMAGE>\n<PROPERTIES>\n<ENVELOPE minx="' + forceComma(eLeft) + '" miny="' + forceComma(eBottom) + '" maxx="' + forceComma(eRight) + '" maxy="' + forceComma(eTop) + '" />\n';
theString += '<IMAGESIZE height="' + iHeight + '" width="' + iWidth + '" />\n';


with the following code:

Code:

function writeXML() {
var theString = '<ARCXML version="1.1">\n<REQUEST>\n<GET_IMAGE>\n<PROPERTIES>\n<ENVELOPE minx="' + forceComma(eLeft) + '" miny="' + forceComma(eBottom) + '" maxx="' + forceComma(eRight) + '" maxy="' + forceComma(eTop) + '" />\n';
//verify if we are doing custom print
if ( printWidth != 0 && printHeight != 0){
printDPI = 96*(printHeight/iHeight)
theString += '<IMAGESIZE height="' + printHeight + '" width="' + printWidth + '" dpi="' + printDPI + '" />';
}
else
{
theString += '<IMAGESIZE height="' + iHeight + '" width="' + iWidth + '" />';
}


5. Replace the addLegendToMap function in aimsLegend.js with the following code:

Code:

// add Legend to XML request
function addLegendToMap() {
var legString = '<LEGEND title="' + legTitle + '" font="' + legFont + '" width="' + legWidth + '" height="' + legHeight + '" ';
legString += 'layerfontsize="'+legLayerfontsize+'" swatchheight="'+legSwatchheight+'" swatchwidth="'+legSwatchwidth+'" ';

legString += 'autoextend="true" backgroundcolor="255,255,255"';
if (hideLayersFromList) {
legString += '>\n<LAYERS>\n';
for (var legvar=0;legvar<noListLayer.length;legvar++) {
if (noListLayer[legvar]) legString += '<LAYER id="' + LayerID[legvar] + '" />\n';
}
legString += '</LAYERS>\n';
legString += '</LEGEND>\n';
} else {
legString += ' />\n';
}
if (drawLegendOnly) legString = legString + '<DRAW map="false" />\n';
return legString;
}

6. Add additional parameters for the legend in ArcIMSParams.js.

Identify the following code:

Code:

// legend map size
var legWidth=170;
var legHeight=300;
var legFont="Arial";
var legTitle="Legend";


and replace the code with the code below:

Code:

// legend map size
var legWidth=170;
var legHeight=300;
var legFont="Arial";
var legTitle="Legend";
var legLayerfontsize=10;
var legSwatchheight=14;
var legSwatchwidth=18;