<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>