[UMN_MAPSERVER-USERS] DHTML rubber-band box

Jennifer A Bennett Thu, 10 Nov 2005 14:09:03 -0800

I am trying to copy the code for the DHTML rubber-band box from the Itasca Demo and cannot get it to show my map.
I am wondering what other code I must copy or change to make this work?
I am able to get the gist of the _javascript_ code, but I am not familiar enough to write new code.

So far I have copied the _javascript_ folder and most of the graphics from the Graphics folder into my drive.
I have copied and inserted the portion of code below from the (Itasca) index.html into my index.html file.


<form name="watershed_main" method="GET" action="">

<input type="hidden" name="layer" value="major_basins">
<input type="hidden" name="layer" value="county">
<input type="hidden" name="layer" value="MajRds">
<input type="hidden" name="zoomsize" value=2>


<input type="hidden" name="map" value="d:/webData/watershed/major_basins.map">
<input type="hidden" name="program" value="/cgi-bin/mapserv.exe">
<input type="hidden" name="root" value="http://sr08dmnspl/watershed">
<input type="hidden" name="map_web_imagepath" value="./tmp/">
<input type="hidden" name="map_web_imageurl" value="http://sr08dmnspl/watershed/tmp/">
<input type="submit" value="Start Application"></center>

I have also copied the code below from the itasca_adds_dhtml.html file and placed it into my file called watershed_main.html

Here is my watershed_main.html code



<html>
<head>
<title>Interactive Major (HUC Level 4) Web Page</title>


<script type="text/_javascript_" src="">
<script type="text/_javascript_" src="">


<script language="_javascript_" src="">
<script language="_javascript_" src="">


<script language="_javascript_" src="">


<script language="_javascript_">
// first, nab any arguments passed to this page (so we don't have to edit the page)
var args = getargs();

// the DHTML main mapping window (note the significance of the name "main" here and with the Mapserv object)
var main = new dBox("main",600, 600, "#FF0000", 2);
// main.verbose = true;

// the DHTML reference map window
var reference = new dBox("reference", 120, 120, "#989898", 1);
reference.box = false;
reference.cursorsize = 0;

// mapserv.js global variables
var MapServer = args.program;
var QueryServer = MapServer;
var Interface = "dhtml";

// create the Mapserv object
var ms = new Mapserv("main", args.map, 149599, 4782069, 767075, 5483304, 600, 600);
ms.minscale = 1000;
ms.maxscale = 1550000;

// layer definitions
ms.layers[ms.layes.length] = new layer ('major_basins','Major Basins','layers',true, null, null)
ms.layers[ms.layers.length] = new Layer('county', 'Counties', 'layers', false, null, null);
ms.layers[ms.layers.length] = new Layer('MajRds', 'Major Roads', 'layers', false, null, null);
ms.buildlayers();

// add the reference map
ms.referencemap = new Mapserv("reference", args.map, 393234.393701263, 5205405.16440722, 495769.579718949, 5307959.02579127, 120, 120);

//
// Extensions to Mapserv.draw(): this allows you to exend the capabilties of
// of the default draw method. There are post and pre draw functions available.
//
function predraw() {
// clear any query results
top.query_frame.location.href='';

// update the scalebars
document.scalebar_miles.src = "" + "?map=" + ms.mapfile + "&mode=scalebar&mapext=0+0+" + (ms.extent[2] - ms.extent[0]) + "+" + (ms.extent[3] - ms.extent[1]) + "&mapsize=" + ms.width + "+" + ms.height;
document.scalebar_kilometers.src = "" + "?map=" + ms.mapfile + "&map_scalebar_units=kilometers&mode=scalebar&mapext=0+0+" + (ms.extent[2] - ms.extent[0]) + "+" + (ms.extent[3] - ms.extent[1]) + "&mapsize=" + ms.width + "+" + ms.height;

// update the legend
document.legend.src = "" + "?map=" + ms.mapfile + "&mode=legend&layers=" + ms.layerlist;
reference.sync();
}

//
// Functions that are called by the jBox applet or the dBox _javascript_ code:
// basically these provide the gateway from the applet/layers to the rest of
// the application. Note that they are the same regardless of implementation.
//
// Bottom line: you may want to swipe some of this code.
//
// jBox/dBox errors are passed to the browser via this function
function seterror_handler(name, message) { alert("Component " + name + " error: " + message); }

// allows jBox/dBox to reset without redrawing
function reset_handler(name, minx, miny, maxx, maxy) { }

// called from jBox/dBox when the user initiates change
function setbox_handler(name, minx, miny, maxx, maxy) {
if(name == 'reference') {
ms.applyreference(minx, miny);
ms.draw();
} else {
if(ms.mode == 'map') {
if(minx != maxx && miny != maxy)
ms.applybox(minx, miny, maxx, maxy);
else
ms.applyzoom(minx, miny);
ms.draw();
} else if(ms.mode != 'map') {
ms.applyquerybox(minx, miny, maxx, maxy); // these just set members
ms.applyquerypoint(minx, miny);
ms.query(); // builds query URL
top.query_frame.location.href = "">
}
}
}

// various event handlers called by jBox/dBox
function mousemove_handler(name, x, y) {
window.status = "UTM Coordinates: x=" + Math.round(Number(ms.extent[0] + x*ms.cellsize)) + " and y=" + Math.round(Number(ms.extent[3] - y*ms.cellsize));
}
function mouseexit_handler(name) { window.status = ""; }
function mouseenter_handler(name) { window.status = ""; }

// page initialization function
function windowOnload() {
main.initialize();
reference.initialize();

ms.zoomdir=1;
ms.draw();
}
</script>

<p align="center">Interactive Major (HUC Level 4) Web Page</p>
</b></font>
<hr>
<table border=0 cellpadding=5>
<tr>
<td align=center valign="top">
<table width="390" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#666666">
<tr>
<td align="right" width="18"><a href="" src="" width="18" height="18" border="0" alt="pan northwest"></a></td>
<td align="center"><a href="" src="" width="23" height="18" border="0" alt="pan north"></a></td>
<td align="left" width="18"><a href="" src="" width="18" height="18" border="0" alt="pan northeast"></a></td>
</tr>
<tr>
<td align="right" width="18"><a href="" src="" width="18" height="23" border="0" alt="pan west"></a></td>
<td align="center" bgcolor="#cccccc">

<DIV id="main_anchor" style="position:relative; visibility:visible; width:100%; height:100%; left:0px; top:0px;"><IMG src="" height="600" width="600"></DIV>

<DIV id="main" style="position:absolute; visibility:visible; width:100%; height:100%; clip:rect(100%,100%,100%,100%); background:transparent;"><IMG name="main" src="" height="600" width="600"></DIV>
</td>
<td align="left" width="18"><a href="" src="" width="18" height="23" border="0" alt="pan east"></a></td>
</tr>
<tr>
<td align="right" width="18"><a href="" src="" width="18" height="18" border="0" alt="pan southwest"></a></td>
<td align="center"><a href="" src="" width="23" height="18" border="0" alt="pan south"></a></td>
<td align="left" width="18"><a href="" src="" width="18" height="18" border="0" alt="pan southeast"></a></td>
</tr>
<tr><td bgcolor="#666666" colspan="3">
<img name="scalebar_kilometers" align="right" title="scalebar (km)" alt="scalebar (km)" src="">
<img name="scalebar_miles" title="scalebar (mi)" alt="scalebar (mi)" src="">
</td></tr>

</table>
<td valign=top>
<p align="left">
<font size=+2 face=arial,helvetica><b>MAP CONTROLS</b></font>
<hr>
<br>

<form name="mapserv" action="">
<p><b>Choose an Action: </b><br>
<input type="radio" name="mode" checked> Browse map<br>
<input type="radio" name="mode"> Query feature<br>
<input type="radio" name="mode"> Query multiple features


<br>
<p><b>Select Layers to Display: </b><br>
<select multiple name="layers" size=3 >
<option value="county"> Counties
<option value="MajRds"> Major Roads
</select>
<br>

<p><b>Zoom Controls: </b><br>
<input type=radio name=zoomdir checked>Zoom In<br>
<input type=radio name=zoomdir>Pan<br>
<input type=radio name=zoomdir>Zoom Out
<p>
Zoom Size <input type=text name=zoomsize size=4 value=2 >
</td>
</tr></table>

[UMN_MAPSERVER-USERS] DHTML rubber-band box

Reply via email to