[Mapserver-users] regarding msgbox and img.x img.y

Tue Jan 13 11:12:53 PST 2004

Hello, 

This 2 requests differ what in the first does the zoom after the user draged 
the box with the mouse , the second does not.
http://10.1.17.108/cgi-bin/mapserv?imgbox=181+235+339+360&imgxy=399.5+299.5& 
imgext=-117.124014+8.397005+-86.709056+38.851803&map=%2Fvar%2Fwww%2Fhtml%2Fm 
apdev%2Fmy.map&savequery=true&program=%2Fcgi-bin%2Fmapserv&map_web_imagepath 
=%2Fvar%2Fwww%2Fhtml%2Ftmp%2F&map_web_imageurl=%2Ftmp%2F&layer=enlaces&layer 
=emplazamientos&mode=browse&zoomdir=0&zoomsize=2
http://10.1.17.108/cgi-bin/mapserv?imgbox=181+235+339+360&imgxy=399.5+299.5& 
imgext=-117.124014+8.397005+-86.709056+38.851803&map=%2Fvar%2Fwww%2Fhtml%2Fm 
apdev%2Fmy.map&savequery=true&program=%2Fcgi-bin%2Fmapserv&map_web_imagepath 
=%2Fvar%2Fwww%2Fhtml%2Ftmp%2F&map_web_imageurl=%2Ftmp%2F&img.x=327&img.y=348 
&layer=enlaces&layer=emplazamientos&mode=browse&zoomdir=0&zoomsize=2 

I adapted a RBand.zip javascript source code to drag a box to zoom into, but 
it doesn't work. According to the rules, "imgbox" CGI variable is the first 
one in priority to evaluate but I think the "img.x" and "img.y" variables 
are still interfering to get the correct results. When I remove them, as in 
first request above, it works, but if I don't, the "img.x" and "img.y" 
variables generated by the user click (unavoidable, user clicks on the image 
to drag the box) are getting the priority and the result is a positioniong 
instead of zoom. 

Is there a way to remove "img.x" and "img.y" variables with javascript 
before the form is sent (even if click event is generated by draging the box 
over image) or is there any other way to fix this? 

Thanks in advance
Nikolai 

Below is the HTML with Javascript code:
<html>
<head>
<style>
#rubberBand {
  position: absolute;
  visibility: hidden;
  width: 0px; height: 0px;
  border: 1px solid #ff0000;
}
</style>
<script>
function startRubber (evt) {
  if (evt.clientX> 600) return;
  if (evt.clientX>  600) return;
  if (document.all) {
    var r = document.all.rubberBand;
    r.style.width = 0;
    r.style.height = 0;
    r.style.pixelLeft = event.x;
    r.style.pixelTop  = event.y;
    r.style.visibility = 'visible';
  }
  else if (document.getElementById) {
    var r = document.getElementById('rubberBand');
    r.style.width = 0;
    r.style.height = 0;
    r.style.left = evt.clientX + 'px';
    r.style.top = evt.clientY + 'px';
    r.style.visibility = 'visible';
  }
  else if (document.layers) {
    var r = document.rubberBand;
    r.clip.width = 0; r.clip.height = 0;
    r.left = evt.x;
    r.top = evt.y;
    r.visibility = 'show';
  }
  if (document.layers)
    document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = moveRubber;
}
function moveRubber (evt) {
  if (evt.clientX> 600) return;
  if (evt.clientY>  600) return;
  if (document.all) {
    var r = document.all.rubberBand;
    r.style.width = event.x - r.style.pixelLeft;
    r.style.height = event.y - r.style.pixelTop;
  }
  else if (document.getElementById) {
    var r = document.getElementById('rubberBand');
    r.style.width = evt.clientX - parseInt(r.style.left);
    r.style.height = evt.clientY - parseInt(r.style.top);
  }
  else if (document.layers) {
    var r = document.rubberBand;
    r.clip.width = evt.x - r.left;
    r.clip.height = evt.y - r.top;
    r.document.open();
    r.document.write('<TABLE WIDTH="' + r.clip.width + '" HEIGHT="' + 
r.clip.height + '" BORDER="1"><TR><TD><\/TD><\/TR><\/TABLE>');
    r.document.close();
  }
}
function stopRubber (evt) {
  if (evt.clientX> 600) return;
  if (evt.clientY>  600) return; 

  if (document.layers)
    document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
    var r = document.getElementById('rubberBand');
//	alert(r.style.width);
//    var input=document.getElementById('imgbox');
   var input=document.forms.mapform.imgbox;
//    alert(input);
   input.setAttribute('value',parseInt(r.style.left)+" 
"+parseInt(r.style.top)+" "+(parseInt(r.style.left)+parseInt(r.style.width)) 
+ " " + (parseInt(r.style.top) + parseInt(r.style.height)));
//    alert(document.forms.mapform.'img.y'.value);
//    document.forms.mapform.imgxy.setValue("");
}
document.onmousedown = startRubber;
document.onmouseup = stopRubber;
</script>
</head> 

<body bgcolor=#FFFFFF>
<div ID="rubberBand" width=600 height=600></div>
<form method=GET action="[program]" name="mapform">
<input type="hidden" name="imgbox" value="[imgbox]">
<input type="hidden" name="imgxy" value="399.5 299.5">
<input type="hidden" name="imgext" value="[mapext]">
<input type="hidden" name="map" value="[map]">
<input type="hidden" name="savequery" value="true">
<input type="hidden" name="program" value="[program]"> 

<input type="hidden" name="map_web_imagepath" value="[map_web_imagepath]">
<input type="hidden" name="map_web_imageurl" value="[map_web_imageurl]">
<center>
<table border=0 cellspacing=0 cellpadding=4 bgcolor="#000000">
<tr>
<td valign="top" align=center>
 <table cellpadding="0" cellspacing="0" border="0">
   <tr><td colspan="2"><input NAME="img" TYPE="image" SRC="[img]" width=600 
height=600 border=0></td></tr>
   <tr>
     <td> <font size=-1 face="arial,helvetica" 
color="#FFFFFF"><b>Powered by MapServer</b></font></td>
     <td align="right"><img src="[scalebar]"></td> 

   </tr>
 </table>
</td>
<td valign="top" bgcolor=#ffffff>
 <table cellpadding="5" cellspacing="0" border="0" bgcolor="#ffffff">
   <tr><td>
	<small>
	Capas:
	<input type="checkbox" name="layer" value="enlaces" [enlaces_check]> 
Enlaces (<img src="/transmap/images/green-line.gif">)
	<input type="checkbox" name="layer" value="emplazamientos" 
[emplazamientos_check]> Emplazamientos (<img 
src="/transmap/images/blue_dot.gif">)
	<br> 

	Mapa:
     <input type="radio" name="mode" value="browse" checked> Navegar
     <input type="radio" name="mode" value="query" > Consultar<br>
	Navegación:
     <input type=radio name=zoomdir value=1 [zoomdir_1_check]> Zoom In
     <input type=radio name=zoomdir value=0 [zoomdir_0_check]> Centrar
     <input type=radio name=zoomdir value=-1 [zoomdir_-1_check]> Zoom Out
     Magnitud del Zoom: <input type=text name=zoomsize size=2 
value=[zoomsize]> 

     <center><input type="submit" value="Refrescar"></center>
	</small>
     <center><input NAME="ref" TYPE="image" SRC="[ref]" border="0"></center>
    </form>
   <form action="/cgi-bin/empl-locate.pl">
   Emplazamiento: <input type=text name="emplazamiento" size=8 value="">
   <input type=submit value=" Buscar ">
   </form> 

   </td></tr></table> 

 </td></tr>
</table>
</center>
Escala actual: [scale]
</body></html>