DHTML rubber-band box
Ethan Alpert
ealpert at DIGITALGLOBE.COM
Wed Nov 16 15:25:12 EST 2005
Since I can't see your mapfile I'm not sure what could be the problem.
If you are not using long/lat coordinates then you'll need to dig into
the dhtml code as I'm pretty sure it's just set up by default for
long/lat.
Keep using the mode=map until you get a map cause that is the first
step. If you get a blank page your map file is not correct. You
absolutly must get that right before trying to integrate it with the
dhtml box.
I'll look at the dhtml code and see if I can give some pointers but I
suggest getting the map to display first.
-e
-----Original Message-----
From: UMN MapServer Users List
[mailto:MAPSERVER-USERS at LISTS.UMN.EDU] On Behalf Of Jennifer A Bennett
Sent: Wednesday, November 16, 2005 12:48 PM
To: MAPSERVER-USERS at LISTS.UMN.EDU
Subject: Re: [UMN_MAPSERVER-USERS] DHTML rubber-band box
Ethan, thank you for your response. Unfortunately I am still
having trouble.
Here is the URL that displays my webpage with a red box in place
of the map
http://sr08dmnspl/cgi-bin/mapserv.exe?layer=major_basins&zoomsize=2&map=
d%3A%2FwebData%2Fwatershed%2Fmajor_basins.map&program=%2Fcgi-bin%2Fmapse
rv.exe&root=http%3A%2F%2Fsr08dmnspl%2Fwatershed&map_web_imagepath=.%2Ftm
p%2F&map_web_imageurl=http%3A%2F%2Fsr08dmnspl%2Fwatershed%2Ftmp%2F
When I add 'mode=map' it displays my map, but it is on a blank
webpage.
I have changed the extents of the map in my code and it still
does not show my map.
Do you have any other suggestions?
Ethan Alpert <ealpert at DIGITALGLOBE.COM>
Sent by: UMN MapServer Users List <MAPSERVER-USERS at LISTS.UMN.EDU>
11/10/2005 05:34 PM
Please respond to
Ethan Alpert <ealpert at DIGITALGLOBE.COM>
To
MAPSERVER-USERS at LISTS.UMN.EDU
cc
Subject
Re: [UMN_MAPSERVER-USERS] DHTML rubber-band box
Check your webserver logs and look at the URL it's
submitting...Copy that and in a browse use it changing mode=browse to
mode=map...If nothing displays then you most likely have your projection
or extents wrong. This is how I initially figured out how to debug what
was going on in the dhtml example.
-e
-----Original Message-----
From: UMN MapServer Users List
[mailto:MAPSERVER-USERS at LISTS.UMN.EDU] On Behalf Of Jennifer A Bennett
Sent: Thursday, November 10, 2005 2:57 PM
To: MAPSERVER-USERS at LISTS.UMN.EDU
Subject: [UMN_MAPSERVER-USERS] DHTML rubber-band box
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.
<!-- EDIT THE FORM ACTION -->
<form name="watershed_main" method="GET"
action="/cgi-bin/mapserv.exe">
<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>
<!-- EDIT THESE HIDDEN VARIABLES -->
<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
<!-- watershed_main.html
This is the start of the interactive major watershed map. -->
<html>
<head>
<title>Interactive Major (HUC Level 4) Web Page</title>
<!-- the DHTML JavaScript library includes -->
<script type="text/javascript"
src="../watershed/javascript/cbe/cbe_core.js"></script>
<script type="text/javascript"
src="../watershed/javascript/cbe/cbe_event.js"></script>
<!-- MapServer specific JavaScript library includes -->
<script language="javascript"
src="../watershed/javascript/mapserv.js"></script>
<script language="JavaScript"
src="../watershed/javascript/dbox.js"></script>
<!-- utility library -->
<script language="JavaScript"
src="../watershed/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, 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='watershed_main.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>
<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="javascript:ms.pan('nw')"><img src="../watershed/images/nw.gif"
width="18" height="18" border="0" alt="pan northwest"></a></td>
<td align="center"><a href="javascript:ms.pan('n')"><img
src="../watershed/images/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="../watershed/images/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="../watershed/images/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="../watershed/images/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="../watershed/images/transparent_pixel.gif" height="600"
width="600"></DIV>
</td>
<td align="left" width="18"><a
href="javascript:ms.pan('e')"><img src="../watershed/images/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="../watershed/images/sw.gif"
width="18" height="18" border="0" alt="pan southwest"></a></td>
<td align="center"><a href="javascript:ms.pan('s')"><img
src="../watershed/images/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="../watershed/images/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="../watershed/images/white_pixel.gif">
<img name="scalebar_miles" title="scalebar (mi)"
alt="scalebar (mi)" src="../watershed/images/white_pixel.gif">
</td></tr>
</table>
<td valign=top>
<p align="left">
<font size=+2 face=arial,helvetica><b>MAP CONTROLS</b></font>
<hr>
<br>
<!-- 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> Browse map<br>
<input onClick="ms.mode='query'" type="radio"
name="mode"> Query feature<br>
<input onClick="ms.mode='nquery'" type="radio"
name="mode"> Query multiple features
<!--<font size=+1 face=arial,helvetica>Layers</font>-->
<br>
<p><b>Select Layers to Display: </b><br>
<select multiple name="layers" size=3
onChange="ms.togglelayers(this)">
<option value="county"> Counties
<option value="MajRds"> Major Roads
</select>
<br>
<p><b>Zoom Controls: </b><br>
<input onClick="ms.zoomdir=1" type=radio name=zoomdir
checked>Zoom In<br>
<input onClick="ms.zoomdir=0" type=radio
name=zoomdir>Pan<br>
<input onClick="ms.zoomdir=-1" type=radio
name=zoomdir>Zoom Out
<p>
Zoom Size <input type=text name=zoomsize size=4 value=2
onChange="ms.zoomsize=this.value">
</td>
</tr></table>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/mapserver-users/attachments/20051116/4d78e028/attachment.html
More information about the mapserver-users
mailing list