[Solved]-Image Mapping

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

[Solved]-Image Mapping

Post by Phorem »

Before i get screamed at, i already did a lot of searching and i have yet to find a solution. I am starting to think that imagemapping isn't possible in php. I know it must be so here it goes.

I have wrote this php script that takes information from a database and plots it on the screen. So, enter a city and it grabs all the zip codes, finds the long and lat of the point (information from the database) for a particular zip code and then plots that information on the png image. Now all i want to do is make the area where the zip code text to be a "Hot Spot" or i guess the right term would be an imagemap. Here is the code that works fine minus the image mapping part.

Code: Select all

<?php
$city = "somewhere";

// connection information
$hostName = "#######";
$userName = "#####";
$password = "#######";
$dbName = "#######";

// make connection to database
mysql_connect($hostName, $userName, $password) or die("Unable to connect to host $hostName");
mysql_select_db($dbName) or die("Unable to select database $dbName");

// Select all the fields in all the records from ZCTA
$query = "SELECT * FROM zcta WHERE city LIKE '%$city%'";
$result = mysql_query($query);
$number = mysql_num_rows($result);


//----Do the old classic IF statement
if ($number == 0) {
   print " - Sorry, there were no records matching that criteria. Please click the back button if you wish to continue.";
} else {

//----------------------------It's mapping time------------------------------\\

//Prepare some of the necessary values
$im = imagecreatefrompng("seattle2.png");
$white = imagecolorallocate ($im, 255,255,255);
$aldy = imagecolorallocate ($im, 34,73,128);
$black = imagecolorallocate ($im, 0,0,0);
$scale_x = imagesx($im);
$scale_y = imagesy($im);
$textcolor = imagecolorallocate($im, 234, 13, 13);

//----This is the most important part for getting the php script to "loop" the "query-->then grab-->then display" routine.
for($i=0; $i<$number; $i++){
        $zipcode = mysql_result($result,$i, "zip");
        $lat = mysql_result($result,$i, "lat");
        $lon = mysql_result($result,$i, "lon");
        $pt = getlocationcoords($lat, $lon, $scale_x, $scale_y);
        imagefilledrectangle($im,$pt["x"]-17,$pt["y"]-5,$pt["x"]+25,$pt["y"]+7,$aldy);
        imagestring($im,4,$pt["x"]-15,$pt["y"]-6,"$zipcode",$white);
        }
// **------------------------------------------------------------------------------------------------------**

//-----Copyright Label-----// off by Default
//imagestring($im,50,1,$scale_y-20,"###########",$black);
} //------Close up our IF statement

// Show the png image -_*-*_- Jpeg could be used as well
header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);

// Convert the lon/lat values into screen coordinates by taking all of that
// info above stored in cache and use to plot values and Labels in the right spot
function getlocationcoords($lat, $lon) {
        $x_min   = 0;  $x_max   = 1444;
        $y_min   = 0;  $y_max   = 1007;
        $lon_min = 120.47; $lon_max = 125.00;
        $lat_min = 46.11; $lat_max = 49.26;
        $x = $x_min + ($x_max - $x_min) *
                ( 0.99 - ($lon - $lon_min) / ($lon_max - $lon_min) );
        $y = $y_max - ($y_max - $y_min) *
                ( ($lat - $lat_min) / ($lat_max - $lat_min) );
        return array("x"=>round($x),"y"=>round($y));
        }

// Close the database connection
mysql_close();
// - Closed
//end
?>
So that works fine for plotting out the information on the png image. But what i really want, is to be able to make the text areas a hot spot. The annoying part is, the information is already in the php code, i just can't get it to imagemap a certain region. Any help would be great.

Thanks.
Last edited by Phorem on Tue Aug 09, 2005 8:19 pm, edited 1 time in total.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Image maps are an HTML thing, they have nothing to do with the image itself.

http://www.htmlgoodies.com/tutorials/im ... hp/3479741
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

Hi, thanks for the reply. I am very aware of what imagemaps are - and yes, i have used them in html a lot - but i was wondering if there was a way to imagemap the information i have in php. If no, is there a way to "post" the cooridnates to the html page - even though there are roughly a 4 entries per post and there is about a 1000 posts per page.

**Edit - I should also say, it's not the imagemap that is important. It doesn't have to be an imagemap. I just want the text that comes out to be a "link" - to more information in the database or a "hot spot".
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Of course you can create an image map in PHP. Just work out the area that the text you're drawing takes up (using imagettfbbox() or the equivalent for the image string function you're using) and write it out in an area element in the image map in the HTML.

It won't be particularly easy, but it's certainly possible.
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

I have ....

Code: Select all

imagefilledrectangle($im,$pt["x"]-17,$pt["y"]-5,$pt["x"]+25,$pt["y"]+7,$aldy);
I have that. It draws a rectangle around the text that is drawn on the screen. Now how would i make the text linkable. And worse yet, it would be impossible for me to write out each "hot spot" in php as there are thousands per page. The Line i posted above is actually in a loop routine. Which goes through A LOT of information.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

You can't do it in the image itself. That's simply not possible. Images define graphic things, there is no provision for hypertext in the format.

If you have the coordinates of all the boxes available then turning them into an image map would be easy. If you're concerned about having that many links in the HTML then you're going to have to rethink the way your interface works.

Or..

Don't define the image map on the client side. Have the image as an image form element that returns the x and y coordinates of where the user clicked as part of a form, and work out which box they clicked in on the server. That would be fairly quick, and not too hard to code. In fact, you could do it in SQL..

Code: Select all

select field from table where top > '$y' and bottom < '$y' and left < '$x' and right > '$x'
Of course, that assumes none of the boxes overlap.
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

If i may be so humble,
If you have the coordinates of all the boxes available then turning them into an image map would be easy.
how would i do that? Sorry for the hand holding, but i have already wasted weeks on this. :twisted:

I like the second option as well, but i want to see if your first suggestion would be easier for me.
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

Hi, i did finally figure out what i had to do. I actually ended up adding the

Code: Select all

<area poly="blah,blah href=""
to the loop and the rest to the html at the bottom of my file. I also figured out, that using " getlocationcoords_inv " i can click on an image and it tells me exactly where i clicked in Long. and Lat.

Now, my question is this, now that i can click on an image and it returns 2 values (in an array - Lat and Lon)

Code: Select all

<html>
<form name="form1" method="post" action="">
<input name="map"
type="image"
id="map"
src="picture.png">
</form>
Lon: <?php echo $pt[1];?>
<br>
Lat: <?php echo $pt[0];?>
</html>
I can make the clicks do a post to another php page using the action="my.php". BUT, how do i carry over the values i have just got back from my click on the map? Like, if i click on the map and it returns two values, 95.14 and 29.33 (for Lat and Lon), how would i "post" those values to the next php file so i can search my database? In other words, the Lat and Lon value will have a listing in the database.

I'm not having problems with any else. Just getting those 2 values to "post" to the next php file so i can query my database.

Thanks.
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

Nobody knows how to post data to another page??? :x
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

we've talked about posting data to another page far too much.. search around, you may find many..
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

Ya, well, i did obviously but i just couldn't find a way for it to work. :twisted:
Well, i finally did. Using the imagemap, i added

Code: Select all

?zip=$zipcode
to my href link and used it as a GET method to post to my query script. I added

Code: Select all

$postal_code=$_GET['zip'];
to my query.php script and now all is well. I guess after a lot of trial and error, i figured it out in the end. Thanks for the help anyway. :o
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

huh.. I found this pretty quick: viewtopic.php?t=30743
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

I know what you mean. But i don't think you understand. If i don't know what to search for - i mean like properly - then i will never find what i need. See (and i know it's obvious), i don't know how to code very well and i am still just learning. So, even if i did see what i needed, i probably wouldn't have known regardless. But after i saw an example of it being used, i understood how it worked. Even that post you provided wouldn't have done anything. It would have sent me on a tangent for a week that probably would have resulted in nothing as i really don't know what i am doing yet. Regardless, thank you for your help.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

sure thing.. I apologize a bit.. I get a bit jaded at times. We're all learning here, some more than others ;) :P
Phorem
Forum Newbie
Posts: 20
Joined: Sun Mar 06, 2005 3:58 am

Post by Phorem »

It's ok. I don't communicate my questions well. :?: 8O :D
Post Reply