Creating a x/y graph

[Shrapnel]

In the current game I'm playing, the map is basically a huge square and player town locations are marked by x/y coordinates.  I want to create a map in x/y graph form that plots the locations of members in my alliance.  Hovering over the plotted point should give information about the alliance member and clicking on it should take you to the profile of the alliance member.  I want to write my own code.  I don't want to use a library.  Libraries are quick and easy, but I like to write it myself so I know how to do it and so I am more familiar with the code and can change it.  I am not the developer of the game, I am a player creating a tool for my alliance members.  Thanks for any help.

[JGadrow]

An x/y graph of any kind is simply broken down into programming terms as 2-dimensional array.

Thus you have a construct like (written in PHP but nearly all programming languages support arrays):

Code: (php) [Select]

$map = array();

for ($x = 0; $x < 10; $x++)
{
    for ($y = 0; $y < 10; $y++)
    {
        $map [$x][$y] = sprintf ('Coord: %d, %d', $x, $y);
    }
}

print_r ($map);
Hope that helps you out. As far as getting the data, you'll likely need to CURL or something since you're not the game owner.

[Shrapnel]

Thanks for your response JGadrow.  What if I want a graphical map and I want the plotted points to scale? 

[JGadrow]

Regardless of what you want to store in the map, you still have to structure the data in some way. A coordinate map is usually best stored in arrays at some level. Personally, I'm a fan of OO, so I'd implement a Map class and it would probably have a 2D array of MapCell objects. Each MapCell would contain a bunch of CellLayer objects... and so on, and so on.

Basically, you could do something as simple as:

Code: (php) [Select]

$map [0][0] = 'image/001.jpg';
$map [0][1] = 'image/002.jpg';
$map [1][0] = 'image/003.jpg';
$map [1][1] = 'image/004.jpg';

echo '<table>
foreach ($map as $x => $row)
{
    echo '<tr>';
    foreach ($row as $y => $data)
    {
        echo '<td><img src="' . $data . "' alt="tile" /></td>';
    }
    echo '</tr>'
}
echo '</table>';
This will build you a 2x2 grid with images in each table cell. Now, a table may not ALWAYS be the best option for you (canvas will almost certainly be the proper object for map drawing once HTML5 is finished) but I used it here so that you could visualize the layout. And, you might also notice that this code builds the map with negative y coordinates. I could have built it so that it was akin to a traditional coordinate plane, but I think that's best left as an exercise for you.

*Edit - minor typographical error.

[Shrapnel]

Thanks this is helpful.  I thought about using a table, but some people advised against it.  My only concerns were if a table map would actually be to scale.  Each cell would have to be a set size right?  I should be able to control that though.  My HTML is rusty, but I think I can figure it out.

[JGadrow]

Yeah, the actual display of the data is going to be controlled by HTML / CSS. You can make it whatever size you want.