Example 4.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="[root]/ms.css" /> <script language="JavaScript"> var pansize = 0.67; function pan(direction) { var x, y; if(direction == 'n') { x = ([mapwidth]-1)/2.0; y = 0 - ([mapheight] * pansize)/2.0; } else if(direction == 'nw') { x = 0 - ([mapwidth] * pansize)/2.0; y = 0 - ([mapheight] * pansize)/2.0; } else if(direction == 'ne') { x = ([mapwidth]-1) + ([mapwidth] * pansize)/2.0; y = 0 - ([mapheight] * pansize)/2.0; } else if(direction == 's') { x = ([mapwidth]-1)/2.0; y = ([mapheight]-1) + ([mapheight] * pansize)/2.0; } else if(direction == 'sw') { x = 0 - ([mapwidth] * pansize)/2.0; y = ([mapheight]-1) + ([mapheight] * pansize)/2.0; } else if(direction == 'se') { x = ([mapwidth]-1) + ([mapwidth] * pansize)/2.0; y = ([mapheight]-1) + ([mapheight] * pansize)/2.0; } else if(direction == 'e') { x = ([mapwidth]-1) + ([mapwidth] * pansize)/2.0; y = ([mapheight]-1)/2.0; } else if(direction == 'w') { x = 0 - ([mapwidth] * pansize)/2.0; y = ([mapheight]-1)/2.0; } document.mapserv.mode[0].checked = true; // force browse document.mapserv.zoom[3].selected = true; // force pan document.mapserv.imgxy.value = x + " " + y; document.mapserv.submit(); } function setbox_handler(name, minx, miny, maxx, maxy) { document.mapserv.imgbox.value = minx + " " + miny + " " + maxx + " " + maxy; document.mapserv.imgxy.value = minx + " " + miny; // Additional code can go here prior to the form submit, below. // For example, form validation code. document.mapserv.submit(); } function seterror_handler(message) { alert(message); } </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <h3 align="center">Example 4.3: Java-based Rubber-band </h3> <!-- START OF MAPSERVER FORM --> <form name="mapserv" method=GET action="[program]"> <input type="hidden" name="root" value="[root]"> <input type="hidden" name="graphicsroot" value="[graphicsroot]"> <input type="hidden" name="program" value="[program]"> <input type="hidden" name="map_web" value="[map_web]"> <table width="600" border="0" align="center"> <tr> <td> <table width="600" border="1"> <tr> <td colspan="4">Select Layers:<br> <!-- 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:<br> <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" 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"> <table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#666666"> <tr> <td align="right" width="18"> <a href="javascript:pan('nw')"> <img src="[graphicsroot]/nw.gif" width="18" height="18" border="0" alt="pan northwest"> </a> </td> <td align="center"> <a href="javascript:pan('n')"> <img src="[graphicsroot]/n.gif" width="23" height="18" border="0" alt="pan north"> </a> </td> <td align="left" width="18"> <a href="javascript:pan('ne')"> <img src="[graphicsroot]/ne.gif" width="18" height="18" border="0" alt="pan northeast"> </a> </td> </tr> <tr> <td align="right" width="18"> <a href="javascript:pan('w')"> <img src="[graphicsroot]/w.gif" width="18" height="23" border="0" alt="pan west"> </a> </td> <td align="center"> <applet codebase="/tutorial/java/jBox" archive="jBoxPNG.jar,png.jar" code="jBoxPNG.class" width="400" height="300" name="jBox" MAYSCRIPT> <param name="image" value="http://[host][img]"> </applet> <!--<input type="image" name="img" src="[img]" width="[mapwidth]" height="[mapheight]" border="0" alt="this is the map"> --> </td> <td align="left" width="18"> <a href="javascript:pan('e')"> <img src="[graphicsroot]/e.gif" width="18" height="23" border="0" alt="pan east"> </a> </td> </tr> <tr> <td align="right" width="18"> <a href="javascript:pan('sw')"> <img src="[graphicsroot]/sw.gif" width="18" height="18" border="0" alt="pan southwest"> </a> </td> <td align="center"> <a href="javascript:pan('s')"> <img src="[graphicsroot]/s.gif" width="23" height="18" border="0" alt="pan south"> </a> </td> <td align="left" width="18"> <a href="javascript:pan('se')"> <img src="[graphicsroot]/se.gif" width="18" height="18" border="0" alt="pan southeast"> </a> </td> </tr> <tr> <td colspan="3" bgcolor="#ffffff"> <img src="[scalebar]" align="left"> <img src="[program]?map=[map]&mapext=[minx]+[miny]+[maxx]+[maxy]&map_scalebar=units+kilometers&mode=scalebar" align="right"> </td> </tr> </table> </td> </tr> </table> </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="imgbox" value="-1 -1 -1 -1"> <input type="hidden" name="savequery" value="true"> </form> <p class="Small" align="center"><a href="[root]/example4.map">View the MapFile</a> | <a href="[root]/example4-3_template.html">View the HTML Template</a></p> </p> <hr> <p class="Small" align="center"><a href="[root]/section3.html">Back to the Section 3</a> | <a href="[root]/sections.html">Back to the Sections Page</a> | <a href="[root]/section4.html"> Back to Section 4</a></p> </body> </html>