panning and zoomin and out, and ect

Albert Anderson bart_doggers at YAHOO.COM
Tue Aug 1 07:12:12 PDT 2006


Hi,
  
   I tried that code.  I didnt get it to work.  Here is my  code.  Can you see if I need to do something else?  What else  do I need?
  </script>
  
  <!-- Panning Javascript here -->
  <script language="javascript" type="text/javascript">
    var mapheight = 417;
    var mapwidth = 309;
    var pansize = 0.75;
  
  function pan(direction) {
    var x,y;
    
   if(direction== 'n') {
     x = (309-1)/2.0;
     y = 0 - (417 * pansize)/2.0;
   } else if(direction== 'nw') {
     x = 0 - (309 * pansize)/2.0;
     y = 0 - (309 * pansize)/2.0;
   } else if(direction== 'ne') {
     x = (309-1) + (309 * pansize)/2.0;
     y = 0 - (417 * pansize)/2.0;
   } else if(direction== 's') {
     x = (309-1)/2.0;
     y = (417-1) + (417 * pansize)/2.0;
   } else if(direction== 'sw') {
     x = 0 - (309 * pansize)/2.0;
     y = (417-1) + (417 * pansize)/2.0;
   } else if(direction== 'se') {
     x = (309-1) + (309 * pansize)/2.0;
     y = (417-1) + (417 * pansize)/2.0;
   } else if(direction== 'e') {
     x = (309-1) + (309 * pansize)/2.0;
     y = (417-1)/2.0;
   } else if(direction== 'w') {
     x = 0 - (309 * pansize)/2.0;
     y = (417-1)/2.0;
      }
  
   document.mapserv.imgxy.value = x + " " + y;
   document.mapserv.submit();  
  }        
  
  </script>
  
   <TABLE width="368"
                                        HEIGHT="460"  BORDER="0" align="left" CELLPADDING="0" CELLSPACING="0">
  
                                          <TBODY>
                                             <TR>
                                               <TD width="29" height="23" ALIGN="left"
                                                 VALIGN="top"  BGCOLOR="#e7a500"><a href="javascript:pan('nw')"><img  src="../images/cornerarrow5.gif" alt="pan nw" width="25" height="25"  style="border-style:none"></a></TD>
                                               <TD ALIGN="center" BGCOLOR="#e7a500"
                                                 VALIGN="top"> <div  align="center"><a href="javascript:pan('n')"><img  src="../images/cornerarrow2.gif" alt="pan north" width="25" height="25"  style="border-style:none"></a></div></TD>
                                               <TD width="30" ALIGN="right"
                                                 VALIGN="top"  BGCOLOR="#e7a500"><a href="javascript:pan('ne')"><img  src="../images/cornerarrow6.gif" alt="pan ne" width="25" height="25"  style="border-style:none"></a></TD>
                                             </TR>
  
                                             <TR>
                                               <TD ALIGN="LEFT" BGCOLOR="#e7a500"
                                                 VALIGN="MIDDLE"><a  href="javascript:pan('w')"><img src="../images/cornerarrow1.gif"  alt="pan west" width="25" height="25"  style="border-style:none"></a></TD>
                                               <TD CLASS="mapappmidaln" ALIGN="center"
                                                 HEIGHT="413" VALIGN="MIDDLE"  WIDTH="309">
                                                  
  <!-- calling for map here -->
                                                 <input name="img" type="image" src="[img]" WIDTH="309" HEIGHT="417"  BORDER="1" /></TD>
                                               <TD ALIGN="right" BGCOLOR="#e7a500"
                                                 VALIGN="MIDDLE"><div  align="left"><a href="javascript:pan('e')"><img  src="../images/cornerarrow3.gif" alt="pan east" width="25" height="25"  style="border-style:none"></a></div></TD>
                                             </TR>
                                             <TR>
                                               <TD height="21" ALIGN="left"
                                                 VALIGN="bottom"  BGCOLOR="#e7a500"><a href="javascript:pan('sw')"><img  src="../images/cornerarrow8.gif" alt="pan sw" width="25" height="25"  style="border-style:none"></a></TD>
                                               <TD ALIGN="center" BGCOLOR="#e7a500"
                                                 VALIGN="bottom"> <div  align="center"><a href="javascript:pan('s')"><img  src="../images/cornerarrow3gif.gif" alt="pan south" width="25"  height="25"  style="border-style:none"></a></div></TD>
                                               <TD ALIGN="right" BGCOLOR="#e7a500"
                                                 VALIGN="bottom"><a  href="javascript:pan('se')"><img src="../images/cornerarrow7.gif"  alt="pan se" width="25" height="25"  style="border-style:none"></a></TD>
  </table>
  
  

Luis Treviño <ltrevinoh at GMAIL.COM> wrote:  

  2006/7/21, Albert Anderson <bart_doggers at yahoo.com>:    Hi,

 I figure out my images.  Does anyone have a  _java script for using a image for panning.  I have images set for  the corners of my map. I want to use them to pan.
   
  You can use something like this, you have to handle your width and height of your image:
  alto = height, ancho = width.
  function paneo(direccion,alto,ancho) {
  var x,y;
  var pansize = 0.75;
 if(direccion == 'n') {
   x = (ancho-1)/2.0;
   y = 0 - (alto * pansize)/2.0;
 } else if(direccion == 'nw') {
   x = 0 - (ancho * pansize)/2.0;  
   y = 0 - (ancho * pansize)/2.0;
 } else if(direccion == 'ne') {
   x = (ancho-1) + (ancho * pansize)/2.0;
   y = 0 - (alto * pansize)/2.0;
 } else if(direccion == 's') {
   x = (ancho-1)/2.0;
   y = (alto-1) + (alto * pansize)/2.0;  
 } else if(direccion == 'sw') {
   x = 0 - (ancho * pansize)/2.0;
   y = (alto-1) + (alto * pansize)/2.0;
 } else if(direccion == 'se') {
   x = (ancho-1) + (ancho * pansize)/2.0;
   y = (alto-1) + (alto * pansize)/2.0;  
 } else if(direccion == 'e') {
   x = (ancho-1) + (ancho * pansize)/2.0;
   y = (alto-1)/2.0;
 } else if(direccion == 'w') {
   x = 0 - (ancho * pansize)/2.0;
   y = (alto-1)/2.0;
    }
 document.mapserv.imgxy.value   = x + " " + y;
 document.mapserv.submit();   
}        
 

    Anyother question, is there a _java script for images to  zoom-in and out?
  you can use the zoomdir and the zoom values within your template, like:
  <input type="hidden" name="zoom" value="-2">
    <input type="hidden" name="zoomdir" value="-1">
  for a zoom out., so you can use radio buttons to manage this values
   
   

    One more question, I have a refresh button and pan radio button,  then we I click refresh to take a layer off it moves the projective  image. Why? But when I am on zoomin radio button and click refresh it  acts like its panning? Why?  

Thanks,
 
  Albert 

    __________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around 
  http://mail.yahoo.com 



  Hope this helps.
  
Regards,
  Luis
  

 		
---------------------------------
Yahoo! Messenger with Voice. Make PC-to-Phone Calls to the US (and 30+ countries) for 2¢/min or less.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/mapserver-users/attachments/20060801/b98bb9b9/attachment.htm>


More information about the MapServer-users mailing list