Example 2.1: Zoom and Pan Controls

Have a look at the mapfile:

As with the maps in section 1, we initialize our application by calling MapServ ("/cgi-bin/mapserv.exe?) and passing our mapfile path and other parameters ("map=/ms4w/apps/tutorial/htdocs/example2-1.map &mode=browse") to it. So this page has a link from the section 2 page that looks like this:

<a href="/cgi-bin/mapserv.exe?
            map=/ms4w/apps/tutorial/htdocs/example2-1.map
            &mode=browse&root=/tutorial&program=/cgi-bin/mapserv.exe
            &map_web=template+example2-1.html">
      Proceed to Example 2.1</a>

This time we use the "browse" mode instead of "map". Browse mode tells MapServ to create a map (an image) on our "/tmp/" directory. The image path and name is referenced by MapServ with the name "img". So, when MapServ parses our HTML template it will replace the "[img]" tag with the correct path to the image: /ms_tmp/EX2_171404728524137.png.

There are a few things you can do with this map. First, you can click on any part of the image and the map will refresh and have the point you clicked centered. This is panning. If you click on the "Map Control" drop box, you can select either "zoom in" or "zoom out" values. If you set it on, say "Zoom In 2x", and click on any part of the map, the map will then be refreshed, zoomed in, with the point you clicked centered. The opposite will happen if you zoom out. When either a "zoom in" or a "zoom out" value is selected and the "Refresh" button is clicked, the map will refresh and zoom in or zoom out from the center of the previous map. You can use the refresh button at any time to refresh the map.

The zoom/pan controls use internal MapServer CGI variables. This example shows how to use the "zoom" variable. The value of zoom determines how far to zoom in or out. If the value is "0", then MapServer recenters the image based on the user's mouse click. If the value is greater than "0", then the CGI program zooms in (the current scale of the map is multiplied by the zoom value). If it's a negative number, then the CGI program zooms out (divides the current scale by the zoom value). Other variables that can be used to control zoom and pan are "zoomdir" and "zoomsize". These two variables pretty much do the same thing that "zoom" does--"zoomdir" controls the zoom direction and "zoomsize" controls how far to zoom in or out. Please have a look at other examples in the MapServer gallery for other zoom/pan control alternatives.

Try changing the "Map Mode" from "Browse" to "Map". What happens when you click refresh? Remember that when we use "mode=map", MapServer returns a static map... It ignores the HTML template and just streams the map image directly to the browser.

It is still similar to the mapfiles in section one although more data layers have been added. I don't have anything new to explain about this mapfile but if you are curious about some new keywords, please consult the mapfile reference page.

Now, have a look at the HTML template file. You'll notice that is is essentially an HTML form that calls the MapServer CGI program. Because it is a form, you can use radio buttons and check boxes along with drop down boxes to implement your interface. Don't feel limited by this example--it's good to be creative. ;) Please have a look at the HTML template reference page for more information.

Back to Section 2 | Back to the Sections Page | Proceed to Example 2.2