asked on

X/Y coordinate pinpointer on an image

I'm not sure if JavaScript is the way to go on this but I'm trying to make pinpoints on a map using X/Y coordinates. I want to have a city map and then, using a simple text file or even a database, place pinpoints with a simple description based on X/Y coordinates, like the coordinates used for image maps. If this is at all possible, or even if you know a better language to ask for help in, please let me know. Thanks!

RedLava

Hi stappert14,

This is definatly possible with a combination of JavaScript and DHTML with some server-side scripting to read in the data.

What type of server-side scripting can you use? PHP, ASP etc.

Once you have the coordinates loaded in you can then use JavaScript to position layers containing the description text.

The points can also be used to create an image map but how the map is constructed from the points e.g. which point connects to which may require an additional list to create the shapes.

Another option would be Flash. This would make it a bit more graphical but the image map problem may cause an issue again.

RedLava

lil_puffball

Here's a quick example without storing the information (you can use your own urls for the images):

<script>
var pinSrc="pin2.gif",xpos,ypos,cnt=0;

function placePin(){
var pin=document.createElement("div");
var img=document.createElement("img");
img.src=pinSrc;
pin.appendChild(img);
cnt++;
pin.id="pin"+cnt;
pin.style.position="absolute";
pin.style.left=xpos-pin.offsetWidth/2;
pin.style.top=ypos-pin.offsetHeight/2;
document.body.appendChild(pin);
}

function getMousePos(e){
if(document.all){xpos=window.event.x+document.body.scrollLeft;ypos=window.event.y+document.body.scrollTop;}
else{xpos=e.pageX;ypos=e.pageY;}
}

document.onmousemove=getMousePos;
</script>

<img src="map.jpg" name=map onclick="placePin();">

lil_puffball

That one didn't centre the pin properly, this one is better:

<script>
var pinSrc="pin.gif",xpos,ypos,cnt=0;

function placePin(){
var pin=document.createElement("div");
var img=document.createElement("img");
img.src=pinSrc;
pin.appendChild(img);
cnt++;
pin.id="pin"+cnt;
pin.style.position="absolute";
document.body.appendChild(pin);
pin.style.left=xpos-pin.offsetWidth/2;
pin.style.top=ypos-pin.offsetHeight/2;
}

function getMousePos(e){
if(document.all){xpos=window.event.x+document.body.scrollLeft;ypos=window.event.y+document.body.scrollTop;}
else{xpos=e.pageX;ypos=e.pageY;}
}

document.onmousemove=getMousePos;
</script>

<img src="map.jpg" name=map onclick="placePin();">

jaysolomon

stappert14

ASKER

I don't want a point and click type of interface. I'd like to have the image load the information from an external source and display the pinpoints. RedLava seems to be on the right track. I'm using a web host that supports pretty much all types of server-side scripting (ASP, PHP, etc.). I am relatively familiar with using dynamic text in Flash by loading it from a text file, is it possible to dynamically control it's placement also?

lil_puffball

Here is an example using ASP.

The map.asp page:
------------------------------------------------
<img src="map.jpg" name=map>

<script language=javascript>
var pinLoc=new Array();

<%
set fso = Server.CreateObject("scripting.FileSystemObject")
set file = fso.opentextfile(server.mappath("db/pinLoc.txt"),1,false)

do while not file.AtEndOfStream
response.write(" pinLoc[pinLoc.length]='"+file.readline+"';"+chr(10))
loop

file.close
set file=nothing
set fso=nothing
%>

var pinSrc="pin.gif",pinName="marker";

var ol=0,ot=0;
var obj=document.images["map"];
while(obj.offsetParent){
ol+=obj.offsetLeft;
ot+=obj.offsetTop;
obj=obj.offsetParent;
}

for(i=0;i<pinLoc.length;i++){
placePin(pinLoc[i].split(',')[0],pinLoc[i].split(',')[1]);}

function placePin(x,y){
var pin=document.createElement("img");
pin.src=pinSrc;
pin.name=pinName;
pin.id=pinName;
pin.style.position="absolute";
document.body.appendChild(pin);
pin.style.left=x-pin.offsetWidth/2+ol;
pin.style.top=y-pin.offsetHeight/2+ot;
}
</script>
------------------------------------------------

The pinLoc.txt file:
------------------------------------------------
20,20
40,40
60,60
80,80
100,100
130,130
150,150
------------------------------------------------

If you would like to see an example, go to this url:
http://www34.brinkster.com/lilpuffball/map.asp

The text file is here:
http://www34.brinkster.com/lilpuffball/db/pinLoc.txt

stappert14

ASKER

lil puffball-
Looks great!! I haven't had a chance to try it out but from your examples I think it's just what I need. Is it at all possible to add a link for the pins and possibly even a short description? The link would be most preferable.

lil_puffball

No problem. :) I've updated the pages, here is the new code:

map.asp
-------------------------------------
<img src="map.jpg" name=map>

<script language=javascript>
var pinLoc=new Array();

<%
set fso = Server.CreateObject("scripting.FileSystemObject")
set file = fso.opentextfile(server.mappath("db/pinLoc.txt"),1,false)

do while not file.AtEndOfStream
response.write(" pinLoc[pinLoc.length]='"+file.readline+"';"+chr(10))
loop

file.close
set file=nothing
set fso=nothing
%>

var pinSrc="pin.gif",pinName="marker";

var ol=0,ot=0;
var obj=document.images["map"];
while(obj.offsetParent){
ol+=obj.offsetLeft;
ot+=obj.offsetTop;
obj=obj.offsetParent;
}

for(i=0;i<pinLoc.length;i++){
placePin(pinLoc[i].split(','));}

function placePin(data){
var pin=document.createElement("img");
pin.src=pinSrc;
pin.name=pinName;
pin.id=pinName;
pin.onclick=function(){location.href=data[2];}
pin.title=data[3];
pin.style.position="absolute";
document.body.appendChild(pin);
pin.style.left=data[0]-pin.offsetWidth/2+ol;
pin.style.top=data[1]-pin.offsetHeight/2+ot;
}
</script>
-------------------------------------

pinLoc.txt
-------------------------------------
20,20,link1.htm,Descr. 1
40,40,link2.htm,Descr. 2
60,60,link3.htm,Descr. 3
80,80,link4.htm,Descr. 4
100,100,link5.htm,Descr. 5
130,130,link6.htm,Descr. 6
150,150,link7.htm,Descr. 7
-------------------------------------

lil_puffball

The problem is that you can't have commas in the description. To fix this, you can use another separator, like the pipe (|). Then just change these lines:

for(i=0;i<pinLoc.length;i++){
placePin(pinLoc[i].split(','));}

to this:

for(i=0;i<pinLoc.length;i++){
placePin(pinLoc[i].split('|'));}

stappert14

ASKER

Alright, I know I might be getting picky here but I don't know much about ASP coding. Can you get a 'hand' cursor over the pins so that you can tell it's a link??

ASKER CERTIFIED SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stappert14

ASKER

lil puffball, you definitely earned the points on this one..I even upped the points to 500. I really appreciate it!! The point of all this is that I have a database of different property sites that are available, and I wanted to be able to dynamically place pinpoints on a map for each property location. By doing a little cheating I managed to convert your short ASP snippet to PHP code that reads from my database. Here's what it looks like:

<?php
$row_count = 0;

while ($row = mysql_fetch_array($result)) {
$ID = $row["ID"];
$name = $row["Name"];
$xCord = $row["xCord"];
$yCord = $row["yCord"];

echo "pinLoc[pinLoc.length]='$xCord,$yCord,$ID.htm,$name';
";

$row_count++;
}
?>

Once again, thank you very much for your help, you're a life saver!!

lil_puffball

Glad to help. Thanks for the A and all the points! :D