Solved

X/Y coordinate pinpointer on an image

Posted on 2004-03-22
13
742 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

759 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

19 Experts available now in Live!

Get 1:1 Help Now