Example 2.5 HTML Template
<![CDATA[
<!-- 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" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table align="center" border="0"><tr>
<td> <h3 align="center">Example 2.5: Adding a Legend</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="600" border="0" align="center">
<tr>
<td>
<table width="400" border="1" align="center">
<tr>
<td colspan="4">Select Layers:
<!-- SPECIFY VECTOR LAYERS -->
<input type="checkbox" name="layer" value="states"
[states_check] checked>
State Boundaries
<input type="checkbox" name="layer" value="hydro"
[hydro_check]>
Water Features
<input type="checkbox" name="layer" value="roads"
[roads_check]>
Roads<br>
<!-- SPECIFY RASTER LAYERS -->
Select Background:
<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>
</select>
</td>
</tr>
<tr>
<td>
<!-- SPECIFY MAP MODE -->
<div align="center">Map Mode:<br>
<select name="mode">
<option value="browse" [browse_select]>Browse</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>
<!-- REFERENCE AND LEGEND COLUMN -->
<td rowspan="2" valign="top">
<p>Reference:<br>
<img name="ref" src="[ref]"></p>
<p>Legend:<br>
<img name="legend" src="[legend]"></p>
</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>
</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.5
|