A Stylized Map

For this example we're going to dynamically create a stylized map. The map of the area itself will already exist and we will use this as a starting point. We shall then create a series of separate images, each containing an icon that represents an attraction on our map. We can then combine the images to create a composite map, with icons highlighting any of the tourist attractions.

The code that we use in this example will not be database driven, but will have the coordinates hard-coded into the script. You can easily combine the techniques we use here with the techniques we covered in the previous example if you wish to make a dynamic version of this map.

Here's the map that we'll be dropping our icons onto:

On top of this image we want to draw what appears to be a pin stuck into the map:

We'll call these files island.jpg and pin.jpg respectively.

Copies of these files are included in the code download for this book, available from http://www.wrox.com. Alternatively, you can use your own images and modify the following code accordingly.

We simply open up both of our image files and use ImageCopyResized() to copy the pin into the map image, and place it where we want:

<?php
//map.php
Header("Content-type: image/jpeg");

$image = ImageCreateFromJPEG("island.jpg");
$icon = ImageCreateFromJPEG("pin.jpg");
$width = ImageSX($icon);
$height = ImageSY($icon);

ImageCopyResized($image,$icon,174,200,0,0,$width,$height,$width,$height);
ImageJPEG($image);
ImageDestroy($image);

?>

Note that we use three JPEG-specific functions here that are completely equivalent to the corresponding PNG functions we've used above. Only the names have been changed.

Two more functions that we haven't seen before, ImageSX() and ImageSY() return the width and height of the specified image respectively. We then use these values as width and height values for source and destination images in ImageCopyResized().

You'll notice straight away that there's a problem with the figure, as shown below. The white background of our pin image has been copied through as well as the pin itself, and has obscured part of the map.

What we need to be able to do is to specify certain areas or colors of the image as being transparent. The function ImageColorTransparent() does just that, and takes 2 arguments: an image identifier and a color identifier. The specified color is then marked as transparent. However, there's a problem - in this case, we know that we want white to be the transparent color, and we know how to create white with ImageColorAllocate(); but what if the background was purple? How would we know exactly what values to use when defining $purple?

It's actually quite simple: we use the ImageColorAt() function, which returns an image identifier for the color of a specific pixel in a specified image. ImageColorAt() requires an image identifier and x and y image coordinates for the pixel to use. We then use the returned color identifier to specify a transparent color in ImageColorTransparent():

<?php
//map.php
Header("Content-type: image/jpeg");

$image = ImageCreateFromJPEG("island.jpg");
$icon = ImageCreateFromJPEG("pin.jpg");
$trans = ImageColorAt($icon, 0, 0);
ImageColorTransparent($icon, $trans);
$width = ImageSX($icon);
$height = ImageSY($icon);

ImageCopyResized($image,$icon,174,200,0,0,$width,$height,$width,$height);
ImageJPEG($image);
ImageDestroy($image);

?>

Below is a portion of the result, which hasn't given us the results we expected:

Only some parts of the white have been made transparent. If you open up pin.jpg and zoom in on a portion of the white part of the image, you'll notice that the white is not actually pure white, but a mixture of very light colors with subtle variations in their RGB values.

Continued...