<!doctype html>
<html>
<head>
<title>Brazil Clickaround - RJM Programming - April, 2015</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
var mode = 1;
var amode = 1;
var elem;
var elemLeft;
var elemTop;
var context;
var elements = [];
var img;
var rio_de_janeiro_x = 593.0, rio_de_janeiro_y = 560.0;
var rio_de_janeirox = 593.0, rio_de_janeiroy = 560.0;
var x, y;
var clickno = 0;
var ourlat, ourlong;
var url = "http://www.rjmprogramming.com.au/PHP/Map/map.php?title=Rio de Janeiro&label=['Lat',&value='Lon','Name']&data=,[-22.9068,-43.1729,~Rio de Janeiro~]";
var retx = 0.0, rety = 0.0;
function prereturnxy(inlatinlongthis) {
//alert(inlatinlongthis.title);
var prestuff = inlatinlongthis.title.split(",");
if (prestuff.length == 2) {
//alert(prestuff[0]);
return returnxy(prestuff[0], prestuff[1]);
}
return "0.0,0.0";
}
function returnxy(inlat, inlong) {
var retval="0.0,0.0";
var ourx = eval((rio_de_janeirox + eval(((inlong) + (43.1729)) * ((318.0 * (rio_de_janeirox / rio_de_janeiro_x))) / (16.8438))));
var oury = eval((rio_de_janeiroy + eval(((inlat) + (22.9068)) * (((-375.0) * (rio_de_janeiroy / rio_de_janeiro_y))) / (19.8068))));
retx = ourx;
rety = oury;
retval = ourx + "," + oury;
context.fillStyle = '#0000ff';
context.fillRect(retx, rety, 5, 5);
return retval;
}
window.onload = function() {
elem = document.getElementById('canvaselement');
context = elem.getContext("2d");
img = document.getElementById("brazil");
context.drawImage(img,0,0);
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
//alert(x + " " + y);
if (clickno == 0) {
rio_de_janeirox = x;
rio_de_janeiroy = y;
// Manaus 3.1000° S, 60.0167° W 275 185
// Rio 22.9068° S, 43.1729° W 593 560
ourlong = eval(-43.1729 + (x - rio_de_janeirox) / (318.0 * (rio_de_janeirox / rio_de_janeiro_x)) * (16.8438));
ourlat = eval(-22.9068 + (y - rio_de_janeiroy) / (-375.0 * (rio_de_janeiroy / rio_de_janeiro_y)) * (19.8068));
} else {
ourlong = eval(-43.1729 + (x - rio_de_janeirox) / (318.0 * (rio_de_janeirox / rio_de_janeiro_x)) * (16.8438));
ourlat = eval(-22.9068 + (y - rio_de_janeiroy) / (-375.0 * (rio_de_janeiroy / rio_de_janeiro_y)) * (19.8068));
}
elements.push({
colour: '#00ff00',
width: 5,
height: 5,
top: y,
left: x
});
clickno = clickno + 1;
// Collision detection between clicked offset and element.
elements.forEach(function(element) {
//alert('clicked Element at ' + ourlong + ' ' + ourlat + ' ' + element.left + ',' + element.top + ' with width=' + element.width + ' and height=' + element.height + ' and colour=' + element.colour);
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);
document.getElementById('myiframe').src = "http://www.rjmprogramming.com.au/PHP/Map/map.php?title=Your%20Place%20and%20Airports&label=['Lat',&value='Lon','Name']&data=,[" + ourlat.toFixed(5).replace(/0+$/, "") + "," + ourlong.toFixed(5).replace(/0+$/, "") + ",~Your%20Place~]"
});
document.getElementById('mypiframe').src = "intair.php?num=4&lat=" + ourlat + "&long=" + ourlong;
});
function ask() {
var huh=prompt("If you've zoomed your window, please answer Y and then click on Rio de Janeiro to scale. Then click away at places where you want to go.", "");
if (huh == null) {
clickno = 1;
} else if (huh == "y" || huh == "Y") {
clickno = 0;
} else {
clickno = 1;
}
}
setTimeout(ask, 1000);
};
</script>
</head>
<body>
<table><tr><td>
<canvas id="canvaselement" width=800 height=800 style="position: absolute; top:0; left:0; " /></td><td>
<h1 style="position: absolute; top:0; left:810px; " align='center'>Brazil Clickaround <select id='others' onchange=" location.href=this.value + '.htm';"><option value='brazil'> ... or ...</option><option value='australia'>Australia</option><option value='brazil'>Brazil</option><option value='china'>China</option><option value='germany'>Germany</option><option value='india'>India</option><option value='ireland'>Ireland</option><option value='nigeria'>Nigeria</option><option value='united_states'>United States</option><option value='world'>World</option></select></h1><br>
<iframe style="position: absolute; top:140px; left:810px; " id="myiframe" width=400 height=660 src="http://www.rjmprogramming.com.au/PHP/Map/map.php?title=Rio de Janeiro&label=['Lat',&value='Lon','Name']&data=,[-22.9068,-43.1729,~Rio de Janeiro~]"></iframe>
<a id='mya' style="position: absolute; top:1000px; left:860px; " href='#' title='-42.8806,147.3250' onclick='prereturnxy(this);' style='display:none;'> click</a><iframe id='mypiframe' style='display:none;' src='intair.php' title='International Airport plot'></iframe>
</td></tr></table><img id="brazil" src="brazil-political-map.jpg" style="display:none;" />
</body>
</html>