DHTML rubber-band box
Stephen Davies
sdc at SDC.COM.AU
Thu Nov 17 01:33:13 EST 2005
G'day Jennifer.
I have just gone through the process of hacking the dhtml demo to suit my
own application.
The javascript is coded for everything in metres (not lat/long) and all
sorts of things break if your data is not in metres and you use projections.
It is also hard-coded for northern hemisphere which caused me some grief but
shouldn't bother you.
It is also hard-coded for 72 dpi screens and I am using a 96 dpi LCD - but
this is trivial.
My raw data is in lat/long projected to metres by mapserver so I had to give
map extents in degrees, specify meters as units and specify the reference
map extent in metres.
HTH,
Stephen
On Wed, 16 Nov 2005 13:48:21 -0600, Jennifer A Bennett <jabennett at USGS.GOV>
wrote:
>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%2Fmapserv.exe&root=http%3A%2F%2Fsr08dmnspl%2Fwatershed&map_web_imagepath=.%2Ftmp%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>
>
>
More information about the mapserver-users
mailing list