[Mapserver-users] Coding rubber band zoom box with Javascript]

[Eduardo Spremolla]

I use this:


<script language="JavaScript1.2" type="text/javascript">
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);

function trackMouse(e){
    Xpos=
(ie5)?event.x+window.document.body.scrollLeft:(ns6)?clientX=e.clientX+window.pageXOffset:false;
    Ypos=
(ie5)?event.y+window.document.body.scrollTop:(ns6)?clientY=e.clientY+window.pageYOffset:false;
	 if (down == 1){
	 	document.getElementById("marco").style.height=Ypos-y1;
		document.getElementById("marco").style.width=Xpos-x1;
		}
        window.status = "Xpos= "+ x1 +" "+ x2 + " Ypos= " + y1 +" "+y2;
}
function downMouse(){
	document.getElementById("plano").getAttribute('x1').value=Xpos-document.getElementById("plano").offsetLeft;
	document.getElementById("plano").getAttribute('y1').value=Ypos-document.getElementById("plano").offsetTop;
	document.getElementById("marco").style.top=Ypos;
	document.getElementById("marco").style.left=Xpos;
	document.getElementById("marco").style.height=1;
	document.getElementById("marco").style.width=1;
	document.getElementById("marco").style.visibility="visible";
	x1=Xpos;y1=Ypos;
	down=1;
}
function upMouse(){
	document.getElementById("plano").getAttribute('x2').value=Xpos-document.getElementById("plano").offsetLeft;
	document.getElementById("plano").getAttribute('y2').value=Ypos-document.getElementById("plano").offsetTop;
	x2=Xpos;y2=Ypos;
	down=0;
}
function init(){ down=0;x1=y1=x2=y2=0;
}

function zoomin(p){
if ( x1==0 && x2==0 && y1==0 && y2==0 )
	{
	return true;
	}
p.value="GO";
latS=document.getElementById("lat1").value;
latN=document.getElementById("lat2").value;
lonW=document.getElementById("lon1").value;
lonE=document.getElementById("lon2").value;
dlat=(latN-latS);
dlon=(lonE-lonW);
vsize=document.getElementById("plano").height-18-26;
hsize=document.getElementById("plano").width-70-6;
ofx=(document.getElementById("tabla").offsetLeft+2);
ofy=(document.getElementById("tabla").offsetTop+2);
dx=x2-x1;
dy=y2-y1;
if ( dx > dy ) {
	dy2=dx*vsize/hsize;
	y1=y1-(dy2-dy)/2;
	y2=y2+(dy2-dy)/2;
	}
else {
	dx2=dy*hsize/vsize; 
	x1=x1-(dx2-dx)/2;
	x2=x2+(dx2-dx)/2;
	}
lat2=latN-(y1-ofy-18)*dlat/vsize;
lat1=latN-(y2-ofy-18)*dlat/vsize;
lon1=(lonW-0)+(x1-ofx-70)*dlon/hsize;
lon2=(lonW-0)+(x2-ofx-70)*dlon/hsize;
document.getElementById("lat1").value=lat1;
document.getElementById("lat2").value=lat2;
document.getElementById("lon1").value=lon1;
document.getElementById("lon2").value=lon2;
}
document.onload= init();
document.onmousemove= trackMouse;
</script>

<FORM id="formu" METHOD="POST" ACTION="mapa.cgi">

<center><table id="tabla" BORDER=1 COLS=2 NOSAVE >
<tr NOSAVE>
<td  NOSAVE WIDTH="500">

<a  onMouseDown="downMouse()" onMouseUp="upMouse()">
<img src="grafica.cgi?lat1=$lat1&lat2=$lat2&lon1=$lon1&lon2=$lon2"
id="plano" x1="0" y1="0" x2="0" y2="0" >
<div id="marco" style="position:absolute;  top:1; left:1; width:1;
height: 1; z-index:2 visibility:hidden">
<img src="trans.gif" width="100%"; height="100%" border="2"
style="border-color:#ff0000" >
</div>
</a>

</td>
...
<INPUT TYPE="submit" NAME="orden" VALUE="ZOOM IN" 
onclick=zoomin(this);return false;>

......

trans.gif is a 1pix x 1ix transparent gif, I used first a transparent
png, and work OK on netscape but png support of ie is not OK.

By the way, the visibility style don't work, it is always visible.
That's why I put is at 1,1 with size 1x1 at first.

You click NW corner, drag and click SE corner, and then the ZOOM IN
button.

Hope you find it use full. 



On Tue, 2003-02-18 at 16:51, Hudspeth, Bill wrote:
> Does anyone have examples of code of how to construct a rubber band zoom box
> using only Javascript (and avoiding the Java applet)?
> 
> Thanks, Bill
> 
> *********************************************************************
> *********************************************************************
> William Hudspeth
> Earth Data Analysis Center
> 107 Bandelier Hall West
> University of New Mexico
> Albuquerque, NM  87131
> (505) 277-3622, ext. 238
> bhudspeth at edac.unm.edu
> wbhk at unm.edu
>