shawnbot/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://raw.github.com/stamen/modestmaps-js/master/modestmaps.js"></script>
        <style type="text/css">
            html, body, #map {
                position: absolute;
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            #output {
                font-family: Monaco, monospace;
                font-size: 10px;
                line-height: 14px;
                position: absolute;
                bottom: 10px;
                left: 10px;
                width: 80%;
                z-index: 100;
            }
        </style>
    </head>
    <body>
        <div id="map">
            <textarea id="output" rows="0"></textarea>
        </div>
        <script type="text/javascript" defer>
            var provider = new MM.TemplatedLayer("http://acetate.geoiq.com/tiles/acetate/{Z}/{X}/{Y}.png"),
                map = new MM.Map("map", provider, null, []);
            map.setCenterZoom(new MM.Location(2.511, -75.057), 8);

            function flot(n) { return n.toFixed(2); }
            function ctos(c) { return ["C(", flot(c.row), ", ", flot(c.column), " @ ", ~~c.zoom, ")"].join(""); }
            function ctol(c) { return map.coordinateLocation(c);}
            function ltos(l) { return ["L(", flot(l.lat), ", ", flot(l.lon), ")"].join(""); }
            function percent(n) { return (Math.abs(n) * 100).toFixed(0) + "%"; }
            function drift(a, b) {
                var delta = new MM.Location(b.lat - a.lat, b.lon - a.lon);
                return [ltos(delta), [percent(delta.lat / a.lat), percent(delta.lon / a.lon)].join(", ")].join(" ");
            }

            var output = document.getElementById("output");
            function log() {
                var message = Array.prototype.join.call(arguments, " ");
                output.value += message + "\n";
                output.rows = output.value.split("\n").length - 1;
            }

            var i = 1,
                steps = 5;
            log("zooming out from", map.getCenter(), steps, "times...");
            function zoomOut() {
                var previous = map.coordinate,
                    previousLocation = ctol(previous);
                log(i, "from:", ctos(previous), ltos(previousLocation));

                map.zoomOut();

                var current = map.coordinate,
                    currentLocation = ctol(current);
                log("    to:", ctos(current), ltos(currentLocation), "drift:", drift(previousLocation, currentLocation));

                if (i++ < steps) {
                    setTimeout(zoomOut, 2000);
                }
            }
            zoomOut();
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://raw.github.com/stamen/modestmaps-js/master/modestmaps.js"></script>
	<style type="text/css">
	html, body, #map {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#output {
	font-family: Monaco, monospace;
	font-size: 10px;
	line-height: 14px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 80%;
	z-index: 100;
	}
	</style>
	</head>
	<body>
	<div id="map">
	<textarea id="output" rows="0"></textarea>
	</div>
	<script type="text/javascript" defer>
	var provider = new MM.TemplatedLayer("http://acetate.geoiq.com/tiles/acetate/{Z}/{X}/{Y}.png"),
	map = new MM.Map("map", provider, null, []);
	map.setCenterZoom(new MM.Location(2.511, -75.057), 8);

	function flot(n) { return n.toFixed(2); }
	function ctos(c) { return ["C(", flot(c.row), ", ", flot(c.column), " @ ", ~~c.zoom, ")"].join(""); }
	function ctol(c) { return map.coordinateLocation(c);}
	function ltos(l) { return ["L(", flot(l.lat), ", ", flot(l.lon), ")"].join(""); }
	function percent(n) { return (Math.abs(n) * 100).toFixed(0) + "%"; }
	function drift(a, b) {
	var delta = new MM.Location(b.lat - a.lat, b.lon - a.lon);
	return [ltos(delta), [percent(delta.lat / a.lat), percent(delta.lon / a.lon)].join(", ")].join(" ");
	}

	var output = document.getElementById("output");
	function log() {
	var message = Array.prototype.join.call(arguments, " ");
	output.value += message + "\n";
	output.rows = output.value.split("\n").length - 1;
	}

	var i = 1,
	steps = 5;
	log("zooming out from", map.getCenter(), steps, "times...");
	function zoomOut() {
	var previous = map.coordinate,
	previousLocation = ctol(previous);
	log(i, "from:", ctos(previous), ltos(previousLocation));

	map.zoomOut();

	var current = map.coordinate,
	currentLocation = ctol(current);
	log(" to:", ctos(current), ltos(currentLocation), "drift:", drift(previousLocation, currentLocation));

	if (i++ < steps) {
	setTimeout(zoomOut, 2000);
	}
	}
	zoomOut();
	</script>
	</body>
	</html>