Log in

View Full Version : co-ordinates map


liamallan
05-16-2010, 10:57 AM
hey guys, i have created a form to submit evony age 2 city data into mysql table, i was just wondering if it would be possible to take all citys co-ordinates and show all entries from table as a mark, on a simple map?

i have selected a background for the map:
https://www.fabricsfromtheheart.com/store/images/uploads/Robert%20Kaufman/DRJ-6110-50.jpg

the co-ordinates for top left corner will be: x400, y0
the co-ordinates for top right corner will be: x599, y0
the co-ordinates for bottom left corner will be: x400, y199
the co-ordinates for bottom right corner will be: x599, y199

the 'x' co-ordinates are stored in row 'x' in table and the 'y' co-ordinates are stored in row 'y' in table

i would be grateful if anyone can help, as this is first time i have ever dealt with any type of mapping lol

thanx again
vwphillips
05-16-2010, 03:13 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#map{
position:relative;width:200px;height:200px;background-Color:#FFCC66;
}

/*]]>*/
</style></head>

<body>
<table id="table" border="1">
<tr>
<td>Town</td>
<td>x</td>
<td>y</td>
</tr>
<tr>
<td>Town 1</td>
<td>450</td>
<td>50</td>
</tr>
<tr>
<td>Town 2</td>
<td>550</td>
<td>150</td>
</tr>
</table>
<div id="map" ></div>

<script type="text/javascript">
/*<![CDATA[*/

function Map(mapid,tableid){
var map=document.getElementById(mapid);
var rows=document.getElementById(tableid).rows;
for (var ary=[],cells,z0=1;z0<rows.length;z0++){
cells=rows[z0].cells;
ary.push([cells[0].innerHTML,cells[1].innerHTML,cells[2].innerHTML]);
}
var mark=zxcES('DIV',{position:'absolute',zIndex:'101',height:'30px',fontSize:'10px'});
zxcES('DIV',{position:'absolute',left:'0px',top:'15px',width:'30px',height:'1px',backgroundColor:'black'},mark);
zxcES('DIV',{position:'absolute',left:'15px',top:'0px',width:'1px',height:'30px',backgroundColor:'white'},mark);
for (var town,z1=0;z1<ary.length;z1++){
town=mark.cloneNode(true);
zxcES(town,{left:ary[z1][1]-400-15+'px',top:ary[z1][2]-15+'px'},map,ary[z1][0]);
}
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}


Map('map','table');

/*]]>*/
</script>
the co-ordinates for top left corner will be: x400, y0
the co-ordinates for top right corner will be: x599, y0
the co-ordinates for bottom left corner will be: x400, y199
the co-ordinates for bottom right corner will be: x599, y199
</body>

</html>
liamallan
05-16-2010, 05:55 PM
hey, that seems to work. but is it possible to have a php version, as i am a little more familiar with the php language. if not, would it be possible to retrive the coordinates from a mysql table by integrating a little php to this existing script?

thanx again for the help
djr33
05-16-2010, 06:36 PM
I have recently setup something similar to this.

1. Set a div with background of the image.

2. Loop through each entry in the database and get the coordinates (x,y).

3. Echo them as just img tags but using absolute positioning and a high z-index.

4. Do math if needed, but if you're not converting anything (such as zooming or using another type of coordinates) then you're fine.


I don't see any reason to use Javascript unless you want the map to be active (zooming, moving, etc).
liamallan
05-16-2010, 06:53 PM
im so glad to hear that i can do this in php! lol

thanx for the reply daniel, but i dont quite understand step 3 (absolute positioning and high z-index).
djr33
05-16-2010, 07:00 PM
I'm referring to CSS, nothing to do with PHP.

Here's some code from my site to give you an idea of that.

<img src="pin.gif" style="position:absolute; margin-top:97px; margin-left:64px; z-index:2;">
<img src="pin.gif" style="position:absolute; margin-top:245px; margin-left:229px; z-index:3;">
<img src="pin.gif" style="position:absolute; margin-top:104px; margin-left:659px; z-index:4;">
<img src="pin.gif" style="position:absolute; margin-top:269px; margin-left:687px; z-index:5;">
<img src="pin.gif" style="position:absolute; margin-top:47px; margin-left:403px; z-index:6;">
<img src="pin.gif" style="position:absolute; margin-top:319px; margin-left:194px; z-index:7;">
<img src="pin.gif" style="position:absolute; margin-top:192px; margin-left:431px; z-index:8;">
<img src="pin.gif" style="position:absolute; margin-top:51px; margin-left:57px; z-index:9;">


Notes: these are generated in a loop from a database and z-index is set by increasing it by 1 each time (since they might overlap). I don't think that's necessarily needed, but it doesn't hurt.
margin-top and margin-left are offsetting the pin from the upper left corner. margin-top:0px;margin-left:0px; gives a pin in the corner. Any other numbers move it away from the corner.
liamallan
05-16-2010, 07:48 PM
im sorry mate, like i said, im only really familiar with php. i havent got a clue where to start with javascript/CSS.:o
djr33
05-16-2010, 07:52 PM
The code is right there. There's no better way to explain it. Time to start learning :)

CSS is not hard-- the only hard part is memorizing all of the ways to do things and how different properties combine.
And there's no Javascript needed for this. You could use Javascript (like in vic's reply), but it's not needed.

That code above will work right away as long as those numbers are right.

margin-top will be between 0 and the height of your image; margin-left will be between 0 and the width of your image.


If you'd like me to create this for you, I'm available for hire, or you could post in the paid work requests section. But beyond showing you the code above (or making it for you), there's no better way to explain it.
liamallan
05-27-2010, 10:22 AM
hey guys, im back. i managed to get vic's example to work with mysql, i have increased the map size and it seems to have gone out of proportion.

i changed:

#map{
position:relative;width:200px;height:200px;background-Color:#FFCC66;
}
to:

#map{
position:relative;width:400px;height:400px;background-Color:#0C6;
}
i have looked at the rest of the code, but dont understand it very well, and i dont want to mess it all up.
and also, how could i turn the crosshairs into little squares?
thanx for your help guys
djr33
05-27-2010, 05:44 PM
If you link to the page, we can see what is happening. Since this is a question about graphics, that is very important.

What is "out of proportion"?

If you change the map size then the pins will stay in the original area-- change those numbers also. Did you try this?


If you want to use Javascript, that's fine, but what I posted is actually a lot easier to use (and to update). There's a lot more complex math in the Javascript version.
liamallan
05-27-2010, 07:51 PM
thats my problem there. i have changed the map background size to 600x600 and the crosshairs remain in their original location.

here is the link, with background 600x600
click here (http://www.shiftysplayground.co.cc/mapp2.php)
liamallan
05-30-2010, 01:00 AM
i have changed background to 200x200 again, and have also managed to turn crosshairs into little squares.

i would still like to make the map 400x400 but cant get pins to move from original spot

this is what i have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#map{
position:relative;width:200px;height:200px;background-Color:#FC6;
}

/*]]>*/
</style></head>

<body>
<table id="table" border="1">

<tr>
<td>Lord Name</td>
<td>Coords (x)</td>
<td>Coords (y)</td>
</tr>
<?php
while($rows=mysql_fetch_array($query)){
?>
<tr>
<td><? echo $rows['lordname']; ?></td>
<td><? echo $rows['x']; ?></td>
<td><? echo $rows['y']; ?></td>
</tr>
<?php
}
?>
</table>
<div id="map" ></div>

<script type="text/javascript">
/*<![CDATA[*/

function Map(mapid,tableid){
var map=document.getElementById(mapid);
var rows=document.getElementById(tableid).rows;
for (var ary=[],cells,z0=1;z0<rows.length;z0++){
cells=rows[z0].cells;
ary.push([cells[0].innerHTML,cells[1].innerHTML,cells[2].innerHTML]);
}
var mark=zxcES('DIV',{position:'absolute',zIndex:'101',height:'3px',fontSize:'10px'});
zxcES('DIV',{position:'absolute',left:'15px',top:'15px',width:'3px',height:'3px',backgroundColor:'black'},mark);
for (var town,z1=0;z1<ary.length;z1++){
town=mark.cloneNode(true);
zxcES(town,{left:ary[z1][1]-400-15+'px',top:ary[z1][2]-15+'px'},map,ary[z1][0]);
}
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}


Map('map','table');

/*]]>*/
</script>

</body>

</html>
liamallan
06-06-2010, 09:32 PM
can anyone help me move these pins?