terrillo/playground.html

## playground.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<style>
		* {

		    transform-origin: 20% 80%;
		    transition: transform 30s linear;
		}
		body {
			overflow: hidden;
		}
		td {
			width: 100px;
			height: 100px;
		}
		table {
			background: url('tulsa.png');
			background-size: cover;
			cursor: pointer;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
		$(document).ready(function() {

			var mapsize = 100;

			// Rows
			var tr = '<tr></tr>';
			for (i = 0; i < mapsize; i++) {
				tr += '<tr></tr>';
			}


			// Columns
			var td = '<td></td>';
			for (i = 0; i < mapsize; i++) {
				td += '<td></td>';
			}

			// Insert
			$('#grid').append(tr)
			$('tr').each(function() {
				$(this).append(td);
			});

			// Style
			$('#grid').css('width', 100*mapsize);

			$('#grid').bind('wheel mousewheel', function(e){
			    var delta;

			    if (e.originalEvent.wheelDelta !== undefined)
			        delta = e.originalEvent.wheelDelta;
			    else
			        delta = e.originalEvent.deltaY * -1;
					var zoom = $('#grid').css('zoom');
			        if(delta > 0) {
						if(zoom > 0.4) {
			            	$('#grid').css('zoom', '+=0.1');
						}
			        }
			        else{
						if(zoom > 0.5) {
				            $('#grid').css('zoom', '-=0.1');
						}
			        }

					console.log(zoom);
			    });

		});

		$(function(){
			var curDown = false,
			curYPos = 0,
			curXPos = 0;
			$(window).mousemove(function(m){
				if(curDown === true){
					$(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY));
					$(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
				}
			});

			$(window).mousedown(function(m){
				curDown = true;
				curYPos = m.pageY;
				curXPos = m.pageX;
			});

			$(window).mouseup(function(){
				curDown = false;
			});
		});

	</script>

</head>
<body>

	<table id="grid" border="1"></div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style>
	* {

	transform-origin: 20% 80%;
	transition: transform 30s linear;
	}
	body {
	overflow: hidden;
	}
	td {
	width: 100px;
	height: 100px;
	}
	table {
	background: url('tulsa.png');
	background-size: cover;
	cursor: pointer;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
	$(document).ready(function() {

	var mapsize = 100;

	// Rows
	var tr = '<tr></tr>';
	for (i = 0; i < mapsize; i++) {
	tr += '<tr></tr>';
	}


	// Columns
	var td = '<td></td>';
	for (i = 0; i < mapsize; i++) {
	td += '<td></td>';
	}

	// Insert
	$('#grid').append(tr)
	$('tr').each(function() {
	$(this).append(td);
	});

	// Style
	$('#grid').css('width', 100*mapsize);

	$('#grid').bind('wheel mousewheel', function(e){
	var delta;

	if (e.originalEvent.wheelDelta !== undefined)
	delta = e.originalEvent.wheelDelta;
	else
	delta = e.originalEvent.deltaY * -1;
	var zoom = $('#grid').css('zoom');
	if(delta > 0) {
	if(zoom > 0.4) {
	$('#grid').css('zoom', '+=0.1');
	}
	}
	else{
	if(zoom > 0.5) {
	$('#grid').css('zoom', '-=0.1');
	}
	}

	console.log(zoom);
	});

	});

	$(function(){
	var curDown = false,
	curYPos = 0,
	curXPos = 0;
	$(window).mousemove(function(m){
	if(curDown === true){
	$(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY));
	$(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
	}
	});

	$(window).mousedown(function(m){
	curDown = true;
	curYPos = m.pageY;
	curXPos = m.pageX;
	});

	$(window).mouseup(function(){
	curDown = false;
	});
	});

	</script>

	</head>
	<body>

	<table id="grid" border="1"></div>

	</body>
	</html>