(PHP) Map System
- vitinho444
- Posts: 2819
- Joined: Mon Mar 21, 2011 4:54 pm
(PHP) Map System
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..
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
Do you really need canvas for this? Seems like you could do this type of map with positioned divs.
- vitinho444
- Posts: 2819
- Joined: Mon Mar 21, 2011 4:54 pm
Re: (PHP) Map System
Like what, do you got an idea?
Re: (PHP) Map System
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
Then to display the villages you could have something like
And of course you would need to add some styling, something like
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.
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.
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>
Code: Select all
#map {
position: relative;
overflow: hidden;
}
.village {
position: absolute;
display: block;
width: 32px;
height: 32px;
background: url('village.png');
border: 0;
}
- vitinho444
- Posts: 2819
- Joined: Mon Mar 21, 2011 4:54 pm
Re: (PHP) Map System
I added that code, some errors appeared, and as im not familiar with foreach here's how i made it:
Still a error, i think all the villages are appearing in the same position...
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>
Re: (PHP) Map System
Check the villages' top and left values. If they're ok, the problem is probably in the CSS.
- vitinho444
- Posts: 2819
- Joined: Mon Mar 21, 2011 4:54 pm
Re: (PHP) Map System
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
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
Are you sure they're in the exact same position? Maybe you need $villageTop = ( $village['y'] - $top ) * 32 - 16 etc.?
- vitinho444
- Posts: 2819
- Joined: Mon Mar 21, 2011 4:54 pm
Re: (PHP) Map System
Do you have a live version anywhere so I can see what's going on?