Example 2.3 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" /> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="600" align="center"> <tr> <td><h3 align="center">Example 2.3: Adding A Scalebar</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="3">Select Layers: <!-- SPECIFY VECTOR LAYERS --> <input type="checkbox" name="layer" value="states" [states_check] checked>State Boundaries&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> </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"> <table border="0" width="400" align="center"> <!-- DISPLAY THE SCALE BAR --> <tr><td align="right"><img src="[scalebar]"></td></tr> </table> </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.3