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.
|