3.2. Interactive Map and Browse Model#
The map above is in
map Generated in mode. It is a static map
(nothing changes when you click).
But open the map below and you can use mouse clicks to interoperate.
http://webgis.pub / cgi-bin/mapserv?map=/owg/mdc1.map&layer=states_line&layer=topo&mode=browse
Submit CGI variables using Post form#
Previously, you put all the parameters needed by MapServer in URL, which is the way to use parameters explicitly, but it can cause the URL to become very long.
Another way is to use a form to submit parameters. Here is a form:
This part of the code is as follows
<form method=POST action="/cgi-bin/mapserv"> <input type="submit" value="Use forms to generate maps"> <input type="hidden" name="map" value="/owg/mfc1.map"> <input type="hidden" name="layer" value="modis"> <input type="hidden" name="layer" value="states_line"> </form> <IMG SRC="[img]" width=400 height=300 border=0>
With POST submission, the parameters need to be placed in the form.
Mapfile and template file description#
Now, take a look at Mapfile:
1MAP 2 NAME "mapv19" 3 IMAGETYPE "PNG24" 4 EXTENT -180 -90 180 90 5 SIZE 600 300 6 SHAPEPATH "/gdata" 7 SYMBOLSET "../symbols/symbols35.sym" 8 FONTSET "../fonts/fonts.list" 9 IMAGECOLOR 255 255 255 10 WEB 11 TEMPLATE "tmpl-pan.html" 12 IMAGEPATH "/owg/ms_tmp/" 13 IMAGEURL "/ms_tmp/" 14 END 15 LAYER 16 NAME "topo" 17 DATA "land_shallow_topo_8192.tif" 18 STATUS OFF 19 TYPE RASTER 20 PROCESSING "BANDS=1,2,3" 21 OFFSITE 71 74 65 22 END 23 LAYER 24 NAME "states_line" 25 DATA "wcountry.shp" 26 STATUS OFF 27 TYPE LINE 28 CLASS 29 NAME "State Boundary" 30 STYLE 31 SYMBOL "line5" 32 COLOR 255 255 0 33 SIZE 1 34 END 35 END 36 END 37END
Compared to static maps, only the following line is actually added to Mapfile:
This tells MapServer to use the page
example1-9.html as the template
file. MapServer will process this file and replace the tags it
encounters before sending it to the web browser. This is the mechanism
by which MapServer implements dynamic pages.
The above code snippet defines the parameters of the Web object,
starting with the keyword
WEB and ending with the keyword
WEB object tells the map server the name of the HTML template
file (in this case, only one, named
example1-9.html ), the paths to
the images to create, and the URLs to point to those images. As before,
IMAGEPATH specifies the path to images created by MapServer. In this
case you use absolute paths, but you can also use relative paths from
the location of the mapfile. Note that you cannot remove the leading or
/ from the IMAGEURL. The string defined by IMAGEURL is
appended to the base URL (ie, http://localhost ) to generate the URL for
the image rendered on the page.
Note that if you’re not sure about the importance of
/, or what
DocumentRoot is, you can look it up at
In the template file, in addition to the HTML text content, the key is the form code block within this page (right-click on your browser page and select “View Source” or something similar):
Now, let’s build an interactive interface for our application.
The following shows the use of a form for submission, with various parameters passed through the input control.
<!-- START OF MAPSERVER FORM --> <form name="mapserv" method="GET" action="/cgi-bin/mapserv"> <input type="hidden" name="root" value="/owg">
Each time the user clicks the map, this block executes the MapServer CGI
/cgi-bin/mapserv ). The program here can be defined using
<input type="hidden" name="program" value="/cgi-bin/mapserv">
The following two variables are user-defined variables. If it finds the
correct tag within square brackets
, MapServer will pass its value
to the HTML template.
layer Variables are MapServer internal variables. They
are required for MapServer mapping applications.
<!-- 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"> <input type="hidden" name="zoom" value="1"> <input type="hidden" name="mode" value="browse"> <div align="center"> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td> <!-- THE INTERACTIVE, DYNAMICALLY CREATED MAP -- <input type="image" name="img" src="[img]" width="400" height="300"> </td> </tr> </table> </div> </form>
map_web_template variable will replace the TEMPLATE parameter in
the WEB object in the Mapfile.
The map is actually in another form.
input Using the following code
<input type="image" name="img" src="[img]" width="400" height="300">
The items in square brackets (
[mapext] , and
are so-called MapServer tags - these are MapServer CGI variables, which
are MapServer CGI program for assignment. The label
[map] is a
placeholder for the Mapfile path, so when MapServer runs, it will be
"/owg/mfc1.map" . The label
[mapext] will be
replaced with the current map extent, which will change as you click on
the map; The
[img] tag will be replaced with the path to the image
created by the MapServer CGI program, and the name will be passed to the
client after MapServer renders the image on the server side. On the
server, the path
/owg/ms_tmp/ ) must exist and have
appropriate permissions. You can check to see if the image exists (on
the server) under the
/owg/ms_tmp/ ) path in
Note that the above call also has a hidden variable
"mode" with the
"browse"", which tells MapServer to create and store images in
tmp directory. Then, this Images are referenced as
which is what you see in the browser.
Requirements for MapServer template files#
The MapServer template file must contain the specific string
mapserver template on the first line, usually given in the form of
HTML, JavasSript or XML comments. This line is not passed to the client.
This particular string is not case sensitive.
MapServer’s template file name suffix is limited. The available suffixes
All CGI parameters can replace references, MapServer specific parameters, and user-defined parameters in the template. In principle, parameters are passed directly by MapServer without any processing. This feature is critical to implementing MapServer applications.
The following reference lists only the template placeholder-specific strings needed to obtain information about MapServer modifications, such as new scale bars, query results, and so on.
The placeholder string for the template is case-sensitive.
The property item substitution must be the same as the item name in the dbase file.
ArcView and ArcInfo usually generate dbase files with project names all
in uppercase. When the template is URL, apply the appropriate URL
encoding (that is,
' ' To
Some placeholder strings can also be provided in escaped form, such as URL encoding.
In HTML files, attribute values can be enclosed in quotation marks
""). Writing property values within quotes allows you to set
special characters that the value does not normally use (such as:
", and spaces. To write single quotes within the property
value, only Use two quotation marks (