Cursor position
SATish ...
satsuman at GMAIL.COM
Wed Jul 18 02:01:59 EDT 2007
Well thanks David
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.
Well, I am trying again and lets see if I can move further.
Regards
Satish
On 7/17/07, Fawcett, David <David.Fawcett at state.mn.us> wrote:
>
> Satish,
>
> You are really asking the list to do a lot of homework for you. You may
> want to look at dBox, it has many of the features that you are looking for.
> http://maps.dnr.state.mn.us/tools/dbox/
>
> You could either use it out of the box, or use the code to modify your
> existing application.
>
> David.
>
> -----Original Message-----
> *From:* UMN MapServer Users List [mailto:MAPSERVER-USERS at LISTS.UMN.EDU] *On
> Behalf Of *SATish ...
> *Sent:* Tuesday, July 17, 2007 8:19 AM
> *To:* MAPSERVER-USERS at LISTS.UMN.EDU
> *Subject:* [UMN_MAPSERVER-USERS] Cursor position
>
>
> Hey Martin..
> It was very nice of you that you replied and it was really a nice effort..
> But, It did not work and now I am afraid if some basic thing is missing in
> my code or what..
>
> I just kept refining the itasca demo as for my need and many things I
> implemented in it..
> But somethings are still lacking which I am not able to figure out..
>
> 1. When I click on Reference map, the original map loses focus instead of
> navigating itself to that position.
>
> 2. The loading image when map is refreshed.
>
> 3. The cursor position (real world) when mouse is over the map.
>
> 4. I want to zoom-out more and the initial map should be smaller than it
> is now.
>
> 5. I put on copyright symbol with help of layer but (c) symbol is not clear
> because of font and other than that can I use graphics for this too.
>
> 6. How to resize map window for different computer screens.
>
> 7. Grids are not working.
>
> I have pasted my html code below the message.
>
> I am trying hard for getting these answers and please see if you are able
> in solving at least some of my problems
>
>
> Thanks and Regards
> Satish
>
>
> ----------------------------------------------------------------------------------------------------------------------------------------------------------------
> <html>
> <head>
> <title>MapServer - Itasca Application</title>
>
> <!--Open new window java-->
> <SCRIPT LANGUAGE="javascript">
> function openWindow(url, w, h,s) {
> var options = "width=" + w + ",height=" + h + ",";
> options += "resizable=yes,scrollbars="+s+",status=no,";
> options += "menubar=no,toolbar=no,location=no,directories=no";
> var newWin = window.open(url, 'NewWindow', options);
> newWin.focus();
> }
>
> function reloadPage()
> {
> window.location.reload()
> }
>
> </script>
>
> <!--checktree-->
> <link rel="stylesheet" type="text/css" href=" checktree.css" />
> <!-- the DHTML JavaScript library includes -->
> <script type="text/javascript" src="javascript/cbe/cbe_core.js"></script>
> <script type="text/javascript" src="javascript/cbe/cbe_event.js"></script>
>
> <script type="text/javascript"
> src="javascript/checktree/checktree.js"></script>
> <script type="text/javascript">
> var layermenu = new CheckTree('layermenu');
> var refimagemenu = new CheckTree('refimagemenu');
> var mapmodemenu = new CheckTree('mapmodemenu');
> </script>
>
> <!-- MapServer specific JavaScript library includes -->
> <script language="javascript" src="javascript/mapserv.js"></script>
> <script language="JavaScript" src="javascript/dbox.js"></script>
>
>
> <!-- utility library -->
> <script language="JavaScript" src="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";
> var DrawOnLayerChange=true;
>
> // create the Mapserv object
> var ms = new Mapserv("main", args.map, 35000,3800000,1080000,4650000,
> 600, 600);
> ms.minscale = 10;
> ms.maxscale = 1550000;
> ms.pansize=.200;
>
> // layer definitions
>
> ms.layers[ms.layers.length] = new Layer('coast', 'Coast', 'layers',
> true, null, null);
> ms.layers[ms.layers.length] = new Layer('cities', 'Cities', 'layers',
> true, null, null);
> ms.layers[ms.layers.length] = new Layer('geology', 'Geology', 'layers',
> false, null, null);
> ms.layers[ms.layers.length] = new Layer('rain50', 'Rain Contoors',
> 'layers', false, null, null);
> ms.layers[ms.layers.length] = new Layer('roads', 'Roads', 'layers',
> true, null, null);
> ms.layers[ms.layers.length] = new Layer('temp25', 'Temp.Contoors',
> 'layers', false, null, null);
> ms.layers[ms.layers.length] = new Layer('copyright', 'Hydroxi',
> 'layers', true, null, null);
> ms.layers[ms.layers.length] = new Layer('grid', 'Grid', 'layers', false,
> null, null);
> ms.layers[ms.layers.length] = new Layer('grid1', 'Grid1', '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='blank.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
> href = openWindow(ms.url,500,400,"yes");
> }
> }
> }
>
>
>
>
>
> // various event handlers called by jBox/dBox
> function mousemove_handler(name, x, y) {
> 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));
> }
> function mouseexit_handler(name) { window.status = ""; }
> function mouseenter_handler(name) { window.status = ""; }
>
>
>
>
>
> // page initialization function
> function windowOnload() {
> main.initialize();
> reference.initialize();
> ms.setextent(34500,3800000,1080000,4650000);
> ms.zoomdir=1;
> ms.draw();
> }
>
> </script>
>
>
>
> </head>
> <body bgcolor=#000000 style="color: #ffffff;" onResize="main.sync
> ();reference.sync()">
> <link rel="stylesheet" type="text/css" href="hec.css"><body
> bgcolor=#FFFFFF onResize=" main.sync();reference.sync()">
>
> <center><h1>MapServer - Itasca Application</h1></center>
> <hr>
>
>
>
> <form name="map" onclick="ms.togglelayers(this)"
> style="margin-left:0;margin-bottom:0;margin-top:0;line-height:100%">
>
>
>
>
>
> <center>
> <table border=0 cellspacing=0 cellpadding=4>
> <tr>
> <td valign="top" align=center>
> <!-- <p class="main"><b>Legend:</b><br>-->
> <!--How you'd do a legend varies by browser. With some browsers that
> support dynamic image size you could
> handle like the scalebars. Otherwise you need to combine the select
> list above with pre-computed
> images or use a popup window.-->
> <!-- <img name="legend" src="graphics/red_pixel.gif">
> <hr>
> [legend]
> <hr>
> <br>-->
>
> <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="graphics/nw.gif" width="18" height="18" border="0" alt="pan
> northwest"></a></td>
> <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>
> <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>
> </tr>
> <tr>
> <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>
> <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="graphics/white_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="graphics/transparent_pixel.gif" height="600" width="600" onMouseOver=
> "mousemove_handler(name, x, y)"></DIV>
> </td>
> <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>
> </tr>
> <tr>
> <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>
> <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>
> <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>
> </tr>
> <tr><td bgcolor="#666666" colspan="3">
> <img name="scalebar_kilometers" align="right" title="scalebar (km)"
> alt="scalebar (km)" src="graphics/red_pixel.gif">
> <img name="scalebar_miles" title="scalebar (mi)" alt="scalebar (mi)"
> src="graphics/red_pixel.gif">
> </td></tr>
> </table>
> </td>
>
> <td valign="top" bgcolor=#000000>
> <table cellpadding="5" cellspacing="0" border="0" bgcolor="#000000">
> <tr><td>
>
>
> <p class="main"
> style="color:#00ee00;margin-left:6;margin-bottom:6;line-height:100%"><b>Map
> controls:</b></p>
> <ul id="tree-refimagemenu" class="checktree">
> <li id="show-refmap" class="last">Reference map
> <ul id="tree-refmap">
> <li class="last" >
> <!--this is the holding spot (the anchor) for the reference
> map-->
> <DIV id="reference_anchor" align="center" style="position:relative;
> visibility:visible; width:100%; height:100%;left:0px;
> top:5px;left:20px;margin-bottom:0;">
> <img src="graphics/white_pixel.gif" height="120" width="120"></DIV>
> <!-- absolutely positioned layer to hold the reference map-->
> <DIV id="reference" style="position:absolute; visibility:visible;
> width:100%; height:100%; clip:rect(100%,100%,100%,100%);
> background:transparent;">
> <img name="reference" src="graphics/reference.gif" height="120"
> width="120" border="1"></DIV>
> </li>
> </ul>
> </li>
> </ul>
> <ul id="tree-mapmodemenu" class="checktree">
> <li id="show-browse" class="last" style="cursor: move">Browse
> <ul id="tree-browse">
> <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>
> <li><input type="radio" name="act" onClick="
> ms.mode='map';ms.zoomdir=-1;" style="vertical-align: middle;">Zoom
> Out</li>
> <li><input type="radio" name="act" onClick="
> ms.mode='map';ms.zoomdir=0;" style="vertical-align: middle;">Center
> map</li>
> <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>
> <li class="last" id="show-zoomfactor"> Zoom
> factor
> <ul id="tree-zoomfactor">
> <li><input type="radio" name="zf"
> onclick="ms.zoomsize=1.071;">Low</li>
> <li><input type="radio" name="zf"
> onclick="ms.zoomsize=2;" checked>Normal</li>
> <li class="last"><input
> type="radio" name="zf" onclick=" ms.zoomsize=3.5;">High</li>
> </ul>
> </li>
> </ul>
> <li id="show-query" class="last" style="cursor: help">Query
> <ul id="tree-query">
> <p><b>Choose an Action: </b><br>
> <li> <input onClick="ms.mode='map'" type="radio" name="mode"
> checked> Browse map<br></li>
> <li> <input onClick="ms.mode='query'" type="radio" name="mode">
> Query feature<br></li>
> <li> <input onClick="ms.mode='nquery '" type="radio" name="mode">
> Query multiple features</li>
>
> <li>Search</li>
> <form name="texsearch">
> <select name="qlayer1">
> <option value="" selected>---Select---</option>
> <option value="cities">CITY</option>
> <option value="coast">COAST</option>
> <option value="roads">ROAD</option>
> </select><br>
> <input type="TEXT" size="12" style=" list-style-type:
> none;padding: 0;margin: 0;font: 11px verdana;vertical-align: middle;"
> name="qstring1" value="">
> <input type="TEXT" size="12" style=" list-style-type:
> none;padding: 0;margin: 0;font: 11px verdana;vertical-align: middle;"
> name="qstring2" value="">
> <br>
> <input type="button" value =search onclick="openWindow('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=%27+qlayer1.value+%27&myitem=%27+qlayer1.value+%27%2C%27+qstring1.value+%27&qstring=%27+qstring2.value+%27&map=%2Fms4w%2Fapps%2Fmapserv-demo%2Fitasca.map&program=%2Fcgi-bin%2Fmapserv.exe&mode=itemnquery&qitem=%27+qstring1.value+%27%27,500,400,%27yes%27%29;>
> ">
> </form>
>
> <br>
> </ul>
> </li>
> </ul>
>
> <ul id="tree-resizemenu" class="checktree">
> <li id="show-resize">Resize Window
> <select name="SizeWin">
> <option value="small">400 x 400</option>
> <option value="normal" selected>600 x 600</option>
> <option value="large">800 x 800</option>
> </select>
> </li>
> </ul>
>
>
>
> <hr border="1">
>
> <p class="main"
> style="color:#00ee00;margin-left:6;margin-bottom:6;line-height:100%"><b>Layer
> controls:</b></p>
> <ul id="tree-layermenu" class="checktree">
>
> <li id="show-geography">Geography<span id="count-geography"
> class="count"></span>
> <ul id="tree-geography">
> <li><input type="checkbox" value="cities" onclick="
> ms.togglelayers(this);" checked> Cities </li>
> <li><input type="checkbox" value="coast" onclick="
> ms.togglelayers(this);" checked> Coast </li>
> <li><input type="checkbox" value="geology" onclick="
> ms.togglelayers(this)" > Geology </li>
> </ul>
> </li>
> <li id="show-pop">Weather<span id="count-pop" class="count"></span>
> <ul id="tree-pop">
> <li><input type="checkbox" value="rain50" onclick="
> ms.togglelayers(this)" >Rain Contoors</li>
> <li><input type="checkbox" value="temp25" onclick="
> ms.togglelayers(this)" >Temp Contoors</li>
>
>
> </ul>
> </li>
> <li id="show-infra">Infrastructure<span id="count-infra"
> class="count"></span>
> <ul id="tree-infra">
> <li><input type="checkbox" value="roads" onclick="
> ms.togglelayers(this)" id="count-infra" checked> Roads</li>
> </ul>
> </li>
>
> <li id="show-grid" class="last">Grid<span id="count-grid"
> class="count"></span>
> <ul id="tree-grid">
> <li><input type="checkbox" value="grid" onclick="
> ms.togglelayers(this)" id="count-grid"> 5 deg gridlines</li>
> <li class="last"><input type="checkbox" value="grid1"
> onclick=" ms.togglelayers(this)" id="count-grid"> 1 deg gridlines</li>
> </ul>
> </li>
>
>
> </ul>
>
>
>
>
> </form>
>
> </select><br>
> <input type="button" value="Refresh Map" onClick="ms.draw()">
> <hr>
>
>
> <p><b>Legend:</b><br>
> <!-- How you'd do a legend varies by browser. With some browsers
> that support dynamic image size you could
> handle like the scalebars. Otherwise you need to combine the select
> list above with pre-computed
> images or use a popup window. -->
> <img name="legend" src="graphics/red_pixel.gif">
>
>
>
>
> <hr>
>
>
>
> <form>
> <input name="coordinates" id="coordinates" type="text" size=25 >
>
> </form>
>
>
>
> </td></tr></table>
>
> </td></tr>
> </table>
> </center>
>
> <p><hr>
>
>
>
> <p>
>
> <a href="javascript: top.location.href='index.html'">back to start</a><p>
> <script language="javascript">
> document.write("<i>" + args.map_web_template + "</i>");
> </script>
>
> </body></html>
>
> ------------------------------------------------------------------------------------------------------------------------------------------------------------------
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> On 7/17/07, Rodrigo Martín LÓPEZ GREGORIO <rodrigomlg at gmail.com> wrote:
> >
> > Hi Satish
> >
> > try this:
> >
> > <IMG name="main" src="graphics/transparent _pixel.gif" height="600"
> > width="600" onMouseOver="mousemove_handler(name, x, y)">
> >
> > I use the MouseOver event instead MouseMove.
> >
> > about the loading image what you must do is something like this:
> >
> > 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:
> >
> > <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; >
> >
> > 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:
> >
> > document.getElementById('loadingimage').style.display = '';
> >
> > and if there is a jBox function that handles the onload of the image
> > element you must add the next code to that function.
> >
> > document.getElementById ('loadingimage').style.display = 'none';
> >
> > 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:
> >
> > <IMG name="main" src="graphics/transparent _pixel.gif" height="600"
> > width="600" onMouseOver="mousemove_handler(name, x, y)" onLoad="
> > document.getElementById('loadingimage').style.display = 'none';">
> >
> > I hope you understand what I'm talking about but ask me again if you
> > can't get it working.
> >
> > Rodrigo.
> >
> > On 7/17/07, SATish In Athens +30 6947758275 < satsuman at gmail.com> wrote:
> > >
> > > I have tried with dBox..
> > >
> > >
> > > I put this in head..
> > >
> > > function mousemove_handler(name, x, y) {
> > > 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));
> > > }
> > >
> > >
> > >
> > > and this in body..
> > >
> > > <IMG name="main" src="graphics/transparent_pixel.gif" height="600"
> > > width="600" onMouseMove= "mousemove_handler(name, x, y)"
> > > onMouseOver="isCursorOver=true" onMouseOut="isCursorOver=false">
> > >
> > >
> > > But I am getting the co-ordinates value in co-ordinates box only when
> > > i click on the image...
> > > But, it should come as soon as I move my cursor on the image.
> > > I tried with installing a separate jBox but i dint get the image so i
> > > left.. :)
> > > Now, what to do?
> > >
> > >
> > > Well, and I am not able to configure things with my "waiting
> > > graphics".. Can some one explain that please..
> > >
> > > regards
> > > Satish
> > >
> > >
> > >
> > >
> > >
> > >
> > >
> > > On 7/17/07, Luis Treviño <ltrevinoh at gmail.com> wrote:
> > > >
> > > > you could try jBox. it's an applet that does what you want. Take a
> > > > look at http://mapserver.gis.umn.edu/docs/howto/jbox
> > > >
> > > > cheers,
> > > > Luis
> > > >
> > > >
> > > > 2007/7/16, SATish In Athens +30 6947758275 <satsuman at gmail.com>:
> > > > >
> > > > > Hello all..
> > > > > 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..
> > > > > secondly, i want to display one graphics image for "Please Wait ,
> > > > > map is loading" whenever map is refreshed..
> > > > > I do not know how to implement these features..
> > > > > your concern will be heavily appreciated..
> > > > >
> > > > >
> > > > >
> > > >
> > >
> >
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/mapserver-users/attachments/20070718/86f98c02/attachment.html
More information about the mapserver-users
mailing list