<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 map should be smaller than it is now.<br><br>5. I put on copyright symbol with help of layer but © 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><html>
<br><head><br> <title>MapServer - Itasca Application</title><br> <br> <!--Open new window java--><br><SCRIPT LANGUAGE="javascript"> <br>function openWindow(url, w, h,s) {<br> var options = "width=" + w + ",height=" + h + ",";
<br> options += "resizable=yes,scrollbars="+s+",status=no,";<br> options += "menubar=no,toolbar=no,location=no,directories=no";<br> var newWin = window.open(url, 'NewWindow', options);
<br> newWin.focus();<br>}<br><br>function reloadPage()<br> {<br> window.location.reload()<br> }<br><br></script><br><br><!--checktree--><br><link rel="stylesheet" type="text/css" href="
checktree.css" /><br><!-- the DHTML JavaScript library includes --><br><script type="text/javascript" src="javascript/cbe/cbe_core.js"></script><br><script type="text/javascript" src="javascript/cbe/cbe_event.js"></script>
<br><script type="text/javascript" src="javascript/checktree/checktree.js"></script><br><script type="text/javascript"><br> var layermenu = new CheckTree('layermenu');
<br> var refimagemenu = new CheckTree('refimagemenu');<br> var mapmodemenu = new CheckTree('mapmodemenu');<br></script><br><br><!-- MapServer specific JavaScript library includes --><br><script language="javascript" src="javascript/mapserv.js"></script>
<br><script language="JavaScript" src="javascript/dbox.js"></script><br><br><br><!-- utility library --><br><script language="JavaScript" src="javascript/utils.js"></script>
<br><br><!-- scripting specific to the application --><br><script language="javascript"><br> // first, nab any arguments passed to this page (so we don't have to edit the page)<br> var args = getargs();
<br><br> // the DHTML main mapping window (note the significance of the name "main" here and with the Mapserv object)<br> var main = new dBox("main", 600, 600, "#FF0000", 2);<br> // main.verbose
= true;<br><br> // the DHTML reference map window<br> var reference = new dBox("reference", 120, 120, "#989898", 1);<br> reference.box = false;<br> reference.cursorsize = 0;<br><br> // mapserv.js
global variables<br> var MapServer = args.program;<br> var QueryServer = MapServer;<br> var Interface = "dhtml";<br> var DrawOnLayerChange=true;<br> <br> // create the Mapserv object<br> var ms = new Mapserv("main",
args.map, 35000,3800000,1080000,4650000, 600, 600);<br> ms.minscale = 10;<br> ms.maxscale = 1550000;<br> ms.pansize=.200;<br><br> // layer definitions<br> <br> ms.layers[ms.layers.length] = new Layer('coast', 'Coast', 'layers', true, null, null);
<br> ms.layers[ms.layers.length] = new Layer('cities', 'Cities', 'layers', true, null, null);<br> ms.layers[ms.layers.length] = new Layer('geology', 'Geology', 'layers', false, null, null);
<br> ms.layers[ms.layers.length] = new Layer('rain50', 'Rain Contoors', 'layers', false, null, null);<br> ms.layers[ms.layers.length] = new Layer('roads', 'Roads', 'layers', true, null, null);
<br> ms.layers[ms.layers.length] = new Layer('temp25', 'Temp.Contoors', 'layers', false, null, null);<br> ms.layers[ms.layers.length] = new Layer('copyright', 'Hydroxi', 'layers', true, null, null);
<br> ms.layers[ms.layers.length] = new Layer('grid', 'Grid', 'layers', false, null, null);<br> ms.layers[ms.layers.length] = new Layer('grid1', 'Grid1', 'layers', false, null, null);
<br> ms.buildlayers();<br><br> // add the reference map<br> ms.referencemap = new Mapserv("reference", args.map, 393234.393701263, 5205405.16440722, 495769.579718949,5307959.02579127, 120, 120);<br><br> //<br>
// Extensions to Mapserv.draw(): this allows you to exend the capabilties of<br> // of the default draw method. There are post and pre draw functions available.<br> //<br> function predraw() {<br> // clear any query results
<br> top.query_frame.location.href='blank.html';<br><br> // update the scalebars<br> 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;<br> 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;<br><br> // update the legend<br> document.legend.src = MapServer + "?map=" + ms.mapfile + "&mode=legend&layers=" + ms.layerlist;<br> reference.sync();<br> }<br><br> //<br>
// Functions that are called by the jBox applet or the dBox javascript code:<br> // basically these provide the gateway from the applet/layers to the rest of<br> // the application. Note that they are the same regardless of implementation.
<br> //<br> // Bottom line: you may want to swipe some of this code.<br> //<br> // jBox/dBox errors are passed to the browser via this function<br> function seterror_handler(name, message) { alert("Component " + name + " error: " + message); }
<br><br> // allows jBox/dBox to reset without redrawing<br> function reset_handler(name, minx, miny, maxx, maxy) { }<br><br> // called from jBox/dBox when the user initiates change<br> function setbox_handler(name, minx, miny, maxx, maxy) {
<br> if(name == 'reference') {<br> ms.applyreference(minx, miny);<br> ms.draw();<br> } else {<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();<br> } else if(ms.mode != 'map') {<br> ms.applyquerybox(minx, miny, maxx, maxy); // these just set members
<br> ms.applyquerypoint(minx, miny);<br> ms.query(); // builds query URL<br> href = openWindow(ms.url,500,400,"yes");<br> }<br> }<br> }<br> <br> <br> <br> <br><br> // various event handlers called by jBox/dBox
<br> function mousemove_handler(name, x, y) {<br> document.getElementById('coordinates').value = " x= " + Math.round(Number(ms.extent[0] + x*ms.cellsize)) + " and y= " + Math.round(Number(
ms.extent[3] - y*ms.cellsize));<br> }<br> function mouseexit_handler(name) { window.status = ""; }<br> function mouseenter_handler(name) { window.status = ""; }<br><br><br><br><br><br> // page initialization function
<br> function windowOnload() {<br> main.initialize();<br> reference.initialize();<br> ms.setextent(34500,3800000,1080000,4650000);<br> ms.zoomdir=1;<br> ms.draw();<br> }<br> <br></script><br><br><br>
<br></head><br><body bgcolor=#000000 style="color: #ffffff;" onResize="main.sync();reference.sync()"><br><link rel="stylesheet" type="text/css" href="hec.css"><body bgcolor=#FFFFFF onResize="
main.sync();reference.sync()"><br><br><center><h1>MapServer - Itasca Application</h1></center><br><hr><br><br><br><br> <form name="map" onclick="ms.togglelayers(this)" style="margin-left:0;margin-bottom:0;margin-top:0;line-height:100%">
<br><br><br><br><br><br><center><br><table border=0 cellspacing=0 cellpadding=4><br><tr><br><td valign="top" align=center><br><!-- <p class="main"><b>Legend:</b><br>-->
<br> <!--How you'd do a legend varies by browser. With some browsers that support dynamic image size you could<br> handle like the scalebars. Otherwise you need to combine the select list above with pre-computed
<br> images or use a popup window.--><br><!-- <img name="legend" src="graphics/red_pixel.gif"><br><hr><br>[legend]<br><hr><br><br>--><br><br> <table width="390" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#666666">
<br> <tr><br> <td align="right" width="18"><a href="javascript:ms.pan('nw')"><img src="graphics/nw.gif" width="18" height="18" border="0" alt="pan northwest"></a></td>
<br> <td align="center"><a href="javascript:ms.pan('n')"><img src="graphics/n.gif" width="23" height="18" border="0" alt="pan north"></a></td>
<br> <td align="left" width="18"><a href="javascript:ms.pan('ne')"><img src="graphics/ne.gif" width="18" height="18" border="0" alt="pan northeast"></a></td>
<br> </tr><br> <tr><br> <td align="right" width="18"><a href="javascript:ms.pan('w')"><img src="graphics/w.gif" width="18" height="23" border="0" alt="pan west"></a></td>
<br> <td align="center" bgcolor="#cccccc"><br> <!-- this is the holding spot (the anchor) for the map --><br> <DIV id="main_anchor" style="position:relative; visibility:visible; width:100%; height:100%; left:0px; top:0px;"><IMG src="graphics/white_pixel.gif" height="600" width="600"></DIV>
<br> <!-- absolutely positioned layer to hold the map --><br> <DIV id="main" style="position:absolute; visibility:visible; width:100%; height:100%; clip:rect(100%,100%,100%,100%); background:transparent;"><IMG name="main" src="graphics/transparent_pixel.gif" height="600" width="600" onMouseOver= "mousemove_handler(name, x, y)"></DIV>
<br> </td><br> <td align="left" width="18"><a href="javascript:ms.pan('e')"><img src="graphics/e.gif" width="18" height="23" border="0" alt="pan east"></a></td>
<br> </tr><br> <tr><br> <td align="right" width="18"><a href="javascript:ms.pan('sw')"><img src="graphics/sw.gif" width="18" height="18" border="0" alt="pan southwest"></a></td>
<br> <td align="center"><a href="javascript:ms.pan('s')"><img src="graphics/s.gif" width="23" height="18" border="0" alt="pan south"></a></td>
<br> <td align="left" width="18"><a href="javascript:ms.pan('se')"><img src="graphics/se.gif" width="18" height="18" border="0" alt="pan southeast"></a></td>
<br> </tr><br> <tr><td bgcolor="#666666" colspan="3"><br> <img name="scalebar_kilometers" align="right" title="scalebar (km)" alt="scalebar (km)" src="graphics/red_pixel.gif">
<br> <img name="scalebar_miles" title="scalebar (mi)" alt="scalebar (mi)" src="graphics/red_pixel.gif"><br> </td></tr><br> </table><br></td><br>
<br><td valign="top" bgcolor=#000000><br> <table cellpadding="5" cellspacing="0" border="0" bgcolor="#000000"><br> <tr><td><br> <br> <br> <p class="main" style="color:#00ee00;margin-left:6;margin-bottom:6;line-height:100%"><b>Map controls:</b></p>
<br><ul id="tree-refimagemenu" class="checktree"> <br> <li id="show-refmap" class="last">Reference map<br> <ul id="tree-refmap"><br> <li class="last" >
<br> <!--this is the holding spot (the anchor) for the reference map--><br> <DIV id="reference_anchor" align="center" style="position:relative; visibility:visible; width:100%; height:100%;left:0px; top:5px;left:20px;margin-bottom:0;">
<br> <img src="graphics/white_pixel.gif" height="120" width="120"></DIV><br> <!-- absolutely positioned layer to hold the reference map--><br> <DIV id="reference" style="position:absolute; visibility:visible; width:100%; height:100%; clip:rect(100%,100%,100%,100%); background:transparent;">
<br> <img name="reference" src="graphics/reference.gif" height="120" width="120" border="1"></DIV><br> </li><br> </ul><br> </li>
<br></ul><br><ul id="tree-mapmodemenu" class="checktree"><br> <li id="show-browse" class="last" style="cursor: move">Browse<br> <ul id="tree-browse">
<br> <li><input type="radio" name="act" onClick="ms.mode='map';ms.zoomdir=1;" style="vertical-align: middle;border-width:3;border-color:#000000" checked>Zoom In</li>
<br> <li><input type="radio" name="act" onClick="ms.mode='map';ms.zoomdir=-1;" style="vertical-align: middle;">Zoom Out</li><br> <li><input type="radio" name="act" onClick="
ms.mode='map';ms.zoomdir=0;" style="vertical-align: middle;">Center map</li><br> <li><input type="radio" name="act" onClick="ms.mode='map'
;ms.setextent(34500,3800000,1080000,4650000); ms.draw();" style="vertical-align: middle;">Zoom extents</li><br> <li class="last" id="show-zoomfactor">&nbsp;Zoom factor
<br> <ul id="tree-zoomfactor"><br> <li><input type="radio" name="zf" onclick="ms.zoomsize=1.071;">Low</li>
<br> <li><input type="radio" name="zf" onclick="ms.zoomsize=2;" checked>Normal</li><br> <li class="last"><input type="radio" name="zf" onclick="
ms.zoomsize=3.5;">High</li><br> </ul><br> </li><br> </ul><br> <li id="show-query" class="last" style="cursor: help">Query
<br> <ul id="tree-query"><br> <p><b>Choose an Action: </b><br><br> <li> <input onClick="ms.mode='map'" type="radio" name="mode" checked> Browse map<br></li>
<br> <li> <input onClick="ms.mode='query'" type="radio" name="mode"> Query feature<br></li><br> <li> <input onClick="ms.mode='nquery
'" type="radio" name="mode"> Query multiple features</li><br> <br> <li>Search</li> <br> <form name="texsearch"><br> <select name="qlayer1">
<br> <option value="" selected>---Select---</option><br> <option value="cities">CITY</option><br> <option value="coast">COAST</option>
<br> <option value="roads">ROAD</option><br> </select><br><br> <input type="TEXT" size="12" style=" list-style-type: none;padding: 0;margin: 0;font: 11px verdana;vertical-align: middle;" name="qstring1" value="">&nbsp;&nbsp;&nbsp;
<br> <input type="TEXT" size="12" style=" list-style-type: none;padding: 0;margin: 0;font: 11px verdana;vertical-align: middle;" name="qstring2" value=""><br>
<br><br> <input type="button" value =search onclick="openWindow('<a href="http://localhost/cgi-bin/mapserv.exe?qlayer='+qlayer1.value+'&myitem='+qlayer1.value+'%2C'+qstring1.value+'&qstring='+qstring2.value+'&map=%2Fms4w%2Fapps%2Fmapserv-demo%2Fitasca.map&program=%2Fcgi-bin%2Fmapserv.exe&mode=itemnquery&qitem='+qstring1.value+'',500,400,'yes');">
http://localhost/cgi-bin/mapserv.exe?qlayer='+qlayer1.value+'&myitem='+qlayer1.value+'%2C'+qstring1.value+'&qstring='+qstring2.value+'&map=%2Fms4w%2Fapps%2Fmapserv-demo%2Fitasca.map&program=%2Fcgi-bin%2Fmapserv.exe&mode=itemnquery&qitem='+qstring1.value+'',500,400,'yes');
</a>"><br> </form><br> <br> <br><br> </ul><br> </li><br></ul><br><br><ul id="tree-resizemenu" class="checktree">
<br> <li id="show-resize">Resize Window<br> <select name="SizeWin"><br> <option value="small">400 x 400</option><br> <option value="normal" selected>600 x 600</option>
<br> <option value="large">800 x 800</option><br> </select><br> </li><br> </ul><br><br><br><br><hr border="1">
<br><br><p class="main" style="color:#00ee00;margin-left:6;margin-bottom:6;line-height:100%"><b>Layer controls:</b></p><br><ul id="tree-layermenu" class="checktree">
<br> <br> <li id="show-geography">Geography<span id="count-geography" class="count"></span><br> <ul id="tree-geography"><br> <li><input type="checkbox" value="cities" onclick="
ms.togglelayers(this);" checked> Cities </li><br> <li><input type="checkbox" value="coast" onclick="ms.togglelayers(this);" checked> Coast </li><br> <li><input type="checkbox" value="geology" onclick="
ms.togglelayers(this)" > Geology </li><br> </ul><br> </li><br> <li id="show-pop">Weather<span id="count-pop" class="count"></span><br> <ul id="tree-pop">
<br> <li><input type="checkbox" value="rain50" onclick="ms.togglelayers(this)" >Rain Contoors</li><br> <li><input type="checkbox" value="temp25" onclick="
ms.togglelayers(this)" >Temp Contoors</li><br> <br> <br> </ul> <br> </li><br> <li id="show-infra">Infrastructure<span id="count-infra" class="count"></span>
<br> <ul id="tree-infra"><br> <li><input type="checkbox" value="roads" onclick="ms.togglelayers(this)" id="count-infra" checked> Roads</li>
<br> </ul> <br> </li><br> <br> <li id="show-grid" class="last">Grid<span id="count-grid" class="count"></span><br> <ul id="tree-grid">
<br> <li><input type="checkbox" value="grid" onclick="ms.togglelayers(this)" id="count-grid"> 5 deg gridlines</li><br> <li class="last"><input type="checkbox" value="grid1" onclick="
ms.togglelayers(this)" id="count-grid"> 1 deg gridlines</li><br> </ul> <br> </li> <br> <br> <br></ul> <br><br><br><br><br></form><br> <br> </select><br>
<br> <input type="button" value="Refresh Map" onClick="ms.draw()"><br> <hr><br><br><br> <p><b>Legend:</b><br><br> <!-- How you'd do a legend varies by browser. With some browsers that support dynamic image size you could
<br> handle like the scalebars. Otherwise you need to combine the select list above with pre-computed<br> images or use a popup window. --><br> <img name="legend" src="graphics/red_pixel.gif">
<br> <br> <br> <br><br> <hr> <br> <br> <br> <br> <form><br> <input name="coordinates" id="coordinates" type="text" size=25 > <br> <br> </form>
<br> <br> <br> <br> </td></tr></table><br><br> </td></tr><br></table><br></center> <br><br><p><hr><br><br><br><br><p><br><br><a href="javascript:
top.location.href='index.html'">back to start</a><p><br><script language="javascript"><br> document.write("<i>" + args.map_web_template + "</i>");
<br></script><br><br></body></html><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> <<a href="mailto:rodrigomlg@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">rodrigomlg@gmail.com</a>> 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><IMG name="main" src="graphics/transparent</span><div>_pixel.gif"
height="600" width="600" onMouseOver="mousemove_handler(name, x, y)"><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 <img> 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 "display:none;" in the style will make it to not be showed by default... something like:
<br><br><img name="loadingimage" id="loadingimage" src="img/loading.gif" style="position: absolute; display:none; left:480px; top:360px;width: 120px; height: 30px; z-index: 50; >
<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('loadingimage').style.display = '';<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
('loadingimage').style.display = 'none';<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 <img> element, like:
<span><br><br><IMG name="main" src="graphics/transparent
</span><div>_pixel.gif"
height="600" width="600" onMouseOver="mousemove_handler(name, x, y)" onLoad="document.getElementById('loadingimage').style.display = 'none';"></div><br>I hope you understand what I'm talking about but ask me again if you can'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> <<a href="mailto:satsuman@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
satsuman@gmail.com</a>> 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> document.getElementById('coordinates').value = " x= " + Math.round(Number(
ms.extent[0] + x*
ms.cellsize)) + " and y= " + Math.round(Number(ms.extent[3] - y*ms.cellsize));<br> }<br><br><br><br>and this in body..<br><br><IMG name="main" src="graphics/transparent_pixel.gif" height="600" width="600" onMouseMove= "mousemove_handler(name, x, y)" onMouseOver="isCursorOver=true" onMouseOut="isCursorOver=false">
<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 "waiting graphics".. 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> <<a href="mailto:ltrevinoh@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">ltrevinoh@gmail.com</a>> 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'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> </div>
<div>cheers,</div>
<div>Luis<br><br> </div>
<div><span class="gmail_quote">2007/7/16, SATish In Athens +30 6947758275 <<a href="mailto:satsuman@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">satsuman@gmail.com</a>>:</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) and it should change as the cursor changes its position..
<br>secondly, i want to display one graphics image for "Please Wait , map is loading" 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">