fintelia/geoloc.html

## geoloc.html
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta charset="utf-8">
	</head>
	<body>
		<div id="canvasDiv" align="center">
			<canvas id="viewer" width="1024" height="768">

			</canvas>
		</div>

		<script>
			function queryObj() {//from: http://stackoverflow.com/questions/647259/javascript-query-string
				var result = {}, queryString = location.search.slice(1),
					re = /([^&=]+)=([^&]*)/g, m;

				while (m = re.exec(queryString)) {
					result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
				}

				return result;
			}
			function drawTargetBox(cx, cy, width, height, color){
				context.beginPath();

				context.strokeStyle='#000000';
				context.lineWidth = 5;
				context.moveTo(cx+width,	cy-height);
				context.lineTo(cx-width,	cy-height);
				context.lineTo(cx-width,	cy+height);
				context.lineTo(cx+width,	cy+height);
				context.closePath();

				context.moveTo(cx,cy-height);
				context.lineTo(cx,0);

				context.moveTo(cx,cy+height);
				context.lineTo(cx,768);

				context.moveTo(cx-width,cy);
				context.lineTo(0,cy);

				context.moveTo(cx+width,cy);
				context.lineTo(1024,cy);

				context.stroke();

				context.strokeStyle=color;
				context.lineWidth = 3;
				context.stroke();
			}

			var NUM_LEVELS = 20;
			var imageArray = new Array(NUM_LEVELS)
			var centerX = new Array(NUM_LEVELS);
			var centerY = new Array(NUM_LEVELS);
			for(var i = 0; i < NUM_LEVELS; i++){
				imageArray[i] = new Array(12);
			}

			var level;
			var subLevel = 0;

			function render(){

				//var level = NUM_LEVELS-3;
				context.fillStyle="#333333";
				context.fillRect(0,0,1024,768);

				for(var i = 0; i<12; i++){
					if(imageArray[level][i].width > 0){
						context.drawImage(imageArray[level][i], 256 * (i%4), 256 * Math.floor(i/4));
					}
				}


				var t = (subLevel-100) / 100.0;

				if(t < 0) t=0;
				if(t > 1) t=1;

				varBoxWidth = 64 * (1 - t) + 512 * t;
				varBoxHeight = 48 * (1 - t) + 384 * t;

				var cx = (384+256*(Math.floor(centerX[level]*8+0.5)/8)) * (1-t) + 512*t;
				var cy = (256+256*(Math.floor(centerY[level]*8)/8 + 0.0625)) * (1-t) + 384*t;

				if(level <= NUM_LEVELS-4){
					for(var i = 0; i<12; i++){
						if(imageArray[level+3][i].width > 0){
							context.drawImage(imageArray[level+3][i], cx-varBoxWidth + varBoxWidth/2 * (i%4), cy-varBoxHeight + varBoxHeight/1.5 * Math.floor(i/4), varBoxWidth/2, varBoxHeight/1.5);
						}
					}
				}
				else{	//if we aren't zooming in further, use actual center
					cx = 384+256*centerX[level];
					cy = 256+256*centerY[level];
				}

				if(	(subLevel>=20 && subLevel<30)||
					(subLevel>=45 && subLevel<55)||
					(subLevel>=70 && subLevel<80)){
					drawTargetBox(cx, cy,varBoxWidth,varBoxHeight,'#ff0000');
				}
				else{
					drawTargetBox(cx, cy,varBoxWidth,varBoxHeight,'#ffffff');
				}

				if(level <= NUM_LEVELS-4){
					subLevel+=1;
					if(subLevel > 200){
						subLevel = 0;
						level += 3;
					}
					setTimeout("render()", 16.6666);
				}
			}
			function loadImages(nCoord, eCoord){
				var numTilesLoaded = 0;
				for(var tileLevel = 0; tileLevel < NUM_LEVELS; tileLevel++){
					var mercantorX = (eCoord / 180.0 * 0.5 + 0.5);
					var mercantorY = -Math.log(Math.tan((90 + nCoord) * Math.PI / 360)) / Math.PI  * 0.5 + 0.5; //Math.log(Math.tan(Math.PI/4 + (nCoord*Math.PI/180.0)/2));

					var tileOffsetX_float = mercantorX * (Math.pow(2.0,tileLevel))-1.5;
					var tileOffsetY_float = mercantorY * (Math.pow(2.0,tileLevel))-1.0;

					var tileOffsetX = Math.floor(tileOffsetX_float);
					var tileOffsetY = Math.floor(tileOffsetY_float);

					centerX[tileLevel] = tileOffsetX_float-tileOffsetX;
					centerY[tileLevel] = tileOffsetY_float-tileOffsetY;

					for(var i = 0; i<12; i++){
						imageArray[tileLevel][i] = new Image();

						imageArray[tileLevel][i].onload = function() {
							if(++numTilesLoaded == 12 * (NUM_LEVELS))
								render();
						}
						imageArray[tileLevel][i].onabort = function() {
							numTilesLoaded++;
						}
						imageArray[tileLevel][i].onerror = function() {
							numTilesLoaded++;
						}
						imageArray[tileLevel][i].crossOrigin = "anonymous";
						imageArray[tileLevel][i].src = 'http://otile1.mqcdn.com/tiles/1.0.0/sat/' + tileLevel + '/' + (tileOffsetX+(i%4)+ '/' + (~~(i/4)+tileOffsetY)  + '.jpg');
					}
				}
			}

			var canvas = document.getElementById("viewer");
			var context = canvas.getContext("2d");
			context.fillStyle="#333333";
			context.fillRect(0,0,1024,768);

			NUM_LEVELS = parseInt(queryObj()["maxLevel"] != undefined ? queryObj()["maxLevel"] : 18);
			level = (NUM_LEVELS-1) % 3 + 3;
			loadImages(parseFloat(queryObj()["north"]), parseFloat(queryObj()["east"]));

		</script>
		<div style="text-align: center; margin-top: 868px;">
			<div>
				<font color="white">
					<p>Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank" style="color: rgb(255,255,255)">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"></p>
				</font>
			</div>
		</div>
	</body>
</html>
	<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
	</head>
	<body>
	<div id="canvasDiv" align="center">
	<canvas id="viewer" width="1024" height="768">

	</canvas>
	</div>

	<script>
	function queryObj() {//from: http://stackoverflow.com/questions/647259/javascript-query-string
	var result = {}, queryString = location.search.slice(1),
	re = /([^&=]+)=([^&]*)/g, m;

	while (m = re.exec(queryString)) {
	result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
	}

	return result;
	}
	function drawTargetBox(cx, cy, width, height, color){
	context.beginPath();

	context.strokeStyle='#000000';
	context.lineWidth = 5;
	context.moveTo(cx+width, cy-height);
	context.lineTo(cx-width, cy-height);
	context.lineTo(cx-width, cy+height);
	context.lineTo(cx+width, cy+height);
	context.closePath();

	context.moveTo(cx,cy-height);
	context.lineTo(cx,0);

	context.moveTo(cx,cy+height);
	context.lineTo(cx,768);

	context.moveTo(cx-width,cy);
	context.lineTo(0,cy);

	context.moveTo(cx+width,cy);
	context.lineTo(1024,cy);

	context.stroke();

	context.strokeStyle=color;
	context.lineWidth = 3;
	context.stroke();
	}

	var NUM_LEVELS = 20;
	var imageArray = new Array(NUM_LEVELS)
	var centerX = new Array(NUM_LEVELS);
	var centerY = new Array(NUM_LEVELS);
	for(var i = 0; i < NUM_LEVELS; i++){
	imageArray[i] = new Array(12);
	}

	var level;
	var subLevel = 0;

	function render(){

	//var level = NUM_LEVELS-3;
	context.fillStyle="#333333";
	context.fillRect(0,0,1024,768);

	for(var i = 0; i<12; i++){
	if(imageArray[level][i].width > 0){
	context.drawImage(imageArray[level][i], 256 * (i%4), 256 * Math.floor(i/4));
	}
	}


	var t = (subLevel-100) / 100.0;

	if(t < 0) t=0;
	if(t > 1) t=1;

	varBoxWidth = 64 * (1 - t) + 512 * t;
	varBoxHeight = 48 * (1 - t) + 384 * t;

	var cx = (384+256(Math.floor(centerX[level]8+0.5)/8)) * (1-t) + 512*t;
	var cy = (256+256(Math.floor(centerY[level]8)/8 + 0.0625)) * (1-t) + 384*t;

	if(level <= NUM_LEVELS-4){
	for(var i = 0; i<12; i++){
	if(imageArray[level+3][i].width > 0){
	context.drawImage(imageArray[level+3][i], cx-varBoxWidth + varBoxWidth/2 * (i%4), cy-varBoxHeight + varBoxHeight/1.5 * Math.floor(i/4), varBoxWidth/2, varBoxHeight/1.5);
	}
	}
	}
	else{ //if we aren't zooming in further, use actual center
	cx = 384+256*centerX[level];
	cy = 256+256*centerY[level];
	}

	if( (subLevel>=20 && subLevel<30)\|\|
	(subLevel>=45 && subLevel<55)\|\|
	(subLevel>=70 && subLevel<80)){
	drawTargetBox(cx, cy,varBoxWidth,varBoxHeight,'#ff0000');
	}
	else{
	drawTargetBox(cx, cy,varBoxWidth,varBoxHeight,'#ffffff');
	}

	if(level <= NUM_LEVELS-4){
	subLevel+=1;
	if(subLevel > 200){
	subLevel = 0;
	level += 3;
	}
	setTimeout("render()", 16.6666);
	}
	}
	function loadImages(nCoord, eCoord){
	var numTilesLoaded = 0;
	for(var tileLevel = 0; tileLevel < NUM_LEVELS; tileLevel++){
	var mercantorX = (eCoord / 180.0 * 0.5 + 0.5);
	var mercantorY = -Math.log(Math.tan((90 + nCoord) * Math.PI / 360)) / Math.PI * 0.5 + 0.5; //Math.log(Math.tan(Math.PI/4 + (nCoord*Math.PI/180.0)/2));

	var tileOffsetX_float = mercantorX * (Math.pow(2.0,tileLevel))-1.5;
	var tileOffsetY_float = mercantorY * (Math.pow(2.0,tileLevel))-1.0;

	var tileOffsetX = Math.floor(tileOffsetX_float);
	var tileOffsetY = Math.floor(tileOffsetY_float);

	centerX[tileLevel] = tileOffsetX_float-tileOffsetX;
	centerY[tileLevel] = tileOffsetY_float-tileOffsetY;

	for(var i = 0; i<12; i++){
	imageArray[tileLevel][i] = new Image();

	imageArray[tileLevel][i].onload = function() {
	if(++numTilesLoaded == 12 * (NUM_LEVELS))
	render();
	}
	imageArray[tileLevel][i].onabort = function() {
	numTilesLoaded++;
	}
	imageArray[tileLevel][i].onerror = function() {
	numTilesLoaded++;
	}
	imageArray[tileLevel][i].crossOrigin = "anonymous";
	imageArray[tileLevel][i].src = 'http://otile1.mqcdn.com/tiles/1.0.0/sat/' + tileLevel + '/' + (tileOffsetX+(i%4)+ '/' + (~~(i/4)+tileOffsetY) + '.jpg');
	}
	}
	}

	var canvas = document.getElementById("viewer");
	var context = canvas.getContext("2d");
	context.fillStyle="#333333";
	context.fillRect(0,0,1024,768);

	NUM_LEVELS = parseInt(queryObj()["maxLevel"] != undefined ? queryObj()["maxLevel"] : 18);
	level = (NUM_LEVELS-1) % 3 + 3;
	loadImages(parseFloat(queryObj()["north"]), parseFloat(queryObj()["east"]));

	</script>
	<div style="text-align: center; margin-top: 868px;">
	<div>
	<font color="white">
	<p>Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank" style="color: rgb(255,255,255)">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"></p>
	</font>
	</div>
	</div>
	</body>
	</html>