1) What Zoommap is design for?

This component show an image larger than the size of the browser window. It propose functionality to scroll and zoom the image.

It's specially design to visualize a map or a card. A printing function allow to show an image with the piece of the map visualize and some information attached to the image.

2) How to launch Zoommap?

This component is write in PHP4 for server side and JavaScript 1.2 for client side. PHP must include libgd and FreeFont only to use the printing functionality.

As you can see in the test page (test.php and test.html), to launch zoommap you must position some variables:

  • MAP : mandatory, filename of the image to show with the complete path.
  • SMALLMAP : mandatory, filename of the small image to show in the holder with the complete path. Use the test page to calculate the size of this image knowing the size of the big image to show.
  • MAPNAME : mandatory, name of the map, show as title of window and title for printing page.
  • INFO : optional, information to show in the printing page (\r\n for return)
  • TTF_FONT : optional,filename of ttf file (True Type Font file) with the complete path. The font is use in the printing page, default is tahoma.
  • TTF_SIZE : optional, size of the font in the printing page. Default is 20.
  • TITLECOLOR : optional, color of the title in the printing page. Use RGB Format in Hexadecimal (for example red = FF0000). Default is black (000000).
  • INFOCOLOR : optional, color of information in the printing page. Use RGB Format in Hexadecimal (for example red = FF0000). Default is black (000000).

3) How to position parameters of Zoommap?

In param.js some parameters can be sets:

  • gaugeColor : color of the gauge. Use RGB Format in Hexadecimal (for example red = FF0000).
  • bgGaugeColor : background color of the gauge Use RGB Format in Hexadecimal (for example red = FF0000).
  • gaugeText : text during the download, followed by the number and the size.
  • gaugeEndText : text when images are download just before showing the map.
  • printFunction : 'yes' or 'no' activate the printing function (need libgd and FreeFont).
  • holderFile : filename of the image representing the holder, it allow you to adapt this image to your site. But this image must respect some square areas, one rectangle coordinate (14,52)(152,154) to show the small image and other the icons must be in:
    - zoom + in (14,8)(31,24)
    - zoom - in (39,8)(57,24)
    - zoom initial in (64,8)(80,24)
    - printing in (91,8)(108,24)
    - close in (142,8)(154,20)
  • ringFile : filename of the image of the ring which show the position in the image. Must be 25x25.

4) How use the example, and how to implement the component?

Once you unzip the file zoommap.zip, you find the following files and directory:

  • zoommap/ : directory that contain the sources of the component. It contain the param.js which allow you to set your parameters as explain in §3. This directory must be copied into your site directory.
  • class.FastTemplate.php3 : use by the test.php file. This file is here only for the example.
  • mountain1600x1200.jpg and mountain138x103.jpg : image files used only for the test.
  • test.html : html template that contain the HTML for the test. This file contain some tags repared by {TAG}. These tags are replaced by test.php using FastTemplate.
  • test.php : the file to launch to see the example! It show test.html and replace every tags used to launch zoommap.

You can look to test.php to see how to set variables to launch zoommap.

This component developt by Antoine GEORGEVAIL is based on the very good example made by Bob Basque and Toby Folwick Map_with_scrollbox_Modem.htm.
It is based on the well known DynAPI2. My site show examples of use for this component, you can freely download every examples.