Solved

X/Y coordinate pinpointer on an image

Posted on 2004-03-22
13
743 Views
Last Modified: 2008-03-04
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!
0
Comment
Question by:stappert14
13 Comments
 
LVL 4

Expert Comment

by:RedLava
ID: 10653982
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
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655246
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();">
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655258
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();">
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10657812
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var xCoord = function(evt){
      if(evt.x){ return evt.x;}
      if(evt.pageX){ return evt.pageX;}
}
var yCoord = function(evt){
      if(evt.y){ return evt.y;}
      if(evt.pageY){ return evt.pageY;}
}
document.onmousemove=function(){
      document.forms[0].x.value = xCoord(event);
      document.forms[0].y.value = yCoord(event);
}      
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
X<input type="text" name="x">
Y<input type="text" name="y">

</form>
</body>
</html>
0
 

Author Comment

by:stappert14
ID: 10659276
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?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10662147
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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:stappert14
ID: 10662809
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.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10662931
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
-------------------------------------
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10662953
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('|'));}
0
 

Author Comment

by:stappert14
ID: 10664450
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??
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10664758
Sure. :) Just replace the function with this:

function placePin(data){
  var pin=document.createElement("img");
  pin.src=pinSrc;
  pin.name=pinName;
  pin.id=pinName;
  pin.style.cursor='hand';
  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;
}
0
 

Author Comment

by:stappert14
ID: 10665307
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!!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10671800
Glad to help. Thanks for the A and all the points! :D
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now