PDA

View Full Version : Help for a real newbie - interacting with graphics

Crunchie
03-09-2010, 05:02 PM
Hi, I imagine this is one of those simpel questions, however having spent many years cutting html, and now trying to update myself with JavaScript and CSS, so please excuse the HTML for being really old school. (Don't see an *oh, I am SO embarassed smily). Following is my first attempt at JavaScript.

Intent : Nice static google map, user selects an area by clicking in the upper left and lower right corners. The system returns the upper left and lower right GPS coordinates as a result. If they click in different corners, such up upper right and lower left, the code automatically swaps everything around.

Problem : The script does well at finding the pixels that were clicked, however the graphics (which are little corner markers) are not put in the right spot. The math to return the GPS coordinates as a result is simple, but I just can't see what I have done wrong in the display.

Regards

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Welcome to Senior Alliance</title>
<script type="text/javascript" >
function GeoFence(event){
pos_x1 = event.offsetX?(event.offsetX):event.pageX-document.getElementById("GeoFenceMap").offsetLeft;
pos_y1 = event.offsetY?(event.offsetY):event.pageY-document.getElementById("GeoFenceMap").offsetTop;
if (pos_x2==0) {
pos_x1_swap = pos_x1;
pos_y1_swap = pos_y1;
document.getElementById("GeoFenceUL").style.left = pos_x1_swap ;
document.getElementById("GeoFenceUL").style.top = pos_y1_swap ;
document.getElementById("GeoFenceUL").style.visibility = "visible" ;
document.pointform.form_x1.value = pos_x1_swap;
document.pointform.form_y1.value = pos_y1_swap;
pos_x2 = pos_x1;
pos_y2 = pos_y1;
}
else
{
pos_x1_swap = pos_x1;
pos_y1_swap = pos_y1;
pos_x2_swap = pos_x2;
pos_y2_swap = pos_y2;
if(pos_x1_swap > pos_x2_swap) {temp=pos_x1_swap;pos_x1_swap=pos_x2_swap;pos_x2_swap=temp;}
if(pos_y1_swap > pos_y2_swap) {temp=pos_y1_swap;pos_y1_swap=pos_y2_swap;pos_y2_swap=temp;}
document.getElementById("GeoFenceUL").style.left = pos_x1_swap ;
document.getElementById("GeoFenceUL").style.top = pos_y1_swap ;
document.getElementById("GeoFenceUL").style.visibility = "visible" ;
document.getElementById("GeoFenceUR").style.left = pos_x1_swap ;
document.getElementById("GeoFenceUR").style.top = pos_y2_swap ;
document.getElementById("GeoFenceUR").style.visibility = "visible" ;
document.getElementById("GeoFenceLL").style.left = pos_x2_swap ;
document.getElementById("GeoFenceLL").style.top = pos_y1_swap ;
document.getElementById("GeoFenceLL").style.visibility = "visible" ;
document.getElementById("GeoFenceLR").style.left = pos_x2_swap ;
document.getElementById("GeoFenceLR").style.top = pos_y2_swap ;
document.getElementById("GeoFenceLR").style.visibility = "visible" ;
document.pointform.form_x1.value = pos_x1_swap;
document.pointform.form_y1.value = pos_y1_swap;
document.pointform.form_x2.value = pos_x2_swap;
document.pointform.form_y2.value = pos_y2_swap;
pos_x2 = pos_x1;
pos_y2 = pos_y1;
}
}
</script>
<script>
var pos_x1_swap;
var pos_y1_swap;
var pos_x2_swap;
var pos_y2_swap;
var pos_x1;
var pos_y1;
var pos_x2=0;
var pos_y2=0;
</script>
</head>
<body>
<table style="background-color: rgb(255, 255, 255); width: 1094px; height: 588px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td style="width: 30px; vertical-align: bottom;" rowspan="14" background="./Resources/Border_Left.png">___</td>
<td style="width: 360px;"></td>
<td style="width: 142px;"></td>
<td style="width: 432px;"></td>
<td style="width: 70px;"></td>
<td style="width: 30px; vertical-align: bottom;" rowspan="14" background="./Resources/Border_Right.png">__</td>
</tr>
<tr><td>
<input id="CustSalutation" maxlength="5" name="CustSalutation" size="3" type="hidden" value="".$CustSalutation.""/>
</td></tr>
#Zoom level 12 0.000361 -0.000212
#//// Lat per pixel Lon per pixel
<tr><td colspan="4" width="600px" height="600px">
<form name="pointform" method="post">
<div id="GeoFenceMap" onclick="GeoFence(event)" style = "background-image:url('http://maps.google.com/maps/api/staticmap?center=51,-2&zoom=12&size=600x600&maptype=hybrid&sensor=false');width:600px;height:600px;background-repeat:no-repeat;z-index:1;">
<img src="./Resources/UL.gif" id="GeoFenceUL" style="position:absolute;visibility:hidden;z-index:2;">
<img src="./Resources/LL.gif" id="GeoFenceUR" style="position:absolute;visibility:hidden;z-index:2;">
<img src="resources/UR.gif" id="GeoFenceLL" style="position:absolute;visibility:hidden;z-index:2;">
<img src="Resources/LR.gif" id="GeoFenceLR" style="position:absolute;visibility:hidden;z-index:2;"></div>
You pointed at x = <input type="text" name="form_x1" size="4" /> - y = <input type="text" name="form_y1" size="4" /> and had previously pointed at x =<input type="text" name="form_x2" size="4" /> - y = <input type="text" name="form_y2" size="4" />
<br /><br />
</form>
<input class="submit" name="GeoFenceAttempt" value="Save and Continue" type="submit" /><br />
</td></tr>
</body>
</html>
Kor
03-11-2010, 11:29 AM
Are you aware that offsetLeft and offsetTop return the relative position of an element (relative to its parent), and not the absolute position?

And an important note: style position,dimension,size, etc. should specify the measurement units, usually pixels.

...
document.getElementById("GeoFenceUL").style.left = pos_x1_swap+'px';
... // and so on


And another thing: you should CSS set the margins and padding of the body (usually to 0), otherwise different browsers will consider different default small padding/margins spaces by default, which might ruin your calculations.

html, body{
margin:0;
padding:0;
}
Crunchie
03-12-2010, 03:38 PM
Thanks heaps. Guess I had better learn CSS before getting too carried away with this type of stuff. Ah, so much easier when it was all X25. :thumbsup:
Crunchie
03-12-2010, 04:33 PM
oh and *facepalm* I had the corners mixed so could not understand why the lower left corner was so far out (when I was using coordinates for the upper right). Excuse me while I give myself a swift uppercut! And the 'absolute' in the IMG style should have been relative. Mixing them put the markers out of the visible space. Another swift upper cut.