Cursor position
Fawcett, David
David.Fawcett at STATE.MN.US
Tue Jul 17 09:34:20 EDT 2007
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 © 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='+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');> ">
</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 <mailto: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/20070717/e8d1dd89/attachment.html
More information about the mapserver-users
mailing list