Page 1 of 1
(PHP) Map System
Posted: Fri Jul 27, 2012 7:42 pm
by vitinho444
Hello guys, this might be a re post, but i never got into map system on php..
I need not a map like tribal wars fully detailed and stuff, but i need at least a canvas, where i can mark a point with a color of my choice and with each player's village x and y.
I searched a lot for this, for hours really, and i found a javascript and canvas way, but i don't know how to put the player's village x and y on javascript since it's php...
If you got any good ideas please tell me, it's one of the few things that is left on my game/engine..
Re: (PHP) Map System
Posted: Mon Jul 30, 2012 5:50 am
by Winawer
Do you really need canvas for this? Seems like you could do this type of map with positioned divs.
Re: (PHP) Map System
Posted: Mon Jul 30, 2012 9:14 am
by vitinho444
Like what, do you got an idea?
Re: (PHP) Map System
Posted: Mon Jul 30, 2012 10:58 am
by Winawer
It really depends on your exact requirements.
For example, you could have a map div with a set width and height. Then you can query the villages visible on the map by knowing the viewed coordinates (you could have these as GET-variables, for example) with a simple
Code: Select all
$mapWidth = width of map div
$mapHeight = height of map div
$left = ceil( $_GET['x'] - $mapWidth / 2 ); //centering the coordinates
$right = $left + $mapWidth;
$top = ceil( $_GET['y'] - $mapHeight / 2 );
$bottom = $top + $mapHeight;
$query = "SELECT * FROM villages WHERE x>=$left AND x<=$right AND y>=$bottom AND y<=$top"
//etc.
Then to display the villages you could have something like
Code: Select all
<div id="map" style="width: <?php echo $mapWidth ?>px; height: <?php echo $mapHeight ?>px">
<?php
foreach( $villages as $key => $village ) {
$villageTop = $village->getY() - $top - 16; //16 is the village image height, $top is map's top edge from before
$villageLeft = $village->getX() - $left - 16; //16 is the village image width, $left is map's left edge from before
echo '<a class="village" href="view_village.php?id=', $village->getId(), '" style="top: ', $villageTop, 'px, left: ', $villageLeft, 'px"></a>';
}
?>
</div>
And of course you would need to add some styling, something like
Code: Select all
#map {
position: relative;
overflow: hidden;
}
.village {
position: absolute;
display: block;
width: 32px;
height: 32px;
background: url('village.png');
border: 0;
}
But this is only one way of doing it, if the map is small you could load it all at once (and maybe use a viewport div) or if you want some nice stuff like dragging and load-on-demand you could do stuff with Ajax.
Re: (PHP) Map System
Posted: Tue Jul 31, 2012 4:38 pm
by vitinho444
I added that code, some errors appeared, and as im not familiar with foreach here's how i made it:
Code: Select all
<html>
<head><link href="style.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<?php
$db = mysql_connect("localhost", "root", "");
mysql_select_db("vwdatabase", $db);
$x = 10;
$y = 10;
$mapWidth = 700;
$mapHeight = 700;
$left = ceil( $x - $mapWidth / 2 ); //centering the coordinates
$right = $left + $mapWidth;
$top = ceil( $y - $mapHeight / 2 );
$bottom = $top + $mapHeight;
$query = mysql_query("SELECT * FROM aldeias WHERE x>=$left AND x<=$right AND y>=$top AND y<=$bottom");
//etc.
?>
<div id="map" style="width: <?php echo $mapWidth; ?>px; height: <?php echo $mapHeight; ?>px">
<?php
while($village = mysql_fetch_assoc($query))
{
$villageTop = $village['y'] - $top - 16; //16 is the village image height, $top is map's top edge from before
$villageLeft = $village['x'] - $left - 16; //16 is the village image width, $left is map's left edge from before
echo "<a class='village' href='village.php?id=" . $village['id'] . "' style='top: " . $villageTop . "px, left: " . $villageLeft . "px'></a>";
}
?>
</div>
</html>
Still a error, i think all the villages are appearing in the same position...
Re: (PHP) Map System
Posted: Wed Aug 01, 2012 5:49 am
by Winawer
Check the villages' top and left values. If they're ok, the problem is probably in the CSS.
Re: (PHP) Map System
Posted: Wed Aug 01, 2012 9:53 am
by vitinho444
I echo'ed the x and y and they are not the same so its working,
the css is the same you told me:
#map {
position: relative;
overflow: hidden;
}
.village {
position: absolute;
display: block;
width: 32px;
height: 32px;
background: url('village.png');
border: 0;
}
i wrote that in the style.css
Re: (PHP) Map System
Posted: Wed Aug 01, 2012 10:23 am
by Winawer
Are you sure they're in the exact same position? Maybe you need $villageTop = ( $village['y'] - $top ) * 32 - 16 etc.?
Re: (PHP) Map System
Posted: Wed Aug 01, 2012 11:52 am
by vitinho444
Nop same thing :O
Re: (PHP) Map System
Posted: Wed Aug 01, 2012 1:46 pm
by Winawer
Do you have a live version anywhere so I can see what's going on?