modestmaps-js zoom drift by shawnbot

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("//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>