(PHP) Map System

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

(PHP) Map System

Post 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..
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: (PHP) Map System

Post by Winawer »

Do you really need canvas for this? Seems like you could do this type of map with positioned divs.
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: (PHP) Map System

Post by vitinho444 »

Like what, do you got an idea?
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: (PHP) Map System

Post 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.
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: (PHP) Map System

Post 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...
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: (PHP) Map System

Post by Winawer »

Check the villages' top and left values. If they're ok, the problem is probably in the CSS.
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: (PHP) Map System

Post 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
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: (PHP) Map System

Post by Winawer »

Are you sure they're in the exact same position? Maybe you need $villageTop = ( $village['y'] - $top ) * 32 - 16 etc.?
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: (PHP) Map System

Post by vitinho444 »

Nop same thing :O
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: (PHP) Map System

Post by Winawer »

Do you have a live version anywhere so I can see what's going on?
Post Reply

Return to “Advanced Help and Support”