SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can PHP accomplish this?

    Hello,

    I am currently building a small CMS, and needed some questions answered.

    The admin section has the option to submit a new "shout" to the front page. The first page of this process is relatively simple, just a few textboxes and a textarea (with editize built in). The second step would consiste of a 500x500 map of the area, and (i think) it should be an imap. What I want is for the submitter to click on the map, the coords. of that click stored in the DB, then when an end user view the map (at say map.php) there would be a 15x15 red square centered on the coords clicked on, and clicking those squares would open up the shout associated with it.


    Any ideas?
    Mike
    It's not who I am underneath, but what I do that defines me.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2001
    Location
    BC, Canada
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah it can... I dont knoe exactly how to do it off the top of my head, but I can point u in the direction.

    to get the co-ordinates where a user clicked. Make the map image a button. <input type=image> when a user clicks on it, the form is submited and passes on the co-ordinates where the user clicked.

    To put on a red square, save the co-oridinates, then use an image library like GD to pop on the red square.

    hope I helped a little

  3. #3
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, thats exactly what i planned on doing. I just have no idea how to do that, and make the red dots hyperlinks
    Mike
    It's not who I am underneath, but what I do that defines me.

  4. #4
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Naramation, I posted this in another thread too, Opps.
    Anyway i will do some digging and see if i can find any articles or similar to point you in the right direction!
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  5. #5
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone be more detailed in what my options are? thanks!
    Mike
    It's not who I am underneath, but what I do that defines me.

  6. #6
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any more help out there ??
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  7. #7
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I've looked in every corner of the net I can thinkof, and haven't figured out how to do this. To recap: I want someone to beable to click on an image (in an admin page) at a certain point, then it will load the CMS to add an entry (while passing on the coords of the click), then when the enrty form is submitted, when a user views the map (on an unsecure viewer page), the picture will have red dots/squares where the map has been clicked. Click on one those squares will popup a new window with the entry that went along with it.

    Anyone? Please? thanks,
    Mike
    It's not who I am underneath, but what I do that defines me.

  8. #8
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depending on how many red squares would be necessary, maybe it's best to make each image and then upload it. So if you only have four cities, then perhaps it's best to make four images and just upload the image via the CMS.

    (If that makes any sense. )
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    slighltywhacked is spot on. A quick search and I've found "PHP Draw", it can draw a filled rectangle (square) so the code is in there for that part. See: http://www.xpenguin.com/phpdraw.php

    Next, you feed whatever the "draw rectangle" function is the x/y of the mouse click, top/left -5, bot/right +5 and you've drawn a box.

    How to make it clickable?

    Simple, tell PHP to spit out an image map (client side is best) like this one: http://www.htmlgoodies.com/tutors/cs_imap.html

    put the x1,y1,x2,y2 values you used in the "draw rectangle" into the image map.

    All you store in the DB is the first "click", and build the map from that.

    hth,
    Douglas
    Hello World

  10. #10
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, are you sitting comfortably.....

    The file 'dbconnect.php' is just to establish a databsae connection. The table structure is

    Code:
    CREATE TABLE map_comments (
      id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
      comment VARCHAR(255) NOT NULL,
      x SMALLINT NOT NULL,
      y SMALLINT NOT NULL
    ) ;
    You need to create a .png image for your image source, mine is a map of Europe called 'europe.png'.

    The page that shows the map and box for a comment is:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Admin Page</title>
    </head>
    <body>
    <p>Tell us what you think about the great places in Europe</p>
    <p>To use the system, type in your comment and then click on the map.</p>
    <form action="addcomment.php" method="post">
    <p><textarea name="comment" cols="30" rows="5"></textarea></p>
    <p><input type="image" src="europe.png" border="0" width="460" height="400" alt=""></p>
    </form>
    </p>
    </body>
    </html>
    When submitted its calls the page 'addcomment.php', passing the comment and coordinates of the map click via 'POST':

    PHP Code:
    <?php

    require( "dbconnect.php" ) ;
    $sql "INSERT INTO map_comments SET comment = '" $_POST['comment'] . "', x = '" $_POST['x'] . "', y = '" $_POST['y'] . "'" ;
    mysql_query$sql) ;

    ?>
    The page that displays the map, along with a clickable imagemap is:

    PHP Code:
    <?php

    require( "dbconnect.php" ) ;

    $sql "SELECT id, x, y FROM map_comments" ;
    $result mysql_query$sql ) ;

    ?>
    <HTML>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Show Map</title>
    </head>
    <BODY>
    <p>Click on the squares to display the comments</p>
    <p>
    <MAP NAME="Europe">

    <?php

    while( $row mysql_fetch_assoc$result ) ) {
        
    $topx $row['x'] - ;
        
    $topy $row['y'] - ;
        
    $bottomx $row['x'] + ;
        
    $bottomy $row['y'] + ;
        
    ?>
        <AREA SHAPE="RECT" COORDS="<?php echo( "$topx,$topy,$bottomx,$bottomy) ; ?>" HREF="showcomment.php?id=<?php echo( $row['id'] ) ; ?>">
        <?php
    }
    ?>
    </MAP>
    <IMG SRC="drawmap.php" USEMAP="#Europe" ALT="Europe Map" BORDER="0">
    </p>
    </BODY>
    </HTML>
    The page that draws the map with the squares on is:

    PHP Code:
    <?php

    require( "dbconnect.php" ) ;

    $sql "SELECT x, y FROM map_comments" ;
    $result mysql_query$sql ) ;
    $image = @ImageCreateFromPNG"europe.png" ) ;
    Header ("Content-type: image/png") ;
    $colour ImageColorAllocate$image204000000 ) ;
    while( 
    $row mysql_fetch_assoc$result ) ) {
        
    ImageRectangle$image$row['x'] - 5$row['y'] - 5$row['x'] + 5$row['y'] + 5$colour ) ;
    }
    ImagePNG ($image) ;
    ImageDestroy ($image) ;

    ?>
    And lastly the page that shows the comment when you click on a square is:

    PHP Code:
    <?php

    require( "dbconnect.php" ) ;
    $sql "SELECT comment FROM map_comments WHERE id = " $_GET['id'] ;
    $result mysql_query$sql ) ;
    $comment mysql_result$result0) ;
    echo( 
    $comment ) ;

    ?>
    When I get home from work in a couple of hours I'll put up a world-viewable working example.
    Last edited by Mincer; Aug 19, 2002 at 10:48.

  11. #11
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, managed to quickly get a working example up. Sorry there is no navigation, but hey, what do you want.

    Index page for adding comments..

    http://www.tprhardware.com/matt/

    Page that shows the map with the squares on..

    http://www.tprhardware.com/matt/showmap.php

  12. #12
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks a lot Mincer! It helps me out completely!
    Mike
    It's not who I am underneath, but what I do that defines me.

  13. #13
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Mincer
    Ok, managed to quickly get a working example up.
    Yea, what I said

    nice code

    Douglas
    Hello World

  14. #14
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by DougBTX
    Yea, what I said
    But I didn't need to use external classes.

    Originally posted by DougBTX
    nice code
    Really? I think it sucks. There are problems and holes all over the place (what happens when you click less than 5px from the edge of the piccy? what happens when there are lots of clicks in the spame place? etc...), but it works as a base to develop on.

    Matt.

  15. #15
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Mincer
    But I didn't need to use external classes.
    Naa, its more because I don't have a clue how to use the GD libs and was looking for an example (OK, thats not totally true, I've seen one example now...)

    Yea, it should be templated too And on the map where you submit a comment, you should be able to see the old clicks. And you should see the comments on mouseover. An the clickable area is 1px too small, and... whatever

    Its not my project

    Douglas
    Hello World

  16. #16
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance that I can get this to work with a .jpg file? I have a 23lb jpg, but when I save it to .png, it skrockets to 400kb or more (I tried in many different progs)
    Mike
    It's not who I am underneath, but what I do that defines me.

  17. #17
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by naramation
    Any chance that I can get this to work with a .jpg file? I have a 23lb jpg, but when I save it to .png, it skrockets to 400kb or more (I tried in many different progs)
    The lines with // ****** are the ones you need to change.

    PHP Code:
    <?php 

    require( "dbconnect.php" ) ; 

    $sql "SELECT x, y FROM map_comments" 
    $result mysql_query$sql ) ; 
    $image = @ImageCreateFromJPG"europe.jpg" ) ; // ****** 
    Header ("Content-type: image/jpg") ; // ****** 
    $colour ImageColorAllocate$image204000000 ) ; 
    while( 
    $row mysql_fetch_assoc$result ) ) { 
        
    ImageRectangle$image$row['x'] - 5$row['y'] - 5$row['x'] + 5$row['y'] + 5$colour ) ; 

    ImageJPG ($image) ; // ******  
    ImageDestroy ($image) ; 

    ?>

  18. #18
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks Mincer
    Mike
    It's not who I am underneath, but what I do that defines me.

  19. #19
    Cult Space-Monkey Impulse's Avatar
    Join Date
    Jun 2002
    Location
    Calgary, AB
    Posts
    347
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by naramation
    I have a 23lb jpg
    Wow thats one heavy image... Can you lift 23 pounds mike? My actual question is what you're using this for... I'm interested - seeing how you suck at design, I could help you.
    kyle//at//retorikmedia//dot//com

  20. #20
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a satelite picture of a coast in England. Or a really high plane I'm doing this for a client. He provided me with a jpg, so I just wondered if it was swappable with a png.
    Mike
    It's not who I am underneath, but what I do that defines me.

  21. #21
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its an Aerial Photo, not a satellite image! It rocks on CD its so clear I can see my house really clearly!!
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  22. #22
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, I know, bringing up an old thread

    I tried this out today, but the x/y values are both always 0, no matter where I click. ny ideas what might be causing this?
    Mike
    It's not who I am underneath, but what I do that defines me.

  23. #23
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the code?

    Something to try is point the form at a new 'test' page, and just have:

    PHP Code:
    print '<pre>' ;
    print_r$_POST ) ;
    print 
    '</pre>' 
    You'll then be able to check that the form is passing the variables you expect.

  24. #24
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks Mincer, it prints this for the click:

    [I1_x] => 438
    [I1_y] => 141

    So I'll just use those variable names to insert into the DB
    Mike
    It's not who I am underneath, but what I do that defines me.

  25. #25
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And unfortuantly I cant get it to draw the red box

    With this code:

    PHP Code:
    <?php

    if(!isset($year)){
        
    $year date("Y");
        }
        else
        {
        
    $year $_GET["year"];
        }

    require( 
    "./content/dbconnect.inc" ) ;

    $sql "SELECT x, y FROM shouts WHERE year=$year;
    $result mysql_query$sql ) ;

    if (!
    $result) {
       echo 
    mysql_error();
       exit();
    }

    $image_size GetImageSize "map.jpg" );
    $imageWidth $image_size[0];
    $imageHeight $image_size[1];

    $image imageCreate$imageWidth$imageHeight );

    $colour ImageColorAllocate$image204,0,0);

    $im2 ImageCreateFromJPEG("map.jpg");
       if (!
    $img2)
       {
         echo 
    'error111';
       }

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

    while( 
    $row mysql_fetch_assoc$result ) ) {
        
    ImageRectangle$image$row['x'] - 3$row['y'] - 3$row['x'] + 3$row['y'] + 3$colour ) ;
    }

    ImageCopy ($image,$im2,0,0,0,0$imageWidth$imageHeight);
    ImageDestroy ($im2);

    ImageJPEG ($image) ;
    ImageDestroy ($image) ;

    ?>
    Mike
    It's not who I am underneath, but what I do that defines me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •