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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> >Sent by: UMN MapServer Users List <MAPSERVER-USERS@LISTS.UMN.EDU> >11/10/2005 05:34 PM >Please respond to >Ethan Alpert <[EMAIL PROTECTED]> > > >To >MAPSERVER-USERS@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:[EMAIL PROTECTED] On >Behalf Of Jennifer A Bennett >Sent: Thursday, November 10, 2005 2:57 PM >To: MAPSERVER-USERS@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> > >
