Skip to content

Instantly share code, notes, and snippets.

@shawnbot
Created March 21, 2012 19:36
Show Gist options
  • Save shawnbot/2151822 to your computer and use it in GitHub Desktop.
Save shawnbot/2151822 to your computer and use it in GitHub Desktop.
modestmaps-js zoom drift
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment