Well thanks David<br>Yeah, I have problem in all that fields. Actually, in order to incorporate new features , i changed the demo a lot and so I am afraid if I messed up with some essential basic and that is why these are not working. And so I sent the code.
<br>Well, I am trying again and lets see if I can move further.<br>Regards<br>Satish<br><br><br><div><span class="gmail_quote">On 7/17/07, <b class="gmail_sendername">Fawcett, David</b> &lt;<a href="mailto:David.Fawcett@state.mn.us">
David.Fawcett@state.mn.us</a>&gt; wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">



<div>
<div><span><font color="#0000ff" face="Arial" size="2">Satish, </font></span></div>
<div><span><font color="#0000ff" face="Arial" size="2"></font></span>&nbsp;</div>
<div><span><font color="#0000ff" face="Arial" size="2">You 
are really asking the list to do a lot of homework for you.&nbsp; You may want 
to look at dBox, it has many of the features that you are looking for.&nbsp; <a href="http://maps.dnr.state.mn.us/tools/dbox/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://maps.dnr.state.mn.us/tools/dbox/
</a></font></span></div>
<div><span><font color="#0000ff" face="Arial" size="2"></font></span>&nbsp;</div>
<div><span><font color="#0000ff" face="Arial" size="2">You 
could either use it out of the box, or use the code to modify your existing 
application.</font></span></div><span class="sg">
<div><span><font color="#0000ff" face="Arial" size="2"></font></span>&nbsp;</div>
<div><span><font color="#0000ff" face="Arial" size="2">David.</font></span></div></span><div><span class="e" id="q_113d4633f4e1975f_2">
<blockquote style="margin-right: 0px;">
  <div></div>
  <div dir="ltr" align="left" lang="en-us"><font face="Tahoma" size="2">-----Original Message-----<br><b>From:</b> UMN MapServer 
  Users List [mailto:<a href="mailto:MAPSERVER-USERS@LISTS.UMN.EDU" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">MAPSERVER-USERS@LISTS.UMN.EDU</a>] <b>On Behalf Of </b>SATish 
  ...<br><b>Sent:</b> Tuesday, July 17, 2007 8:19 AM<br><b>To:</b> 
  <a href="mailto:MAPSERVER-USERS@LISTS.UMN.EDU" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">MAPSERVER-USERS@LISTS.UMN.EDU</a><br><b>Subject:</b> [UMN_MAPSERVER-USERS] Cursor 
  position<br><br></font></div><br>Hey Martin..<br>It was very nice of you that 
  you replied and it was really a nice effort..<br>But, It did not work and now 
  I am afraid if some basic thing is missing in my code or what..<br><br>I just 
  kept refining the itasca demo as for my need and many things I implemented in 
  it.. <br>But somethings are still lacking which I am not able to figure 
  out..<br><br>1. When I click on Reference map, the original map loses focus 
  instead of navigating itself to that position.<br><br>2. The loading image 
  when map is refreshed. <br><br>3. The cursor position (real world) when mouse 
  is over the map.<br><br>4. I want to zoom-out more and the initial&nbsp; map 
  should be smaller than it is now.<br><br>5. I put on copyright symbol with 
  help of layer but&nbsp; &copy; symbol is not clear because of font and other than 
  that can I use graphics for this too. <br><br>6. How to resize map window for 
  different computer screens.<br><br>7. Grids are not working.<br><br>I have 
  pasted my html code below the message.<br><br>I am trying hard for getting 
  these answers and please see if you are able in solving at least some of my 
  problems <br><br><br>Thanks and 
  Regards<br>Satish<br><br>----------------------------------------------------------------------------------------------------------------------------------------------------------------<br>&lt;html&gt; 
  <br>&lt;head&gt;<br>&nbsp; &lt;title&gt;MapServer - Itasca 
  Application&lt;/title&gt;<br>&nbsp; <br>&nbsp; &lt;!--Open new window 
  java--&gt;<br>&lt;SCRIPT LANGUAGE=&quot;javascript&quot;&gt; <br>function 
  openWindow(url, w, h,s) {<br>&nbsp;&nbsp;&nbsp; var options = &quot;width=&quot; + w + 
  &quot;,height=&quot; + h + &quot;,&quot;; <br>&nbsp;&nbsp;&nbsp; options += 
  &quot;resizable=yes,scrollbars=&quot;+s+&quot;,status=no,&quot;;<br>&nbsp;&nbsp;&nbsp; options += 
  &quot;menubar=no,toolbar=no,location=no,directories=no&quot;;<br>&nbsp;&nbsp;&nbsp; var 
  newWin = window.open(url, &#39;NewWindow&#39;, options); <br>&nbsp;&nbsp;&nbsp; 
  newWin.focus();<br>}<br><br>function reloadPage()<br>&nbsp; {<br>&nbsp; 
  window.location.reload()<br>&nbsp; 
  }<br><br>&lt;/script&gt;<br><br>&lt;!--checktree--&gt;<br>&lt;link 
  rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot; checktree.css&quot; /&gt;<br>&lt;!-- the 
  DHTML JavaScript library includes --&gt;<br>&lt;script type=&quot;text/javascript&quot; 
  src=&quot;javascript/cbe/cbe_core.js&quot;&gt;&lt;/script&gt;<br>&lt;script 
  type=&quot;text/javascript&quot; src=&quot;javascript/cbe/cbe_event.js&quot;&gt;&lt;/script&gt; 
  <br>&lt;script type=&quot;text/javascript&quot; 
  src=&quot;javascript/checktree/checktree.js&quot;&gt;&lt;/script&gt;<br>&lt;script 
  type=&quot;text/javascript&quot;&gt;<br>&nbsp;var layermenu = new 
  CheckTree(&#39;layermenu&#39;); <br>&nbsp;var refimagemenu = new 
  CheckTree(&#39;refimagemenu&#39;);<br>&nbsp;var mapmodemenu = new 
  CheckTree(&#39;mapmodemenu&#39;);<br>&lt;/script&gt;<br><br>&lt;!-- MapServer specific 
  JavaScript library includes --&gt;<br>&lt;script language=&quot;javascript&quot; 
  src=&quot;javascript/mapserv.js&quot;&gt;&lt;/script&gt; <br>&lt;script 
  language=&quot;JavaScript&quot; 
  src=&quot;javascript/dbox.js&quot;&gt;&lt;/script&gt;<br><br><br>&lt;!-- utility library 
  --&gt;<br>&lt;script language=&quot;JavaScript&quot; 
  src=&quot;javascript/utils.js&quot;&gt;&lt;/script&gt; <br><br>&lt;!-- scripting 
  specific to the application --&gt;<br>&lt;script 
  language=&quot;javascript&quot;&gt;<br>&nbsp; // first, nab any arguments passed to this 
  page (so we don&#39;t have to edit the page)<br>&nbsp; var args = getargs(); 
  <br><br>&nbsp; // the DHTML main mapping window (note the significance of the 
  name &quot;main&quot; here and with the Mapserv object)<br>&nbsp; var main = new 
  dBox(&quot;main&quot;, 600, 600, &quot;#FF0000&quot;, 2);<br>&nbsp; // main.verbose = 
  true;<br><br>&nbsp; // the DHTML reference map window<br>&nbsp; var reference 
  = new dBox(&quot;reference&quot;, 120, 120, &quot;#989898&quot;, 1);<br>&nbsp; reference.box = 
  false;<br>&nbsp; reference.cursorsize = 0;<br><br>&nbsp; // mapserv.js global 
  variables<br>&nbsp; var MapServer = args.program;<br>&nbsp; var QueryServer = 
  MapServer;<br>&nbsp; var Interface = &quot;dhtml&quot;;<br>&nbsp; var 
  DrawOnLayerChange=true;<br>&nbsp; <br>&nbsp; // create the Mapserv 
  object<br>&nbsp; var ms = new Mapserv(&quot;main&quot;, args.map, 
  35000,3800000,1080000,4650000, 600, 600);<br>&nbsp; ms.minscale = 
  10;<br>&nbsp; ms.maxscale = 1550000;<br>&nbsp; ms.pansize=.200;<br><br>&nbsp; 
  // layer definitions<br>&nbsp; <br>&nbsp; ms.layers[ms.layers.length] = new 
  Layer(&#39;coast&#39;, &#39;Coast&#39;, &#39;layers&#39;, true, null, null); <br>&nbsp; 
  ms.layers[ms.layers.length] = new Layer(&#39;cities&#39;, &#39;Cities&#39;, &#39;layers&#39;, true, 
  null, null);<br>&nbsp; ms.layers[ms.layers.length] = new Layer(&#39;geology&#39;, 
  &#39;Geology&#39;, &#39;layers&#39;, false, null, null); <br>&nbsp; 
  ms.layers[ms.layers.length] = new Layer(&#39;rain50&#39;, &#39;Rain Contoors&#39;, &#39;layers&#39;, 
  false, null, null);<br>&nbsp; ms.layers[ms.layers.length] = new Layer(&#39;roads&#39;, 
  &#39;Roads&#39;, &#39;layers&#39;, true, null, null); <br>&nbsp; ms.layers[ms.layers.length] = 
  new Layer(&#39;temp25&#39;, &#39;Temp.Contoors&#39;, &#39;layers&#39;, false, null, null);<br>&nbsp; 
  ms.layers[ms.layers.length] = new Layer(&#39;copyright&#39;, &#39;Hydroxi&#39;, &#39;layers&#39;, 
  true, null, null); <br>&nbsp; ms.layers[ms.layers.length] = new Layer(&#39;grid&#39;, 
  &#39;Grid&#39;, &#39;layers&#39;, false, null, null);<br>&nbsp; ms.layers[ms.layers.length] = 
  new Layer(&#39;grid1&#39;, &#39;Grid1&#39;, &#39;layers&#39;, false, null, null); <br>&nbsp;&nbsp; 
  ms.buildlayers();<br><br>&nbsp; // add the reference map<br>&nbsp; 
  ms.referencemap = new Mapserv(&quot;reference&quot;, args.map, 393234.393701263, 
  5205405.16440722, 495769.579718949,5307959.02579127, 120, 120);<br><br>&nbsp; 
  //<br>&nbsp; // Extensions to Mapserv.draw(): this allows you to exend the 
  capabilties of<br>&nbsp; // of the default draw method. There are post and pre 
  draw functions available.<br>&nbsp; //<br>&nbsp; function predraw() 
  {<br>&nbsp;&nbsp;&nbsp; // clear any query results <br>&nbsp;&nbsp;&nbsp; 
  top.query_frame.location.href=&#39;blank.html&#39;;<br><br>&nbsp;&nbsp;&nbsp; // 
  update the scalebars<br>&nbsp;&nbsp;&nbsp; document.scalebar_miles.src = 
  MapServer + &quot;?map=&quot; + ms.mapfile + &quot;&amp;mode=scalebar&amp;mapext=0+0+&quot; + ( 
  ms.extent[2] - ms.extent[0]) + &quot;+&quot; + (ms.extent[3] - ms.extent[1]) + 
  &quot;&amp;mapsize=&quot; + ms.width + &quot;+&quot; + ms.height;<br>&nbsp;&nbsp;&nbsp; 
  document.scalebar_kilometers.src = MapServer + &quot;?map=&quot; + ms.mapfile + 
  &quot;&amp;map_scalebar_units=kilometers&amp;mode=scalebar&amp;mapext=0+0+&quot; + 
  (ms.extent[2] - ms.extent[0]) + &quot;+&quot; + (ms.extent[3] - ms.extent[1]) + 
  &quot;&amp;mapsize=&quot; + ms.width + &quot;+&quot; + ms.height;<br><br>&nbsp;&nbsp;&nbsp; // 
  update the legend<br>&nbsp;&nbsp;&nbsp; document.legend.src = MapServer + 
  &quot;?map=&quot; + ms.mapfile + &quot;&amp;mode=legend&amp;layers=&quot; + 
  ms.layerlist;<br>&nbsp;&nbsp;&nbsp; reference.sync();<br>&nbsp; 
  }<br><br>&nbsp; //<br>&nbsp; // Functions that are called by the jBox applet 
  or the dBox javascript code:<br>&nbsp; // basically these provide the gateway 
  from the applet/layers to the rest of<br>&nbsp; // the application. Note that 
  they are the same regardless of implementation. <br>&nbsp; //<br>&nbsp; // 
  Bottom line: you may want to swipe some of this code.<br>&nbsp; //<br>&nbsp; 
  // jBox/dBox errors are passed to the browser via this function<br>&nbsp; 
  function seterror_handler(name, message) { alert(&quot;Component &quot; + name + &quot; 
  error: &quot; + message); } <br><br>&nbsp; // allows jBox/dBox to reset without 
  redrawing<br>&nbsp; function reset_handler(name, minx, miny, maxx, maxy) { 
  }<br><br>&nbsp; // called from jBox/dBox when the user initiates 
  change<br>&nbsp; function setbox_handler(name, minx, miny, maxx, maxy) { 
  <br>&nbsp;&nbsp;&nbsp; if(name == &#39;reference&#39;) 
  {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ms.applyreference(minx, 
  miny);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ms.draw();<br>&nbsp;&nbsp;&nbsp; } 
  else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(ms.mode == &#39;map&#39;) 
  {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(minx != maxx &amp;&amp; 
  miny != maxy)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  ms.applybox(minx, miny, maxx, 
  maxy);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  else<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  ms.applyzoom(minx, miny);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  ms.draw();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else if(ms.mode != &#39;map&#39;) 
  {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ms.applyquerybox(minx, miny, 
  maxx, maxy); // these just set members 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ms.applyquerypoint(minx, 
  miny);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ms.query(); // builds 
  query URL<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; href = 
  openWindow(ms.url,500,400,&quot;yes&quot;);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  }<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp; }<br>&nbsp; <br>&nbsp; <br>&nbsp; 
  <br>&nbsp; <br><br>&nbsp; // various event handlers called by jBox/dBox 
  <br>&nbsp; function mousemove_handler(name, x, y) {<br>&nbsp;&nbsp;&nbsp; 
  document.getElementById(&#39;coordinates&#39;).value = &quot; x=&nbsp; &quot; + 
  Math.round(Number(ms.extent[0] + x*ms.cellsize)) + &quot;&nbsp;&nbsp; and&nbsp; y= 
  &quot; + Math.round(Number( ms.extent[3] - 
  y*ms.cellsize));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;function 
  mouseexit_handler(name) { window.status = &quot;&quot;; }<br>&nbsp;function 
  mouseenter_handler(name) { window.status = &quot;&quot;; }<br><br><br><br><br><br>&nbsp; 
  // page initialization function <br>&nbsp; function windowOnload() 
  {<br>&nbsp;&nbsp;&nbsp; main.initialize();<br>&nbsp;&nbsp;&nbsp; 
  reference.initialize();<br>&nbsp;&nbsp;&nbsp; 
  ms.setextent(34500,3800000,1080000,4650000);<br>&nbsp;&nbsp;&nbsp; 
  ms.zoomdir=1;<br>&nbsp;&nbsp;&nbsp; ms.draw();<br>&nbsp; }<br>&nbsp; 
  <br>&lt;/script&gt;<br><br><br><br>&lt;/head&gt;<br>&lt;body bgcolor=#000000 
  style=&quot;color: #ffffff;&quot; 
  onResize=&quot;main.sync();reference.sync()&quot;&gt;<br>&lt;link rel=&quot;stylesheet&quot; 
  type=&quot;text/css&quot; href=&quot;hec.css&quot;&gt;&lt;body bgcolor=#FFFFFF onResize=&quot; 
  main.sync();reference.sync()&quot;&gt;<br><br>&lt;center&gt;&lt;h1&gt;MapServer - 
  Itasca 
  Application&lt;/h1&gt;&lt;/center&gt;<br>&lt;hr&gt;<br><br><br><br>&nbsp;&lt;form 
  name=&quot;map&quot; onclick=&quot;ms.togglelayers(this)&quot; 
  style=&quot;margin-left:0;margin-bottom:0;margin-top:0;line-height:100%&quot;&gt; 
  <br><br><br><br><br><br>&lt;center&gt;<br>&lt;table border=0 cellspacing=0 
  cellpadding=4&gt;<br>&lt;tr&gt;<br>&lt;td valign=&quot;top&quot; 
  align=center&gt;<br>&lt;!--&nbsp;&nbsp;&nbsp; &lt;p 
  class=&quot;main&quot;&gt;&lt;b&gt;Legend:&lt;/b&gt;&lt;br&gt;--&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!--How you&#39;d do a legend varies by 
  browser. With some browsers that support dynamic image size you 
  could<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; handle like the scalebars. Otherwise 
  you need to combine the select list above with pre-computed 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; images or use a popup 
  window.--&gt;<br>&lt;!--&nbsp; &lt;img name=&quot;legend&quot; 
  src=&quot;graphics/red_pixel.gif&quot;&gt;<br>&lt;hr&gt;<br>[legend]<br>&lt;hr&gt;<br>&lt;br&gt;--&gt;<br><br>&nbsp; 
  &lt;table width=&quot;390&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; 
  align=&quot;center&quot; bgcolor=&quot;#666666&quot;&gt; <br>&nbsp;&nbsp;&nbsp; 
  &lt;tr&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td align=&quot;right&quot; 
  width=&quot;18&quot;&gt;&lt;a href=&quot;javascript:ms.pan(&#39;nw&#39;)&quot;&gt;&lt;img 
  src=&quot;graphics/nw.gif&quot; width=&quot;18&quot; height=&quot;18&quot; border=&quot;0&quot; alt=&quot;pan 
  northwest&quot;&gt;&lt;/a&gt;&lt;/td&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td 
  align=&quot;center&quot;&gt;&lt;a href=&quot;javascript:ms.pan(&#39;n&#39;)&quot;&gt;&lt;img 
  src=&quot;graphics/n.gif&quot; width=&quot;23&quot; height=&quot;18&quot; border=&quot;0&quot; alt=&quot;pan 
  north&quot;&gt;&lt;/a&gt;&lt;/td&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td 
  align=&quot;left&quot; width=&quot;18&quot;&gt;&lt;a href=&quot;javascript:ms.pan(&#39;ne&#39;)&quot;&gt;&lt;img 
  src=&quot;graphics/ne.gif&quot; width=&quot;18&quot; height=&quot;18&quot; border=&quot;0&quot; alt=&quot;pan 
  northeast&quot;&gt;&lt;/a&gt;&lt;/td&gt; <br>&nbsp;&nbsp;&nbsp; 
  &lt;/tr&gt;<br>&nbsp;&nbsp;&nbsp; &lt;tr&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;td align=&quot;right&quot; width=&quot;18&quot;&gt;&lt;a 
  href=&quot;javascript:ms.pan(&#39;w&#39;)&quot;&gt;&lt;img src=&quot;graphics/w.gif&quot; width=&quot;18&quot; 
  height=&quot;23&quot; border=&quot;0&quot; alt=&quot;pan west&quot;&gt;&lt;/a&gt;&lt;/td&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td align=&quot;center&quot; 
  bgcolor=&quot;#cccccc&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 
  this is the holding spot (the anchor) for the map 
  --&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;DIV id=&quot;main_anchor&quot; 
  style=&quot;position:relative; visibility:visible; width:100%; height:100%; 
  left:0px; top:0px;&quot;&gt;&lt;IMG src=&quot;graphics/white_pixel.gif&quot; height=&quot;600&quot; 
  width=&quot;600&quot;&gt;&lt;/DIV&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;!-- absolutely positioned layer to hold the map 
  --&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;DIV id=&quot;main&quot; 
  style=&quot;position:absolute; visibility:visible; width:100%; height:100%; 
  clip:rect(100%,100%,100%,100%); background:transparent;&quot;&gt;&lt;IMG 
  name=&quot;main&quot; src=&quot;graphics/transparent_pixel.gif&quot; height=&quot;600&quot; width=&quot;600&quot; 
  onMouseOver= &quot;mousemove_handler(name, x, y)&quot;&gt;&lt;/DIV&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;td align=&quot;left&quot; width=&quot;18&quot;&gt;&lt;a 
  href=&quot;javascript:ms.pan(&#39;e&#39;)&quot;&gt;&lt;img src=&quot;graphics/e.gif&quot; width=&quot;18&quot; 
  height=&quot;23&quot; border=&quot;0&quot; alt=&quot;pan east&quot;&gt;&lt;/a&gt;&lt;/td&gt; 
  <br>&nbsp;&nbsp;&nbsp; &lt;/tr&gt;<br>&nbsp;&nbsp;&nbsp; 
  &lt;tr&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td align=&quot;right&quot; 
  width=&quot;18&quot;&gt;&lt;a href=&quot;javascript:ms.pan(&#39;sw&#39;)&quot;&gt;&lt;img 
  src=&quot;graphics/sw.gif&quot; width=&quot;18&quot; height=&quot;18&quot; border=&quot;0&quot; alt=&quot;pan 
  southwest&quot;&gt;&lt;/a&gt;&lt;/td&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td 
  align=&quot;center&quot;&gt;&lt;a href=&quot;javascript:ms.pan(&#39;s&#39;)&quot;&gt;&lt;img 
  src=&quot;graphics/s.gif&quot; width=&quot;23&quot; height=&quot;18&quot; border=&quot;0&quot; alt=&quot;pan 
  south&quot;&gt;&lt;/a&gt;&lt;/td&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td 
  align=&quot;left&quot; width=&quot;18&quot;&gt;&lt;a href=&quot;javascript:ms.pan(&#39;se&#39;)&quot;&gt;&lt;img 
  src=&quot;graphics/se.gif&quot; width=&quot;18&quot; height=&quot;18&quot; border=&quot;0&quot; alt=&quot;pan 
  southeast&quot;&gt;&lt;/a&gt;&lt;/td&gt; <br>&nbsp;&nbsp;&nbsp; 
  &lt;/tr&gt;<br>&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td bgcolor=&quot;#666666&quot; 
  colspan=&quot;3&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img 
  name=&quot;scalebar_kilometers&quot; align=&quot;right&quot; title=&quot;scalebar (km)&quot; alt=&quot;scalebar 
  (km)&quot; src=&quot;graphics/red_pixel.gif&quot;&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;img name=&quot;scalebar_miles&quot; title=&quot;scalebar (mi)&quot; alt=&quot;scalebar (mi)&quot; 
  src=&quot;graphics/red_pixel.gif&quot;&gt;<br>&nbsp;&nbsp;&nbsp; 
  &lt;/td&gt;&lt;/tr&gt;<br>&nbsp; &lt;/table&gt;<br>&lt;/td&gt;<br><br>&lt;td 
  valign=&quot;top&quot; bgcolor=#000000&gt;<br>&nbsp; &lt;table cellpadding=&quot;5&quot; 
  cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;<br>&nbsp;&nbsp;&nbsp; 
  &lt;tr&gt;&lt;td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp; <br>&nbsp; &lt;p 
  class=&quot;main&quot; 
  style=&quot;color:#00ee00;margin-left:6;margin-bottom:6;line-height:100%&quot;&gt;&lt;b&gt;Map 
  controls:&lt;/b&gt;&lt;/p&gt; <br>&lt;ul id=&quot;tree-refimagemenu&quot; 
  class=&quot;checktree&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; 
  &lt;li id=&quot;show-refmap&quot; class=&quot;last&quot;&gt;Reference map<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;ul id=&quot;tree-refmap&quot;&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li class=&quot;last&quot; &gt; 
  <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!--this is 
  the holding spot (the anchor) for the reference 
  map--&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;DIV id=&quot;reference_anchor&quot; 
  align=&quot;center&quot; style=&quot;position:relative; visibility:visible; width:100%; 
  height:100%;left:0px; top:5px;left:20px;margin-bottom:0;&quot;&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src=&quot;graphics/white_pixel.gif&quot; 
  height=&quot;120&quot; width=&quot;120&quot;&gt;&lt;/DIV&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;!-- absolutely positioned layer to hold the reference 
  map--&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;DIV id=&quot;reference&quot; 
  style=&quot;position:absolute; visibility:visible; width:100%; height:100%; 
  clip:rect(100%,100%,100%,100%); background:transparent;&quot;&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img name=&quot;reference&quot; 
  src=&quot;graphics/reference.gif&quot; height=&quot;120&quot; width=&quot;120&quot; 
  border=&quot;1&quot;&gt;&lt;/DIV&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;/ul&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/li&gt; <br>&lt;/ul&gt;<br>&lt;ul 
  id=&quot;tree-mapmodemenu&quot; class=&quot;checktree&quot;&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;li id=&quot;show-browse&quot; class=&quot;last&quot; style=&quot;cursor: 
  move&quot;&gt;Browse<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;ul id=&quot;tree-browse&quot;&gt; <br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;radio&quot; name=&quot;act&quot; 
  onClick=&quot;ms.mode=&#39;map&#39;;ms.zoomdir=1;&quot; style=&quot;vertical-align: 
  middle;border-width:3;border-color:#000000&quot; checked&gt;Zoom In&lt;/li&gt; 
  <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;input 
  type=&quot;radio&quot; name=&quot;act&quot; onClick=&quot;ms.mode=&#39;map&#39;;ms.zoomdir=-1;&quot; 
  style=&quot;vertical-align: middle;&quot;&gt;Zoom Out&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;radio&quot; name=&quot;act&quot; onClick=&quot; 
  ms.mode=&#39;map&#39;;ms.zoomdir=0;&quot; style=&quot;vertical-align: middle;&quot;&gt;Center 
  map&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;input 
  type=&quot;radio&quot; name=&quot;act&quot; onClick=&quot;ms.mode=&#39;map&#39; 
  ;ms.setextent(34500,3800000,1080000,4650000); ms.draw();&quot; 
  style=&quot;vertical-align: middle;&quot;&gt;Zoom 
  extents&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li class=&quot;last&quot; 
  id=&quot;show-zoomfactor&quot;&gt;&amp;nbsp;Zoom factor <br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;ul 
  id=&quot;tree-zoomfactor&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;li&gt;&lt;input type=&quot;radio&quot; name=&quot;zf&quot; 
  onclick=&quot;ms.zoomsize=1.071;&quot;&gt;Low&lt;/li&gt; <br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;radio&quot; name=&quot;zf&quot; 
  onclick=&quot;ms.zoomsize=2;&quot; checked&gt;Normal&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;li class=&quot;last&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;zf&quot; 
  onclick=&quot; ms.zoomsize=3.5;&quot;&gt;High&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;/ul&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li 
  id=&quot;show-query&quot; class=&quot;last&quot; style=&quot;cursor: help&quot;&gt;Query 
  <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;ul id=&quot;tree-query&quot;&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;p&gt;&lt;b&gt;Choose an Action: 
  &lt;/b&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&nbsp; 
  &lt;input onClick=&quot;ms.mode=&#39;map&#39;&quot; type=&quot;radio&quot; name=&quot;mode&quot; checked&gt; Browse 
  map&lt;br&gt;&lt;/li&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; 
  &lt;input onClick=&quot;ms.mode=&#39;query&#39;&quot; type=&quot;radio&quot; name=&quot;mode&quot;&gt; Query 
  feature&lt;br&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;li&gt; &lt;input onClick=&quot;ms.mode=&#39;nquery &#39;&quot; type=&quot;radio&quot; name=&quot;mode&quot;&gt; 
  Query multiple features&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;li&gt;Search&lt;/li&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;form 
  name=&quot;texsearch&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;select 
  name=&quot;qlayer1&quot;&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option 
  value=&quot;&quot; 
  selected&gt;---Select---&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;option 
  value=&quot;cities&quot;&gt;CITY&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;option value=&quot;coast&quot;&gt;COAST&lt;/option&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;option 
  value=&quot;roads&quot;&gt;ROAD&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;/select&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;input type=&quot;TEXT&quot; size=&quot;12&quot; style=&quot; list-style-type: none;padding: 
  0;margin: 0;font: 11px verdana;vertical-align: middle;&quot; name=&quot;qstring1&quot; 
  value=&quot;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type=&quot;TEXT&quot; size=&quot;12&quot; 
  style=&quot; list-style-type: none;padding: 0;margin: 0;font: 11px 
  verdana;vertical-align: middle;&quot; name=&quot;qstring2&quot; 
  value=&quot;&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input 
  type=&quot;button&quot; value =search onclick=&quot;openWindow(&#39;<a href="http://localhost/cgi-bin/mapserv.exe?qlayer=%27+qlayer1.value+%27&amp;myitem=%27+qlayer1.value+%27%2C%27+qstring1.value+%27&amp;qstring=%27+qstring2.value+%27&amp;map=%2Fms4w%2Fapps%2Fmapserv-demo%2Fitasca.map&amp;program=%2Fcgi-bin%2Fmapserv.exe&amp;mode=itemnquery&amp;qitem=%27+qstring1.value+%27%27,500,400,%27yes%27%29;" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
 
  http://localhost/cgi-bin/mapserv.exe?qlayer=&#39;+qlayer1.value+&#39;&amp;myitem=&#39;+qlayer1.value+&#39;%2C&#39;+qstring1.value+&#39;&amp;qstring=&#39;+qstring2.value+&#39;&amp;map=%2Fms4w%2Fapps%2Fmapserv-demo%2Fitasca.map&amp;program=%2Fcgi-bin%2Fmapserv.exe&amp;mode=itemnquery&amp;qitem=&#39;+qstring1.value+&#39;&#39;,500,400,&#39;yes&#39;); 
  </a>&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;/form&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;br&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;/li&gt;<br>&lt;/ul&gt;<br><br>&lt;ul 
  id=&quot;tree-resizemenu&quot; class=&quot;checktree&quot;&gt; <br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;li id=&quot;show-resize&quot;&gt;Resize 
  Window<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;select 
  name=&quot;SizeWin&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;option value=&quot;small&quot;&gt;400 x 
  400&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;option value=&quot;normal&quot; selected&gt;600 x 600&lt;/option&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;option value=&quot;large&quot;&gt;800 x 
  800&lt;/option&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;/select&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br><br><br><br>&lt;hr border=&quot;1&quot;&gt; 
  <br><br>&lt;p class=&quot;main&quot; 
  style=&quot;color:#00ee00;margin-left:6;margin-bottom:6;line-height:100%&quot;&gt;&lt;b&gt;Layer 
  controls:&lt;/b&gt;&lt;/p&gt;<br>&lt;ul id=&quot;tree-layermenu&quot; 
  class=&quot;checktree&quot;&gt; <br>&nbsp;<br>&nbsp;&lt;li 
  id=&quot;show-geography&quot;&gt;Geography&lt;span id=&quot;count-geography&quot; 
  class=&quot;count&quot;&gt;&lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;ul id=&quot;tree-geography&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;checkbox&quot; 
  value=&quot;cities&quot; onclick=&quot; ms.togglelayers(this);&quot; checked&gt; Cities 
  &lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 
  &lt;li&gt;&lt;input type=&quot;checkbox&quot; value=&quot;coast&quot; 
  onclick=&quot;ms.togglelayers(this);&quot; checked&gt; Coast 
  &lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;li&gt;&lt;input type=&quot;checkbox&quot; value=&quot;geology&quot; onclick=&quot; 
  ms.togglelayers(this)&quot; &gt; Geology &lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt;<br>&nbsp;&lt;/li&gt;<br>&nbsp;&lt;li 
  id=&quot;show-pop&quot;&gt;Weather&lt;span id=&quot;count-pop&quot; 
  class=&quot;count&quot;&gt;&lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;ul id=&quot;tree-pop&quot;&gt; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;checkbox&quot; value=&quot;rain50&quot; 
  onclick=&quot;ms.togglelayers(this)&quot; &gt;Rain 
  Contoors&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;input type=&quot;checkbox&quot; value=&quot;temp25&quot; 
  onclick=&quot; ms.togglelayers(this)&quot; &gt;Temp 
  Contoors&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;/ul&gt;&nbsp;&nbsp;&nbsp; 
  &nbsp;<br>&nbsp;&lt;/li&gt;<br>&nbsp;&lt;li 
  id=&quot;show-infra&quot;&gt;Infrastructure&lt;span id=&quot;count-infra&quot; 
  class=&quot;count&quot;&gt;&lt;/span&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;ul id=&quot;tree-infra&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;checkbox&quot; value=&quot;roads&quot; 
  onclick=&quot;ms.togglelayers(this)&quot; id=&quot;count-infra&quot; checked&gt; Roads&lt;/li&gt; 
  <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;/ul&gt;&nbsp;&nbsp;&nbsp; 
  &nbsp;<br>&nbsp;&lt;/li&gt;<br>&nbsp;<br>&nbsp;&lt;li id=&quot;show-grid&quot; 
  class=&quot;last&quot;&gt;Grid&lt;span id=&quot;count-grid&quot; 
  class=&quot;count&quot;&gt;&lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;ul id=&quot;tree-grid&quot;&gt; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp; &lt;li&gt;&lt;input type=&quot;checkbox&quot; value=&quot;grid&quot; 
  onclick=&quot;ms.togglelayers(this)&quot; id=&quot;count-grid&quot;&gt; 5 deg 
  gridlines&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class=&quot;last&quot;&gt;&lt;input type=&quot;checkbox&quot; 
  value=&quot;grid1&quot; onclick=&quot; ms.togglelayers(this)&quot; id=&quot;count-grid&quot;&gt; 1 deg 
  gridlines&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  &nbsp;&lt;/ul&gt;&nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&lt;/li&gt; 
  <br>&nbsp;<br>&nbsp;<br>&lt;/ul&gt; 
  <br><br><br><br><br>&lt;/form&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/select&gt;&lt;br&gt; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type=&quot;button&quot; 
  value=&quot;Refresh Map&quot; 
  onClick=&quot;ms.draw()&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;hr&gt;<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;p&gt;&lt;b&gt;Legend:&lt;/b&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;!-- How you&#39;d do a legend varies by browser. With some browsers that 
  support dynamic image size you could <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; handle 
  like the scalebars. Otherwise you need to combine the select list above with 
  pre-computed<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; images or use a popup window. 
  --&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img name=&quot;legend&quot; 
  src=&quot;graphics/red_pixel.gif&quot;&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp; <br><br>&nbsp;&nbsp; 
  &lt;hr&gt;&nbsp; <br>&nbsp;&nbsp; <br>&nbsp;&nbsp; <br>&nbsp;&nbsp; 
  <br>&nbsp;&nbsp; &lt;form&gt;<br>&nbsp;&nbsp; &lt;input name=&quot;coordinates&quot; 
  id=&quot;coordinates&quot; type=&quot;text&quot; size=25 &gt; <br>&nbsp;&nbsp; <br>&nbsp;&nbsp; 
  &lt;/form&gt; <br>&nbsp;&nbsp; <br>&nbsp;&nbsp; <br>&nbsp;&nbsp; 
  <br>&nbsp;&nbsp;&nbsp; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br><br>&nbsp; 
  &lt;/td&gt;&lt;/tr&gt;<br>&lt;/table&gt;<br>&lt;/center&gt; 
  <br><br>&lt;p&gt;&lt;hr&gt;<br><br><br><br>&lt;p&gt;<br><br>&lt;a 
  href=&quot;javascript: top.location.href=&#39;index.html&#39;&quot;&gt;back to 
  start&lt;/a&gt;&lt;p&gt;<br>&lt;script language=&quot;javascript&quot;&gt;<br>&nbsp; 
  document.write(&quot;&lt;i&gt;&quot; + args.map_web_template + &quot;&lt;/i&gt;&quot;); 
  <br>&lt;/script&gt;<br><br>&lt;/body&gt;&lt;/html&gt;<br>------------------------------------------------------------------------------------------------------------------------------------------------------------------
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div><span class="gmail_quote">On 7/17/07, <b class="gmail_sendername">Rodrigo 
  Martín LÓPEZ GREGORIO</b> &lt;<a href="mailto:rodrigomlg@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">rodrigomlg@gmail.com</a>&gt; 
  wrote: </span>
  <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Hi 
    Satish<br><br>try this:<span><br><br>&lt;IMG name=&quot;main&quot; 
    src=&quot;graphics/transparent</span>
    <div>_pixel.gif&quot; height=&quot;600&quot; width=&quot;600&quot; 
    onMouseOver=&quot;mousemove_handler(name, x, y)&quot;&gt;<br><br>I use the MouseOver 
    event instead MouseMove.<br><br>about the loading image what you must do is 
    something like this: <br><br>First add an &lt;img&gt; element on your page, 
    give it a name and the same id, and preferable position it absolutelly on 
    your page. Also give it a z-index value so it will be over other 
    elements(i.e. the map). And finally a &quot;display:none;&quot; in the style will make 
    it to not be showed by default... something like: <br><br>&lt;img 
    name=&quot;loadingimage&quot; id=&quot;loadingimage&quot; src=&quot;img/loading.gif&quot; style=&quot;position: 
    absolute; display:none; left:480px;&nbsp; top:360px;width: 120px; height: 
    30px; z-index: 50; &gt; <br></div><br>then when you are going to retrieve 
    the new map image (in some place inside the javascript function of jBox that 
    gets the new image) you must change the display property of your loading 
    image so it will be visible: 
    <br><br>document.getElementById(&#39;loadingimage&#39;).style.display = 
    &#39;&#39;;<br><br>and if there is a jBox function that handles the onload of the 
    image element you must add the next code to that 
    function.<br><br>document.getElementById (&#39;loadingimage&#39;).style.display = 
    &#39;none&#39;;<br><br>if there is no jBox function that handles the onload event of 
    your image, what you can do is put that code inside the onLoad event of the 
    map &lt;img&gt; element, like: <span><br><br>&lt;IMG name=&quot;main&quot; 
    src=&quot;graphics/transparent </span>
    <div>_pixel.gif&quot; height=&quot;600&quot; width=&quot;600&quot; 
    onMouseOver=&quot;mousemove_handler(name, x, y)&quot; 
    onLoad=&quot;document.getElementById(&#39;loadingimage&#39;).style.display = 
    &#39;none&#39;;&quot;&gt;</div><br>I hope you understand what I&#39;m talking about but ask 
    me again if you can&#39;t get it working. <br><span><br>Rodrigo.</span>
    <div><span><br><br>
    <div><span class="gmail_quote">On 7/17/07, <b class="gmail_sendername">SATish In 
    Athens +30 6947758275</b> &lt;<a href="mailto:satsuman@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"> satsuman@gmail.com</a>&gt; 
    wrote:</span>
    <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">I 
      have tried with dBox..<br><br><br>I put this in 
      head..<span><br><br>function mousemove_handler(name, x, y) 
      {<br></span>&nbsp;&nbsp;&nbsp; 
      document.getElementById(&#39;coordinates&#39;).value = &quot; x=&nbsp; &quot; + 
      Math.round(Number( ms.extent[0] + x* ms.cellsize)) + &quot;&nbsp;&nbsp; 
      and&nbsp; y= &quot; + Math.round(Number(ms.extent[3] - 
      y*ms.cellsize));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br><br><br><br>and 
      this in body..<br><br>&lt;IMG name=&quot;main&quot; 
      src=&quot;graphics/transparent_pixel.gif&quot; height=&quot;600&quot; width=&quot;600&quot; onMouseMove= 
      &quot;mousemove_handler(name, x, y)&quot; onMouseOver=&quot;isCursorOver=true&quot; 
      onMouseOut=&quot;isCursorOver=false&quot;&gt; <br><br><br>But I am getting the 
      co-ordinates value in co-ordinates box only when i click on the 
      image...<br>But, it should come as soon as I move my cursor on the 
      image.<br>I tried with installing a separate jBox but i dint get the image 
      so i left.. :) <br>Now, what to do?<br><br><br>Well, and I am not able to 
      configure things with my &quot;waiting graphics&quot;..&nbsp; Can some one explain 
      that please.. <br><br>regards<br>Satish<br><br><br><br><br><br><br><br>
      <div><span class="gmail_quote">On 7/17/07, <b class="gmail_sendername">Luis 
      Treviño</b> &lt;<a href="mailto:ltrevinoh@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">ltrevinoh@gmail.com</a>&gt; wrote:</span>
      <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
        <div>you could try jBox. it&#39;s an applet that does what you want. Take a 
        look at <a href="http://mapserver.gis.umn.edu/docs/howto/jbox" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://mapserver.gis.umn.edu/docs/howto/jbox </a></div>
        <div>&nbsp;</div>
        <div>cheers,</div>
        <div>Luis<br><br>&nbsp;</div>
        <div><span class="gmail_quote">2007/7/16, SATish In Athens +30 6947758275 
        &lt;<a href="mailto:satsuman@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">satsuman@gmail.com</a>&gt;:</span> 
        <div><span>
        <div><span>
        <blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">Hello 
          all..<br>When i take my mouse on the image , i want to display the 
          image co-ordinates (in Kilometers or miles)&nbsp; and it should change 
          as the cursor changes its position.. <br>secondly, i want to display 
          one graphics image for &quot;Please Wait , map is loading&quot; whenever map is 
          refreshed.. <br>I do not know how to implement these 
          features..<br>your concern will be heavily appreciated.. 
        <br><br><br></blockquote></span></div></span></div></div><br></blockquote></div><br></blockquote></div><br></span></div></blockquote></div><br><br><br clear="all"></blockquote></span></div></div>
</blockquote></div><br>