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:

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

Code:

<!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.

HTML Code:

<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.

**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:

Code:

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

to:

Code:

#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.

Thread: co-ordinates map

Thread Tools

Search Thread

co-ordinates map

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions