#native_company# #native_desc#
#native_cta#

Interactive Image Maps

By Pablo Monroy D’Croz
on July 30, 2000

I’m working to develope a web-based Geographical Information System (GIS)
and one of the big problems I had was to write an easy algorithm to zoom a portion
of a map.
First of all I tried to use Server Side Maps, but I found that they need a
Perl script with too many lines of code. So I came to phpbuilder and found an
article from Rasmus Lerdorf : Creating
Dynamic Images with PHP
that shows how useful PHP and the GD library could
be for that purpose. Thanx Rasmus!
I’ll explain a method to zoom a portion of an image by using PHP and gif files.
The first step is to generate a map in its big size (in my example a 747×360
pixels gif called caligran.gif), then I resize the map to its small size
(200×96 gif called cali.gif). It’s very important to work with gif files
because GD library can manipulate only those image types.
We need three files to work besides the gif images. The first file called map.html
has the small map and its code is:

<HTML>

<HEAD></HEAD>

<BODY bgcolor="#CCCCCC#">

<FORM METHOD="POST" ACTION="ampliacion.php3">

<INPUT TYPE="IMAGE" SRC="cali.gif" NAME="mapa" BORDER="0">

</FORM>

</BODY>

</HTML>


The principal purpose of this file is to transmit the coordinates where the
user clicks on the small map.
Here, the most important tag is
<INPUT TYPE="IMAGE" .... >


On a browser that supports this tag, the image is displayed. Clicking
on any part of the image is equivalent to clicking on a Submit button. If
NAME


is mapa, the values mapa_x and
mapa_y are transmitted
to ampliacion.php3 through normal form and URL encoding. These two fields
contain the coordinates where the user clicked.