Cursor position
SATish ...
satsuman at GMAIL.COM
Tue Jul 17 09:19:00 EDT 2007
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');
">
</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/20070717/31e93431/attachment.html
More information about the mapserver-users
mailing list