<html>
<head>
<title>Anoka County Highway Department</title>
<!-- the DHTML JavaScript library includes -->
<script type="text/javascript" src="javascript/cbe/cbe_core.js"></script>
<script type="text/javascript" src="javascript/cbe/cbe_event.js"></script>
<!-- MapServer specific JavaScript library includes -->
<script language="javascript" src="javascript/mapserv.js"></script>
<script language="JavaScript" src="javascript/dbox.js"></script>
<!-- utility library -->
<script language="JavaScript" src="javascript/utils.js"></script>
<!-- scripting specific to the application -->
<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, 388107.634400379, 5203120.88405952, 500896.339019834, 5310243.30613897, 600, 600);
ms.minscale = 1000;
ms.maxscale = 1550000;
// layer definitions
ms.layers[ms.layers.length] = new Layer('Cities', 'Cities', 'layers', true, null, null);
ms.layers[ms.layers.length] = new Layer('Segments', 'Segments', 'layers', true, null, null);
ms.layers[ms.layers.length] = new Layer('Roads', 'Roads', 'layers', true, null, null);
ms.layers[ms.layers.length] = new Layer('TLG_Centerlines', 'TLG_Centerlines', 'layers', true, null, null);
ms.layers[ms.layers.length] = new Layer('Counties', 'Counties', 'layers', true, 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='blank.html';
// update the scalebars
document.scalebar_miles.src = MapServer + "?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 = MapServer + "?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 = MapServer + "?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 = ms.url;
}
}
}
// 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>
</head>
<body bgcolor=#FFFFFF onResize="main.sync();reference.sync()">
<center><h1>Anoka County Highway Department</h1></center>
<hr>
<center>
<table border=0 cellspacing=0 cellpadding=4>
<tr>
<td valign="top" align=center>
<table width="390" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#666666">
<tr>
<td align="right" width="18"><a href="javascript:ms.pan('nw')"><img src="graphics/nw.gif" width="18" height="18" border="0" alt="pan northwest"></a></td>
<td align="center"><a href="javascript:ms.pan('n')"><img src="graphics/n.gif" width="23" height="18" border="0" alt="pan north"></a></td>
<td align="left" width="18"><a href="javascript:ms.pan('ne')"><img src="graphics/ne.gif" width="18" height="18" border="0" alt="pan northeast"></a></td>
</tr>
<tr>
<td align="right" width="18"><a href="javascript:ms.pan('w')"><img src="graphics/w.gif" width="18" height="23" border="0" alt="pan west"></a></td>
<td align="center" bgcolor="#cccccc">
<!-- this is the holding spot (the anchor) for the map -->
<DIV id="main_anchor" style="position:relative; visibility:visible; width:100%; height:100%; left:0px; top:0px;"><IMG src="graphics/red_pixel.gif" height="600" width="600"></DIV>
<!-- absolutely positioned layer to hold the map -->
<DIV id="main" style="position:absolute; visibility:visible; width:100%; height:100%; clip:rect(100%,100%,100%,100%); background:transparent;"><IMG name="main" src="graphics/transparent_pixel.gif" height="600" width="600"></DIV>
</td>
<td align="left" width="18"><a href="javascript:ms.pan('e')"><img src="graphics/e.gif" width="18" height="23" border="0" alt="pan east"></a></td>
</tr>
<tr>
<td align="right" width="18"><a href="javascript:ms.pan('sw')"><img src="graphics/sw.gif" width="18" height="18" border="0" alt="pan southwest"></a></td>
<td align="center"><a href="javascript:ms.pan('s')"><img src="graphics/s.gif" width="23" height="18" border="0" alt="pan south"></a></td>
<td align="left" width="18"><a href="javascript:ms.pan('se')"><img src="graphics/se.gif" 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="graphics/red_pixel.gif">
<img name="scalebar_miles" title="scalebar (mi)" alt="scalebar (mi)" src="graphics/red_pixel.gif">
</td></tr>
</table>
</td>
<td valign="top" bgcolor=#ffffff>
<table cellpadding="5" cellspacing="0" border="0" bgcolor="#ffffff">
<tr><td>
<!-- Note that we don't have a submit action for this form, we only need the form for some controls -->
<form name="mapserv" action="javascript:void(0)">
<p><b>Choose an Action: </b><br>
<input onClick="ms.mode='map'" type="radio" name="mode" checked> <b>Browse map</b> - Zoom/Pan around map<br>
<input onClick="ms.mode='nquery'" type="radio" name="mode"> <b>Anoka County Road Data Query</b> - Draw box around ACHD Roads for Information<br>
<hr>
Zoom In <input onClick="ms.zoomdir=1" type=radio name=zoomdir checked>
Pan <input onClick="ms.zoomdir=0" type=radio name=zoomdir>
Zoom Out <input onClick="ms.zoomdir=-1" type=radio name=zoomdir>
<p>
Zoom Size <input type=text name=zoomsize size=4 value=2 onChange="ms.zoomsize=this.value">
<hr>
<p><b>Choose Layers: </b><br>
<input type=checkbox name="layer" value="Segments" onChange="ms.togglelayers(this)" checked>Anoka County Roads<br>
<input type=checkbox name="layer" value="Roads" onChange="ms.togglelayers(this)" checked>MnDOT Roads<br>
<input type=checkbox name="layer" value="TLG_Centerlines" onChange="ms.togglelayers(this)" checked>All Roads<br>
<input type=checkbox name="layer" value="Cities" onChange="ms.togglelayers(this)" checked>Cities<br>
<input type=checkbox name="layer" value="Counties" onChange="ms.togglelayers(this)" checked>Counties<br>
<hr>
</form>
<p><b>Legend:</b><br>
<!-- How you'd do a legend varies by browser. With some browsers that support dynamic image size you could
handle like the scalebars. Otherwise you need to combine the select list above with pre-computed
images or use a popup window. -->
<img name="legend" src="graphics/red_pixel.gif">
<p>
<!-- this is the holding spot (the anchor) for the reference map -->
<DIV id="reference_anchor" style="position:relative; visibility:visible; width:100%; height:100%; left:0px; top:0px;"><img src="graphics/red_pixel.gif" height="120" width="120"></DIV>
<!-- absolutely positioned layer to hold the reference map -->
<DIV id="reference" style="position:absolute; visibility:visible; width:100%; height:100%; clip:rect(100%,100%,100%,100%); background:transparent;"><IMG name="reference" src="graphics/reference.gif" height="180" width="180"></DIV>
</td></tr></table>
</td></tr>
</table>
</center>
<p><hr><p>
<center><a href="javascript:top.location.href='index.html'"><b>Reload</b></a><p></center>
</body></html>