Example 1.9: Interactive Maps and the Browse Mode

The map above was created in "map" mode. It is a static map (it doesn't change when you click on it).

This dynamic map is being generated in "browse" mode. Click on any point on the map and see what happens.

Both of these maps use the same mapfile definitions. The difference is that the second map (the dynamically created one) relies on HTML form for interactivity. If you look at how this page is linked from the previous page, you'll see that it isn't the same as the previous examples. This page is what's called, in MapServer terms, an HTML template. You will learn more about HTML templates in section 2.

have a look at the "form" block within this page (right click on your browser and select "view source" or something similar):

        <!-- START OF MAPSERVER FORM -->
        <form name="mapserv" method="GET" action="/cgi-bin/mapserv">
          <!-- 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>

This block executes the MapServer CGI program ("/cgi-bin/mapserv") each time a user clicks on the map. The map is actually another form "input", represented here by the line:

<input type="image" name="img" src="[img]" width="400" height="300">

The items in square brackets ([map], [mapext], and [img]) are what's known as MapServer tags--these are MapServer CGI variables and they get replaced by the MapServer CGI program when it reloads. The tag [map] is a placeholder for the mapfile path so it's replaced with "/mapserver/apps/tutorial/htdocs/example1-9.map" when MapServer runs. The tag [mapext] is replaced with the current map extent, "165660.954849 -371954.000000 1506409.045151 632767.000000", and the [img] tag is replaced with the path to the image the MapServer CGI program creates, "/ms_tmp/EX1.9_17321865601704994.png". Go ahead check the IMAGEPATH (/ms4w/tmp/) for the existence of this image.

The hidden variable "mode" with the value "browse" tells the CGI program that it needs to create and dump an image in the "tmp" directory. This image is then referenced as [img] and this is what you see on your browser.

Now, have a look at the mapfile:

There's really only one thing that's been added to the mapfile:

TEMPLATE 'example1-9.html'

This tells MapServer to use the page "example1-9.html" as a template file. MapServer will process this file and replace the tags it encounters before sending it to the web browser. This is how the next two sections in this tutorial works.

This marks the end of Section 1. I hope you leave this section with enough knowledge on how things are set in a MapServer MapFile. I can't stress enough the importance of keeping the MapServer MapFile Reference open as you create your own mapfile and application. Without it, I wouldn't have gone very far with this tutorial.

Back to Example 1.8 | Back to Section 1 | Back to the Sections Page | Proceed to Section 2