[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 767
  • Last Modified:

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!
0
stappert14
Asked:
stappert14
1 Solution
 
RedLavaCommented:
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
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jaysolomonCommented:
<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
 
stappert14Author Commented:
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
 
lil_puffballCommented:
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
 
stappert14Author Commented:
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
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
 
stappert14Author Commented:
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
 
lil_puffballCommented:
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
 
stappert14Author Commented:
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
 
lil_puffballCommented:
Glad to help. Thanks for the A and all the points! :D
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now