<table cellspacing="0" cellpadding="0" border="0" ><tr><td valign="top" style="font: inherit;"><DIV>Hi guys,</DIV>
<DIV>I am trying to run this dbox demo on my localhost. i don't have website yet but i want to run it on my home pc. How do i do that? I am using MS4W latest version. </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>This is the mapfile:</DIV>
<DIV> </DIV>
<DIV>#<BR>#Start of map file, created by AmeiN! for ArcGis 02/06/2006, 2:06:22 PM<BR>#<BR>#<BR>MAP<BR>NAME 'Permits'<BR>STATUS ON</DIV>
<DIV>#PROJECTION<BR># 'init=epsg:HTML'<BR>#END<BR> <BR>SIZE 650 500<BR>EXTENT 179285.663523 4471528.000000 758248.492727 4822132.500000<BR>UNITS meters<BR>SHAPEPATH ''<BR>SYMBOLSET'E:\MS4W\Apache\htdocs\symbols.sym'<BR>FONTSET 'E:\MS4W\Apache\htdocs\fontset.txt'<BR>CONFIG PROJ_LIB "E:\ms4w\proj\nad\"</DIV>
<DIV>IMAGECOLOR 255 255 255<BR>IMAGETYPE jpeg<BR> <BR>#<BR>#Start of web interface definition<BR>#<BR> <BR>WEB</DIV>
<DIV>TEMPLATE 'E:\MS4W\Apache\htdocs\SampleBox\Sample.html'<BR>IMAGEPATH 'E:\ms4w\tmp\ms_tmp\'<BR>IMAGEURL '/ms_tmp/' #Replace 'JasperMaps' with your website name.</DIV>
<DIV>END #HEADER<BR> <BR>#<BR># Start of querymap<BR>#</DIV>
<DIV>QUERYMAP<BR> SIZE 660 580<BR> STATUS ON<BR> STYLE selected<BR> COLOR 255 0 0<BR> STYLE hilite<BR>End<BR> </DIV>
<DIV>#<BR>#Start of legend<BR>#<BR> <BR>LEGEND<BR>STATUS on<BR>POSITION lr<BR>KEYSIZE 18 12<BR>#TEMPLATE 'legend.html'<BR>LABEL<BR> COLOR 0 0 0<BR> TYPE TRUETYPE<BR> FONT Arial <BR> SIZE 9<BR> END # END LABEL<BR>END #LEGEND</DIV>
<DIV>#<BR># Start of scalebar<BR>#<BR> <BR>SCALEBAR<BR>STATUS embed<BR>POSITION ll<BR> STYLE 0<BR> INTERVALS 2<BR> IMAGECOLOR 255 255 255<BR> LABEL<BR> COLOR 0 0 0<BR> SIZE SMALL<BR> END #LABEL<BR>SIZE 200 3<BR>OUTLINECOLOR 0 0 0<BR>COLOR 0 0 0<BR>BACKGROUNDCOLOR 255 255 255<BR>UNITS FEET<BR>END #SCALEBAR</DIV>
<DIV><BR>#<BR># Start of layer definitions #<BR>#</DIV>
<DIV> LAYER<BR> NAME 'County'<BR> TYPE POLYGON<BR> DATA 'E:\IowaLayers\wcounty.shp'<BR> METADATA<BR> 'wms_title' 'wcounty'<BR> END<BR> STATUS ON<BR> TRANSPARENCY 100<BR> PROJECTION<BR> 'proj=longlat'<BR> 'ellps=WGS84'<BR> 'datum=WGS84'<BR> 'no_defs'<BR> END<BR> MINSCALE 600<BR> #MAXSCALE 250000<BR> LABELITEM 'CO_NAME'<BR> CLASS<BR> NAME 'wcounty'<BR> STYLE<BR> SYMBOL 0 <BR> SIZE 6 <BR> OUTLINECOLOR 0 0
0<BR> COLOR 0 255 127<BR> END<BR> LABEL <BR> SIZE medium<BR> COLOR 0 0 0 <BR> ANGLE 0<BR> BUFFER 1<BR> END <BR> END<BR> END</DIV>
<DIV> LAYER<BR> NAME 'Highways'<BR> TYPE LINE<BR> DATA 'E:\IowaLayers\highway.shp'<BR> METADATA<BR> 'wms_title' 'highway'<BR> END<BR> STATUS ON<BR> TRANSPARENCY 100<BR> PROJECTION<BR> 'proj=longlat'<BR> 'ellps=WGS84'<BR> 'datum=WGS84'<BR> 'no_defs'<BR> END<BR> CLASS<BR> NAME 'highway'<BR> STYLE<BR> SYMBOL 0 <BR> SIZE 6 <BR> OUTLINECOLOR 241 45 105<BR> COLOR 0 0 0<BR>
END<BR> END<BR> END</DIV>
<DIV> LAYER<BR> NAME 'Towns'<BR> TYPE POLYGON<BR> DATA 'E:\IowaLayers\incorp.shp'<BR> METADATA<BR> 'wms_title' 'incorp'<BR> END<BR> STATUS ON<BR> TRANSPARENCY 100<BR> PROJECTION<BR> 'proj=utm'<BR> 'zone=15'<BR> 'ellps=clrk66'<BR> 'datum=NAD27'<BR> 'units=m'<BR> 'no_defs'<BR> END<BR> CLASS<BR> NAME 'incorp'<BR> STYLE<BR> SYMBOL 0 <BR> SIZE 6 <BR> OUTLINECOLOR 0 0 0<BR> COLOR 168
100 185<BR> END<BR> END<BR> END</DIV>
<DIV> <BR>END #End of Mapfile</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>Here is the template: </DIV>
<DIV><html><BR> <head><title>My First Template (dBox)</title></head></DIV>
<DIV><!-- Walter Zorn Javascript Graphics Library --><BR><script language="JavaScript" src="../dbox/src/javascript/third_party/walter_zorn/wz_jsgraphics.js"></script></DIV>
<DIV><!-- Condensed cross-browser.com x.js library --><BR><script language="JavaScript" src="../dbox/src/javascript/third_party/x/x_dhtml.js"></script></DIV>
<DIV><!-- SDL Libraries --><BR><script language="JavaScript" src="../dbox/src/javascript/utilities/utils.js"></script><BR><script language="JavaScript" src="../dbox/src/javascript/mapserver/dbox.js"></script><BR><script language="JavaScript" src="../dbox/src/javascript/mapserver/dcontainer.js"></script><BR><script language="JavaScript" src="../dbox/src/javascript/mapserver/mapserv.js"></script></DIV>
<DIV><script language="javascript"></DIV>
<DIV> function Extent(minx, miny, maxx, maxy) {<BR> this.minx = minx;<BR> this.miny = miny;<BR> this.maxx = maxx;<BR> this.maxy = maxy;<BR> }</DIV>
<DIV> config = new Object();<BR> //config.ms_executable = "<A href="http://localhost/cgi-bin/mapserv">http://localhost/cgi-bin/mapserv</A>";<BR> config.ms_executable = "<A href="http://localhost/cgi-bin/mapserv.exe">http://localhost/cgi-bin/mapserv.exe</A>";<BR> //config.mapfile = "/home/lime/public_html/2006/test.map";<BR> config.mapfile = "E:\\MS4W\\mapdocs\\IowaSample.map"; <BR> config.minscale = 5000;<BR> config.maxscale = 10000000;<BR> //config.app_extent = new Extent(125105.727952, 4785412.819496, 788393.592828, 5488749.153129);<BR> config.app_extent = new Extent(200000.00, 4440000.00, 750000.00, 4830000.00);<BR> config.ref_extent = new Extent(180527.00, 4472149.00, 757628.00, 4821512.00);<BR> config.refsizex = 243;<BR> config.refsizey = 147;<BR> config.reference_image = "Iowa.jpg";<BR> config.mapsizex = 650;<BR> config.mapsizey = 500;</DIV>
<DIV> // the DHTML main mapping window (note the significance of the name "main" here and the anchor image/div in the main body of the page)<BR> var main = new dBox("main");<BR> main.color = "red";<BR> main.thickness = 2;<BR> main.verbose = true; <BR> main.useBusyMessage();</DIV>
<DIV> // the DHTML reference map<BR> var reference = new dBox("reference");<BR> reference.box = false;</DIV>
<DIV> var ms = new Mapserv(config.ms_executable, config.mapfile, config.app_extent.minx, config.app_extent.miny, config.app_extent.maxx, config.app_extent.maxy, config.mapsizex, config.mapsizey);<BR> ms.queryfile = config.mapfile;<BR> ms.minscale = config.minscale;<BR> ms.maxscale = config.maxscale;<BR> ms.setUnits(MAPSERV_UNITS_FEET);</DIV>
<DIV> // add the reference map<BR> ms.referencemap = new Mapserv("reference", config.mapfile, config.ref_extent.minx, config.ref_extent.miny, config.ref_extent.maxx, config.ref_extent.maxy, config.refsizex, config.refsizey);</DIV>
<DIV>//<BR> // drawing callback, calling ms.draw will invoke this function after building appropriate URLs<BR> // <BR> ms.setHandler(MAPSERV_DRAW, ms_draw);<BR> function ms_draw() {<BR> // update the maps (reference first)<BR> reference.setImage(ms.referencemap.url);<BR> main.setImage(ms.url);</DIV>
<DIV> // update the scalebar <BR>// document.scalebar_miles.src = ms.mapserver + "?map=" + config.mapfile + "&mode=scalebar&mapext=0+0+" + (ms.extent[2] - ms.extent[0]) + "+" + (ms.extent[3] - ms.extent[1]) + "&mapsize=" + ms.width + "+" + ms.height;</DIV>
<DIV> // debug<BR> var e = document.getElementById("debug");<BR> if(e) e.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;<a target=new href='" + ms.url + "'>open current image in a new window</a>";</DIV>
<DIV> }</DIV>
<DIV> //<BR> // querying callback<BR> //<BR> ms.setHandler(MAPSERV_QUERY, ms_query);<BR> function ms_query() {<BR> querywin = window.open(ms.url, 'querywin');<BR> querywin.focus();<BR> }</DIV>
<DIV> // called from jBox/dBox when the user initiates change<BR> reference.setHandler(DBOX_SETBOX, reference_setbox);<BR> function reference_setbox(minx, miny, maxx, maxy) { <BR> ms.applyReference(minx, miny); // no box dragging in the reference map<BR> ms.draw();<BR> }</DIV>
<DIV> main.setHandler(DBOX_SETBOX, main_setbox);<BR> function main_setbox(minx, miny, maxx, maxy) {<BR> if(ms.mode == 'map') {<BR> if(minx != maxx && miny != maxy)<BR> ms.applyBox(minx, miny, maxx, maxy);<BR> else<BR> ms.applyZoom(minx, miny); <BR> ms.draw(); // builds draw URL and calls draw callback <BR> } else if(ms.mode != 'map') {<BR> ms.applyBoxQuery(minx, miny, maxx, maxy);<BR> ms.applyPointQuery(minx, miny);<BR> ms.query(); // builds query URL and calls query callback <BR>
}<BR> }</DIV>
<DIV> // various event handlers called by jBox/dBox<BR> main.setHandler(DBOX_MOUSEMOVE, main_mousemove);<BR> function main_mousemove(x, y) {<BR> var text = '';<BR> var utmx = Number(ms.extent[0] + x*ms.cellsize);<BR> var utmy = Number(ms.extent[3] - y*ms.cellsize);</DIV>
<DIV> text = "&nbsp;UTM Coordinates: x =" + Math.round(utmx) + " and y = " + Math.round(utmy);<BR> <BR> var e = document.getElementById("coords");<BR> if(e) e.innerHTML = text;<BR> }<BR> <BR> main.setHandler(DBOX_MOUSEEXIT, clear_coords);<BR> main.setHandler(DBOX_MOUSEENTER, clear_coords);<BR> function clear_coords() { var e = document.getElementById("coords"); if(e) e.innerHTML = '&nbsp;'; }</DIV>
<DIV>main.setHandler(DBOX_MEASURE, main_measure);<BR> function main_measure(s, t, n, a) { <BR> var text = '&nbsp;Distance: ' + Math.round(t*ms.cellsize) + " m. (" + n + " points)";<BR> var e = document.getElementById("measure");<BR> if(e) e.innerHTML = text;<BR> }</DIV>
<DIV> main.setHandler(DBOX_AREA, main_area);<BR> function main_area(a, d, l, n) { <BR> var text = '&nbsp;Area: ' + Math.round(a*ms.cellsize*ms.cellsize) + " sq. m. Distance: " + Math.round(l*ms.cellsize) + " m. (" + n + " points)";<BR> var e = document.getElementById("measure");<BR> if(e) e.innerHTML = text;<BR> }</DIV>
<DIV> //<BR> // Browser specific event handlers<BR> //<BR> window.onresize = function() {<BR> main.sync();<BR> reference.sync();<BR> }</DIV>
<DIV> window.onload = function() {<BR> main.initialize();<BR> reference.initialize();<BR> <BR> ms.draw();<BR> }</DIV>
<DIV></script></DIV>
<DIV> <body><BR> <form name=mapserv><BR> Menu: <a href="javascript:ms.setExtent(config.app_extent.minx, config.app_extent.miny, config.app_extent.maxx, config.app_extent.maxy); ms.draw()">reset</a> | <a href="javascript:ms.draw()">refresh</a> | <a href="/~lime/2006/">live build home</a><BR> <p></DIV>
<DIV> <table border=2><BR> <tr><td valign=top> </DIV>
<DIV><script language="javascript"><BR> //document.write("<img id=\"main\" src=\"<A href="http://localhost/graphics/white_pixel.gif\">http://localhost/graphics/white_pixel.gif\</A>" height=\"" + config.mapsizey + "\" width=\"" + config.mapsizex + "\">");<BR> document.write("<img id=\"main\" src=\"../White_pixel.gif\" height=\"" + config.mapsizey + "\" width=\"" + config.mapsizex + "\">");<BR></script></DIV>
<DIV> <!-- scalebar --><BR> <script language="javascript"><BR> <!--<BR> // document.write("<img align=\"right\" name=\"scalebar_miles\" src=\"" + ms.mapserver + "?map=" + config.mapfile + "&mode=scalebar&mapext=0+0+" + (ms.extent[2] - ms.extent[0]) + "+" + (ms.extent[3] - ms.extent[1]) + "&mapsize=" + ms.width + "+" + ms.height + "\" border=\"0\">");<BR> // --><BR> </script><BR> <!-- end scalebars --></DIV>
<DIV> </td><td valign=top><BR> <p>Mode:<br><BR> <input name="mode" type="radio" value="nquery" onClick="ms.mode='nquery'"> query<br><BR> <input name="mode" type="radio" value="map" onClick="ms.mode='map'" checked> browse</DIV>
<DIV> <p>Zoom:<br><BR> <input name="zoomdir" type="radio" value="1" onClick="ms.zoomdir=this.value"> in<BR> <input name="zoomdir" type="radio" value="0" onClick="ms.zoomdir=this.value" checked> pan<BR> <input name="zoomdir" type="radio" value="-1" onClick="ms.zoomdir=this.value"> out</p><BR><p><BR> &nbsp;&nbsp;Measure: <a href="javascript:main.lineOn()">On</a>/<a href="javascript:main.lineOff()">Off</a><br><BR> &nbsp;&nbsp;Area: <a href="javascript:main.polyOn()">On</a>/<a href="javascript:main.polyOff()">Off</a><BR></p><BR> <p>Layers:<br><BR> <input name="layer" type="checkbox" value="Towns" onClick="ms.setLayer(this.value,
this.checked)"> Towns<br><BR> <input name="layer" type="checkbox" value="Highways" onClick="ms.setLayer(this.value, this.checked)"> Highways<br><BR> <input name="layer" type="checkbox" value="County" onClick="ms.setLayer(this.value, this.checked)" > County<br></DIV>
<DIV> <p><BR> <img name=legend src="<A href="http://localhost/graphics/white_pixel.gif">http://localhost/graphics/white_pixel.gif</A>"><BR> <p></DIV>
<DIV><script language="javascript"><BR> document.write("<img id=\"reference\" src=\"" + config.reference_image + "\" width=\"" + config.refsizex + "\" height=\"" + config.refsizey + "\" />");<BR></script><BR> </td></tr><BR> </table></DIV>
<DIV> <div id="coords">&nbsp;</div><br><BR> <div id="measure" class="small">&nbsp;</div></DIV>
<DIV> </form></DIV>
<DIV> </body><BR></html></DIV>
<DIV> </DIV></td></tr></table><br>