Example 2.1 HTML Template



<html>
<head>
<title>MapServer Workshop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="/tutorial/ms35.css" />
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="601" align="center">
<tr>
    <td width="593">
	<h3 align="center">Example 2.1: Zoom and Pan Controls</h3>

<!-- START OF MAPSERVER FORM -->
<form name="mapserv" method="GET" action="/cgi-bin/mapserv.exe">

<!-- HIDDEN MAPSERVER CGI VARIABLES -->
    <input type="hidden" name="map" value="[map]">
    <input type="hidden" name="imgext" value="[mapext]">
    <input type="hidden" name="imgxy" value="199.5 149.5">
<table width="400" border="0" align="center">
  <tr> 
    <td>
	<table width="400" border="1">
	  <tr> 
	    <td>

<!-- SPECIFY MAP MODE -->
	      <div align="center">Map Mode:<br>
		<select name="mode">
		  <option value="browse">Browse</option>
		  <option value="map">Map</option>
		</select>
	      </div>
	    </td>
	    <td>
<!-- FORM SUBMIT BUTTON -->
	      <div align="center">
		<input type="submit" name="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>
	  </tr>
	  <tr>
<!-- DISPLAY THE MAPSERVER-CREATED MAP IMAGE -->
	    <td colspan="3" align="center" valign="top">
	      <input type="image" name="img" src="[img]" width="400"
	       height="300" border="0">
	    </td>
	  </tr>
	</table>
    </td>
  </tr>
</table>
</form>
</td></tr>
</table>
</body>
</html>


The interesting part in this bit of code are the tags, i.e. [zoom_1_select]. When MapServ sees a tag like this, it will evaluate whether the value ("1") is selected or not. And if it is selected, MapServ will mark this option as "selected". Again, go to example 2.1 and "view" the code. The "Recenter" option should be "selected" (so that when we submit the form again, the value of "zoom" will be "1").

Our last tag is the "[img]" tag. As you'll notice it is part of the form's input object. The "[img]" will be replaced with the fullpath and name of the MapServ generated image.

Once MapServer has replaced all the tags, it will send a proper HTML form back to the browser. And the user will again be able to make changes.


Back to Example 2.1