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 747x360 pixels gif called caligran.gif), then I resize the map to its small size (200x96 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.

The second file is ampliacion.php3 and its code looks like this:


<HTML>

<HEAD></HEAD>

<BODY bgcolor="#CCCCCC#">

<IMG SRC="zoom.php3?x=<? echo $mapa_x ?>&y=<? echo $mapa_y ?>">

</body>

</html>

Its function is to transmit the coordinates received from map.html to an interactive image called zoom.php3 and load it. Here, the coordinates are transmited by x and y variables.

The third file is zoom.php3 and it contains the code to generate the portion of map that you want to zoom. Here is the code:




<?php



Header( "Content-type: image/gif");

$bigmap=ImageCreateFromGif("caligran.gif");

$image_out=ImageCreate(200,96);

$factor=3.75;

$posx=floor($x*$factor-100);

$posy=floor($y*$factor-48);

$copia=ImageCopyResized($image_out, $bigmap, 0, 0, $posx, $posy, 200, 96, 200, 96);

ImageGif($image_out);

ImageDestroy($bigmap);

ImageDestroy($image_out);



?>

I'm suposing that the size of the zoomed portion of map is the same as the small map (200x96). Remember that the size of the big map is 747x360, then if you divide 360 by 96 (or 747 by 200) the zoom factor is approximately 3.75.

$posx and $posy are the start coordinates from the big map, they are calculated by multiplying $x and $y by the zoom factor and then they are moved to ensure that the place where the user clicks in the small map goes to the center of the zoom map.

It is very important to realize that you cannot put any HTML tags in this file. Also, there should not be any spaces or blank lines before or after the <? and ?> tags. If you are getting a broken image using this script, chances are you have a stray carriage return somewhere outside the PHP tags.

Remember that your PHP setup needs support from the GD library.

You can obtain the map files by clicking on next links:

Cali is the city where I live. Its long name is Santiago de Cali

You can optimize this method making it recursive and having several zoomings with more than 2 images, or have the small and big maps in the same file.

--Pablo