Page 1 of 1

[Solved]-Image Mapping

Posted: Tue Aug 02, 2005 9:52 am
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.

Posted: Tue Aug 02, 2005 10:14 am
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

Posted: Tue Aug 02, 2005 10:17 am
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".

Posted: Tue Aug 02, 2005 10:22 am
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.

Posted: Tue Aug 02, 2005 10:26 am
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.

Posted: Tue Aug 02, 2005 11:04 am
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.

Posted: Tue Aug 02, 2005 11:26 am
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.

Posted: Mon Aug 08, 2005 12:14 pm
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.

Posted: Tue Aug 09, 2005 8:39 am
by Phorem
Nobody knows how to post data to another page??? :x

Posted: Tue Aug 09, 2005 8:55 am
by feyd
we've talked about posting data to another page far too much.. search around, you may find many..

Posted: Tue Aug 09, 2005 8:12 pm
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

Posted: Tue Aug 09, 2005 8:27 pm
by feyd
huh.. I found this pretty quick: viewtopic.php?t=30743

Posted: Tue Aug 09, 2005 8:34 pm
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.

Posted: Tue Aug 09, 2005 8:45 pm
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

Posted: Tue Aug 09, 2005 8:51 pm
by Phorem
It's ok. I don't communicate my questions well. :?: 8O :D