### Example 3.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="[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&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:
    	      <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>
            &lt;tr&gt;
              &lt;td&gt;[lrn]&lt;/td&gt;
              &lt;td&gt;[NAME]&lt;/td&gt;
              &lt;td&gt;[STATE]&lt;/td&gt;
            &lt;/tr&gt;
            </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="map_web_template" value="[map_web_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
         &map_web=template+example3-2.html">
      Proceed to Example 3.2</a></p>
    </body>
    </html>
Back to Example 3.1