Image Marking Script

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
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

Image Marking Script

Post by seodevhead »

Hey guys, I have a very popular paintball website where users can post what's called 'paintball reports'. They type-in which state and location they had a game at and they give details on the game, results, etc. I want to provide aerial images (which I already have) of the popular paintball outdoor courses and allow the visitor to click on the aerial image of their course and add little 'markers' showing where "kills" were made during the game.

Does anyone know how this can be done? The paintball reports system is in php/mysql. I just have no idea how I would go about making something like this interactive. Any advice would be greatly appreciated!!! Take care.
User avatar
trukfixer
Forum Contributor
Posts: 174
Joined: Fri May 21, 2004 3:14 pm
Location: Miami, Florida, USA

Post by trukfixer »

you can do it with javascript and an image map, submitting x,y co-ordinates for each point and then use GD to write whatever (color coded dots?) into a copy of the image.. javascript would note the click points into an array on the image map, and the submit button would send the data .. or if you wanted , you can also do it the more complex way, and just use teh image as a big submit button (using an image as a submit button, you will receive an x,y co-ordinate for the click) I can think of several ways to do it... but I'd say the first one would be optimal
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Using an image submit button is considerably simpler..

The form:

Code: Select all

<form action="index.php" method="POST">
<input type="image" name="pbm" src="paintballmap.jpg">
</form>
When a user clicks a point on the map it'll submit the form with pbm_x and pbm_y coordinates. You would put these into a database.

To display the map you'd use <img src="paintballmap.php"> .. paintballmap.php would consist of..

Code: Select all

//Stuff to get the x and y coordinates from the database as $result.

$i = imagecreatefromjpeg("paintballmap.jpg");
$color = imagecolorallocate($i,255,0,0);
while ($record = mysql_fetch_object($result)) {
  imagefilledellipse($i,$record->x,$record->y,4,4,$color);
}
header("Content-type: image/jpeg");
imagejpeg($i);
imagedestroy($i);
Obviously that would be a very basic map with just red dots all over it. It's pretty easy to take it further though, with names, or a key, or different colour dots..

If you look here: http://www.ooer.com/photowall/viewmap.php?map=london .. you'll see a similar system I wrote to generate a map of where users of a different forum are located.
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

Post by seodevhead »

oh man!! That is great onion2k! Thank you so much... I just have one more question for you...

How do I go about allowing the same visitor to select multiple points at once?

Thanks!! :)
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

seodevhead wrote:How do I go about allowing the same visitor to select multiple points at once?
At once .. can't be done in standard HTML.

If I were doing it I'd just give them a form with the image submit button and a proper submit button. When they click the image it submits, adds a location saved in their session or a temporary table, and gives them the form again .. when they click the proper submit button it saves everything to the database.
Post Reply