### Example 4.1 HTML Template
    <!-- MapServer Template -->
    <html>
    <head>
    <title>MapServer Tutorial</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="/tutorial/ms.css" />

    <script language="JavaScript">
      var pansize = 0.75;

      function pan(direction) {
        var x, y;

        if(direction == 'n') {
          x = ([mapwidth]-1)/2.0;
          y = 0 - ([mapheight] * pansize)/2.0;
        } else if(direction == 'nw') {
          x = 0 - ([mapwidth] * pansize)/2.0;
          y = 0 - ([mapheight] * pansize)/2.0;
        } else if(direction == 'ne') {
          x = ([mapwidth]-1) + ([mapwidth] * pansize)/2.0;
          y = 0 - ([mapheight] * pansize)/2.0;
        } else if(direction == 's') {
          x = ([mapwidth]-1)/2.0;
          y = ([mapheight]-1) + ([mapheight] * pansize)/2.0;
        } else if(direction == 'sw') {
          x = 0 - ([mapwidth] * pansize)/2.0;
          y = ([mapheight]-1) + ([mapheight] * pansize)/2.0;
        } else if(direction == 'se') {
          x = ([mapwidth]-1) + ([mapwidth] * pansize)/2.0;
          y = ([mapheight]-1) + ([mapheight] * pansize)/2.0;
        } else if(direction == 'e') {
          x = ([mapwidth]-1) + ([mapwidth] * pansize)/2.0;
          y = ([mapheight]-1)/2.0;
        } else if(direction == 'w') {
          x = 0 - ([mapwidth] * pansize)/2.0;
          y = ([mapheight]-1)/2.0;
        }

        document.mapserv.zoom[3].selected = true; // force pan
        document.mapserv.imgxy.value = x + " " + y;
        document.mapserv.submit();
      }
    </script>

    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <h3 align="center">Example 4.1: JavaScript and Pan Control</h3>

    <!-- START OF MAPSERVER FORM -->
    <form name="mapserv" method=GET action="[program]">
    <input type="hidden" name="program" value="[program]">
    <input type="hidden" name="map_web" value="[map_web]">

    <table width="600" border="0" align="center">
      <tr>
        <td>
    	<table width="600" border="1">
    	  <tr>
    	    <td colspan="4">Select Layers:<br>
    <!-- SPECIFY VECTOR LAYERS -->
    	      <input type="checkbox" name="layer" value="states" [states_check]>
    	      State Boundaries&nbsp;
    	      <input type="checkbox" name="layer" value="counties" [counties_check]>
    	      County Boundaries&nbsp;
    	      <input type="checkbox" name="layer" value="cities" [cities_check]>
    	      Cities&nbsp;
    	      <input type="checkbox" name="layer" value="fedlands" [fedlands_check]>
    	      Federal/Indian Lands&nbsp;
    	      <input type="checkbox" name="layer" value="hydro" [hydro_check]>
    	      Water Features&nbsp;
    	      <input type="checkbox" name="layer" value="roads" [roads_check]>
    	      Roads<br>

    <!-- SPECIFY RASTER LAYERS -->
    	      Select Background:<br>
    	      <select name="layer">
    		<option value=" " [ _select]>No Background</option>
    		<option value="modis_nasa" [modis_nasa_select]>MODIS NASA WMS Service</option>
    		<option value="modis" [modis_select]>MODIS Surface Reflectance</option>
    		<option value="relief" [relief_select]>Shaded Relief</option>
    	      </select>
    	    </td>
    	  </tr>
    	  <tr>
    	    <td>

    <!-- SPECIFY MAP MODE -->
    	      <div align="center">Map Mode:<br>
    		<select name="mode">
    		  <option value="browse" [browse_select]>Browse </option>
    		  <option value="query" [query_select]>Query Single Layer</option>
    		  <option value="nquery" [nquery_select]>Query Multiple Layers</option>
    		</select>
    	      </div>
    	    </td>
    	    <td>
    <!-- FORM SUBMIT BUTTON -->
    	      <div align="center">
    		<input type="submit" value="Refresh">
    	      </div>
    	    </td>
    	    <td>
    <!-- ZOOM/PAN CONTROLS -->
    	      <div align="center">Map Control: <br>
                    <select name="zoom">
                      <option value="4" [zoom_4_select]>Zoom In 4x</option>
                      <option value="3" [zoom_3_select]>Zoom In 3x</option>
                      <option value="2" [zoom_2_select]>Zoom In 2x</option>
                      <option value="1" [zoom_1_select]>Recenter</option>
                      <option value="-2" [zoom_-2_select]>Zoom Out 2x</option>
                      <option value="-3" [zoom_-3_select]>Zoom Out 3x</option>
                      <option value="-4" [zoom_-4_select]>Zoom Out 4x</option>
                    </select>
                  </div>
    	    </td>
    <!-- REFERENCE AND LEGEND COLUMN -->
    	    <td rowspan="2" valign="top">
    	      <p>Reference:<br>
    		<img name="ref" src="[ref]"></p>
    	      <p>Legend:<br>
    		<img src="[legend]"> </p>
    	    </td>
    	  </tr>
    	  <tr>
    <!-- DISPLAY THE MAPSERVER-CREATED MAP IMAGE -->
    	    <td colspan="3" align="center" valign="top">
                  <table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#666666">
                    <tr>
                      <td align="right" width="18"><a href="javascript:pan('nw')"><img src="/tutorial/graphics/nw.gif" width="18" height="18" border="0" alt="pan northwest"></a></td>
                      <td align="center"><a href="javascript:pan('n')"><img src="/tutorial/graphics/n.gif" width="23" height="18" border="0" alt="pan north"></a></td>
                      <td align="left" width="18"><a href="javascript:pan('ne')"><img src="/tutorial/graphics/ne.gif" width="18" height="18" border="0" alt="pan northeast"></a></td>
                    </tr>
                    <tr>
                      <td align="right" width="18"><a href="javascript:pan('w')"><img src="/tutorial/graphics/w.gif" width="18" height="23" border="0" alt="pan west"></a></td>
                      <td align="center"><input type="image" name="img" src="[img]" width="[mapwidth]" height="[mapheight]" border="0" alt="this is the map"></td>
                      <td align="left" width="18"><a href="javascript:pan('e')"><img src="/tutorial/graphics/e.gif" width="18" height="23" border="0" alt="pan east"></a></td>
                    </tr>
                    <tr>
                      <td align="right" width="18"><a href="javascript:pan('sw')"><img src="/tutorial/graphics/sw.gif" width="18" height="18" border="0" alt="pan southwest"></a></td>
                      <td align="center"><a href="javascript:pan('s')"><img src="/tutorial/graphics/s.gif" width="23" height="18" border="0" alt="pan south"></a></td>
                      <td align="left" width="18"><a href="javascript:pan('se')"><img src="/tutorial/graphics/se.gif" width="18" height="18" border="0" alt="pan southeast"></a></td>
                    </tr>
                  </table>
    	    </td>
    	  </tr>
    	</table>
    	</td>
      </tr>
    </table>
    <!-- HIDDEN MAPSERVER CGI VARIABLES -->
    <input type="hidden" name="imgxy" value="[center]">
    <input type="hidden" name="imgext" value="[mapext]">
    <input type="hidden" name="map" value="[map]">
    <input type="hidden" name="savequery" value="true">
    </form>
    </body>
    </html>