Example 3.1 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="[root]/ms.css" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h3 align="center">Example 3.1: Class-level Query Templates</h3>
<!-- START OF MAPSERVER FORM -->
<form name="mapserv" method="GET" action="[program]">
<table width="680" border="0" align="center">
<tr>
<td>
<table width="600" border="1" align="center">
<tr>
<td colspan="4">Select Layers:
<!-- SPECIFY VECTOR LAYERS -->
<input type="checkbox" name="layer" value="states"
[states_check]>State Boundaries
<input type="checkbox" name="layer" value="counties"
[counties_check]>County Boundaries
<input type="checkbox" name="layer" value="cities"
[cities_check]>Cities
<input type="checkbox" name="layer" value="fedlands"
[fedlands_check]>Federal/Indian Lands
<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>
<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" 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="0" [zoom_0_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">
<input type="image" name="img" src="[img]" width="[mapwidth]"
height="[mapheight]" border="0" alt="This is the map">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr>
<p>Check the "Cities" layer and click on the "Refresh" button. The map
will refresh and the Cities layer should now be displayed. Change the
Map Mode to "Query Single Layer" or "Query Multiple Layers" then click
on one of the cities.
</p>
<p>You've just performed a non-spatial query. The result might not make
any sense but there is a result. We will format the query results in
the next two exercises but for now we'll look at the changes we added to
the mapfile and the HTML template.
<p>
<p>Here's what the cities layer looks like (with some comments removed):
<pre>
LAYER # Urban areas polygon layer begins here
NAME cities_poly
GROUP cities
TYPE Polygon
STATUS on
DATA urban_ugl
# The keyword TOLERANCE provides a measure of sensitivity for point-based
# queries. In this example, a mouse-click will have a radius of 3 pixels.
# TOLERANCE has and associated keyword, TOLERANCEUNITS. When TOLERANCEUNITS
# isn't defined, MapServer assumes the units to be pixels.
TOLERANCE 3
CLASS
NAME 'Urban Areas'
# The TEMPLATE keyword within a CLASS object is used to define the
# HTML query template to use in displaying database records when the
# query or nquery mode in MapServer is invoked.
TEMPLATE '../templates/cities_query.html'
STYLE
COLOR 255 240 115
END
END # CLASS
PROJECTION
"init=epsg:4326"
END
END # Urban areas polygon layer ends here
</pre>
As you can see, we only added two parameters on the mapfile--TOLERANCE,
within the cities_poly layer, and TEMPLATE, within the CLASS object of
the cities_poly layer.
</p>
<p>And here's what the Query TEMPLATE, cities_query.html, looks like:
<pre>
<tr>
<td>[lrn]</td>
<td>[NAME]</td>
<td>[STATE]</td>
</tr>
</pre>
Note that it looks just like a fragment of an HTML table. The "[NAME]"
and "[STATE]" MapServer tags are actually attributes from urban_ugl.dbf
which is the non-spatial database associated with out shapefile. When
defining shapefile attributes in MapServer, we always capitalize the
names (this is true on shapefile but isn't true in all cases). We've
also used this before when we defined CLASSITEM and LABELITEM in section
1. The other tag, "[lrn]", is another internal MapServer variable that
displays the result count within a layer.
</p>
<p align="center"><a href="[root]/example3.map">View the MapFile</a> |
<a href="[root]/example3-1_template.html">View the HTML Template</a>
</p>
</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="root" value="[root]">
<input type="hidden" name="program" value="[program]">
<input type="hidden" name="template" value="[template]">
</form>
<hr>
<p class="Small" align="center">
<a href="[root]/section2.html">Back to Section 2</a> |
<a href="[root]/sections.html">Back to the Sections Page</a> |
<a href="/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/example3.map
&layer=states&mode=browse&root=/tutorial&program=/cgi-bin/mapserv.exe
&template=example3-2.html">
Proceed to Example 3.2</a></p>
</body>
</html>
]]>
Back to Example 3.1
|