[mapserver-users] zoom box in JavaScript (not Java)

[Dan Barron]

The javascript to do this is really pretty straight forward.  In a nutshell 
this is all you should need to know.

<script language="JavaScript">

function adjustZoom( zoomVal ) {
   var zoom = document.getElementById("Zoom");
  document.mapform.zoom.value = zoomVal;
}

</script>

<form id="mapform" name="mapform" method="post" action="doMap" >

   <input type="hidden" name="Zoom" id="Zoom" value="0">

   ...//inputs for you map interface form

   // some input gifs arranged nicely like the stack you see in the kodak page
   <input type="image"  src="images/zoom1.gif" onclick="adjustZoom( 1 );" 
alt="Zoom Factor 1">
   <input type="image"  src="images/zoom2.gif" onclick="adjustZoom( 2 );" 
alt="Zoom Factor 1">
   <input type="image"  src="images/zoom3.gif" onclick="adjustZoom( 3 );" 
alt="Zoom Factor 1">

   ...//the rest of your input fields for your map interface form

</form>

now each time you press a zoom image, the value of the hidden input named 
"Zoom" will change to the desired zoom level and gets passed to the form 
action.  I'm sure there are other more creative ways to make this happen 
too.  Our map interface is entirely done in javascript w/ a flash zoom 
factor bar - you can view it at www.destinationdive.com - login to the demo 
account, go to the dive sites menu and select "Interactive Map Interface".

Dan


At 11:18 AM 9/28/2002 -0600, Alex Rice wrote:
>[reposting on mapserver-users, -dev is for mapserver internals discussion 
>-- alex]
>
>On Friday, September 27, 2002, at 12:39  PM, Brent Fraser wrote:
>
>>Hey,
>>
>>   Does anyone know how http://kei.kodak.com/HTMLMap.asp can use 
>> JavaScript to do a zoom box?
>>
>>I thought JavaScript was too limited draw lines on an image and we were 
>>stuck using Java.
>>
>>I'm jealous.
>
>Nope, javascript can be used. However it's heavy on the CSS and DHTML 
>stuff-- you might run into browser compatibility issues. No more so than 
>trying to run a Java applet though.
>
>I've been playing around with some free Javascript I found at esri.com. 
>But  haven't been able to make it do exactly what I want it to do. It 
>seems to want to be in a frameset with all drawing starting at 0,0. It 
>would be great if mapserver came with some HTML templates and javascript 
>helper functions like this!
>
>Here is the readme
>
>""ZoomBox
>
>What is it?
>This is a sample of the ZoomBox used in the ArcIMS HTML Viewer.
>This sample contains the functions used to create and manipulate
>the "rubberband" box on the map display. Some of these functions
>have been stripped of any additional routines or variables not
>needed for demonstrating the ZoomBox capabilities.
>
>How to start it:
>Load ZoomBox.htm in a browser (version 4 or newer). Press down on
>the left mouse button and drag (move the mouse with the button
>pressed). The ZoomBox should appear and the box coordinates will
>display in the Status Bar. Let up on the button and the ZoomBox
>will disappear.""
>
>See HTML ZoomBox Demo  @
>http://support.esri.com/products/downloads/default.asp?p=6
>
>
>
>Alex Rice, Software Developer
>Architectural Research Consultants, Inc.
>alrice at swcp.com
>alex_rice at arc.to