Need to plot and attach pixels to a scrolling image

JazzcatCB · 06-25-2009, 08:37 PM

I have an img of a map of Europe in a div. I want to plot routes between cities in Europe as dotted lines. The image is scrollable and I want the routes to scroll with the image. So the routes should be attached to the image. Furthermore, when drawing routes outside of the viewable area, the routes should be clipped so they don't show up outside of the image. but when the image is scrolled, the routes should appear. Can anyone help me with this?

Here's a link to the dev site: http://railsacrosseurope.com/turn

Here is my code:
CSS:

Code:

body
{
    background-image: url('bgdesert.jpg');
    position: absolute;
}

  div#main
  {
    color: red;
    height: 400px;
    width: 760px;
    border: 3px 3px;
  }
  div#map
  {
    height: 320px;
    width: 620px;
    /* background-image: url('/images/map_europe.jpg');*/
    border: 3px 3px;
    overflow: auto;
    float: left;
  }
  .Ink {
    position: absolute;
    background-color: #fff;
    border-top: 1px solid transparent;
    width: 1px;
    height: 1px;
  }

HTML

Code:

<div id="main">
  <div id="map"><img id="map-img" src="<?php echo $config->url->absolute->public; ?>/images/map_europe.jpg" alt="none" /></div>
</div>

FBJS (Facebook JS)

Code:

function PlotPixel(x, y, c) {
    var pixel = document.createElement('div');
    pixel.setClassName('Ink');
    pixel.setStyle('borderTopColor', c);
    pixel.setStyle('left', x + 'px');
    pixel.setStyle('top', y + 'px');
    parentObj = document.getElementById('map');
    parentObj.appendChild(pixel);
}

vwphillips · 06-26-2009, 12:33 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;overflow:auto;width:600px;height:400px;
}

#map IMG{
  position:relative;
}

.dot0 {
  width:1px;height:1px;background-Color:#FFCC66;
}
.dot1 {
  width:1px;height:1px;background-Color:#336600;
}

/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcPlot(id,cls){
 var obj=document.getElementById(id);
 this.obj=zxcES('DIV',{position:'relative',zIndex:'2'});
 obj.insertBefore(this.obj,obj.firstChild);
 this.clone=zxcES('DIV',{position:'absolute'},this.obj);
 this.cls=cls||''
 var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'});
}


zxcPlot.prototype.Line=function(obj,srt,fin){
 var w=fin[0]-srt[0],h=fin[1]-srt[1],hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp;
 for (var ary=[],z0=0;z0<hyp;z0++){
  ary[z0]=[z0*xr+srt[0],z0*yr+srt[1]];
  var dot=zxcES(this.clone.cloneNode(false),{left:z0*xr+srt[0]+'px',top:z0*yr+srt[1]+'px'},obj);
 }
 return ary;
}

zxcPlot.prototype.Plot=function(ary,cls){
 this.clone.className=cls||this.cls;
 for (var pary=[],z0=0;z0<ary.length;z0+=2) if(ary[z0+1]) pary.push([ary[z0],ary[z0+1]]);
 var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'},this.obj);
 for (var z1=0;z1<pary.length;z1++){
  if (pary[z1+1]) this.Line(obj,pary[z1],pary[z1+1])
 }
 return obj;
}

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;
}


/*]]>*/
</script></head>

<body onload="P=new zxcPlot('map','dot0');" >
 <div id="map">
   <img id="map-img" src="http://railsacrosseurope.com/public/images/map_europe.jpg" alt="none" />

 </div>
<input type="button" name="" value="Route 1"
 onclick="P.Plot([305,65,270,95,295,145,288,180,282,208,293,243],'dot1');"
/>
<input type="button" name="" value="Route 2"
 onclick="P.Plot([320,325,347,495]);"
/>


</body>

</html>

JazzcatCB · 06-27-2009, 12:45 AM

Quote:

Originally Posted by vwphillips

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;overflow:auto;width:600px;height:400px;
}

#map IMG{
  position:relative;
}

.dot0 {
  width:1px;height:1px;background-Color:#FFCC66;
}
.dot1 {
  width:1px;height:1px;background-Color:#336600;
}

/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcPlot(id,cls){
 var obj=document.getElementById(id);
 this.obj=zxcES('DIV',{position:'relative',zIndex:'2'});
 obj.insertBefore(this.obj,obj.firstChild);
 this.clone=zxcES('DIV',{position:'absolute'},this.obj);
 this.cls=cls||''
 var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'});
}


zxcPlot.prototype.Line=function(obj,srt,fin){
 var w=fin[0]-srt[0],h=fin[1]-srt[1],hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp;
 for (var ary=[],z0=0;z0<hyp;z0++){
  ary[z0]=[z0*xr+srt[0],z0*yr+srt[1]];
  var dot=zxcES(this.clone.cloneNode(false),{left:z0*xr+srt[0]+'px',top:z0*yr+srt[1]+'px'},obj);
 }
 return ary;
}

zxcPlot.prototype.Plot=function(ary,cls){
 this.clone.className=cls||this.cls;
 for (var pary=[],z0=0;z0<ary.length;z0+=2) if(ary[z0+1]) pary.push([ary[z0],ary[z0+1]]);
 var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'},this.obj);
 for (var z1=0;z1<pary.length;z1++){
  if (pary[z1+1]) this.Line(obj,pary[z1],pary[z1+1])
 }
 return obj;
}

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;
}


/*]]>*/
</script></head>

<body onload="P=new zxcPlot('map','dot0');" >
 <div id="map">
   <img id="map-img" src="http://railsacrosseurope.com/public/images/map_europe.jpg" alt="none" />

 </div>
<input type="button" name="" value="Route 1"
 onclick="P.Plot([305,65,270,95,295,145,288,180,282,208,293,243],'dot1');"
/>
<input type="button" name="" value="Route 2"
 onclick="P.Plot([320,325,347,495]);"
/>


</body>

</html>

vwphillips:

You are right on. Position: relative for the parent div was the solution.

And hey: Thanks for that reminder about God's love. That's the only thing that keeps me going most days!

Thank you!