<!doctype html>
<html>
<head>
<title>United States 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 new_york_x = 901.0, new_york_y = 208.0;
var new_yorkx = 901.0, new_yorky = 208.0;
var hawaiix = 246, hawaiiy = 601; // 21.3000° N, 157.8167° W
var alaskax = 146, alaskay = 603; // 61.2167° N, 149.9000° W
var x, y;
var clickno = 0;
var ourlat, ourlong;
var url = "http://www.rjmprogramming.com.au/PHP/Map/map.php?title=New York&label=['Lat',&value='Lon','Name']&data=,[40.7127,-74.0059,~New York~]";
window.onload = function() {
elem = document.getElementById('canvaselement');
context = elem.getContext("2d");
img = document.getElementById("united_states");
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) {
new_yorkx = x;
new_yorky = y;
// New York 40.7127° N, 74.0059° W 901 208
// Los Angeles 34.0500° N, 118.2500° W 116 431
ourlong = eval(-74.0059 + (x - new_yorkx) / (785.0 * (new_yorkx / new_york_x)) * (44.2441));
ourlat = eval(40.7127 + (y - new_yorky) / (-223.0 * (new_yorky / new_york_y)) * (6.6627));
} else if (eval(Math.abs(x - hawaiix) + Math.abs(y - hawaiiy)) < 50) {
ourlong = eval(-157.8167 + (x - hawaiix) / (785.0 * (new_yorkx / new_york_x)) * (44.2441));
ourlat = eval(21.3 + (y - hawaiiy) / (-223.0 * (new_yorky / new_york_y)) * (6.6627));
} else if (eval(Math.abs(x - alaskax) + Math.abs(y - alaskay)) < 50) {
ourlong = eval(-149.9000 + (x - alaskax) / (785.0 * (new_yorkx / new_york_x)) * (44.2441));
ourlat = eval(61.2167 + (y - alaskay) / (-223.0 * (new_yorky / new_york_y)) * (6.6627));
} else {
ourlong = eval(-74.0059 + (x - new_yorkx) / (785.0 * (new_yorkx / new_york_x)) * (44.2441));
ourlat = eval(40.7127 + (y - new_yorky) / (-223.0 * (new_yorky / new_york_y)) * (6.6627));
}
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&label=['Lat',&value='Lon','Name']&data=,[" + ourlat + "," + ourlong + ",~Your%20Place~]"
});
});
function ask() {
var huh=prompt("If you've zoomed your window, please answer Y and then click on New York 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=980 height=900 style="position: absolute; top:0; left:0; " /></td><td>
<h1 style="position: absolute; top:0; left:990px; " align='center'>United States Clickaround <select id='others' onchange=" location.href=this.value + '.html';"><option value='brazil'> ... or ...</option><option value='brazil'>Brazil</option><option value='ireland'>Ireland</option><option value='united_states'>United States</option><option value='world'>World</option></select></h1><br>
<iframe style="position: absolute; top:180px; left:990px; " id="myiframe" width=400 height=560 src="http://www.rjmprogramming.com.au/PHP/Map/map.php?title=New York&label=['Lat',&value='Lon','Name']&data=,[40.7127,-74.0059,~New York~]"></iframe>
</td></tr></table><img id="united_states" src="united_states.jpg" style="display:none;width:90%;" />
</body>
</html>