e-n-f/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <style>
      body { margin:0; padding:0; background:black; }
      #map { position:absolute; top:0; bottom:0; width:100%; background:black; }
    </style>
  </head>
<body>
<div id='map'></div>
<script type='text/javascript'>

var args = [ 15, 41.8, -87.6, "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ];

function parseHash(map, hash) {
  if (hash.indexOf('#') === 0) {
    hash = hash.substr(1);
  }
  var hashargs = hash.split('#');
  if (hashargs.length >= 4) {
    args = hashargs;
  }
}

var map = L.map('map', {zoomAnimation: false});

parseHash(map, location.hash);

var zoom = parseInt(args[0], 10);
var lat = parseFloat(args[1]);
var lon = parseFloat(args[2]);

var i;
for (i = 3; i < args.length; i++) {
  console.log("layer " + args[i]);
  map.addLayer(L.tileLayer(args[i], { maxZoom: 22 }));
}

map.setView([lat, lon], zoom);

function onMapMove() {
  var center = map.getCenter();
  var precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));

  var hash = '#' + map.getZoom() +
             '#' + center.lat.toFixed(precision) +
             '#' + center.lng.toFixed(precision);

  var i;
  for (i = 3; i < args.length; i++) {
    hash = hash + '#' + args[i];
  }

  location.replace(hash);
}

map.on("moveend", onMapMove, this);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

	<style>
	body { margin:0; padding:0; background:black; }
	#map { position:absolute; top:0; bottom:0; width:100%; background:black; }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script type='text/javascript'>

	var args = [ 15, 41.8, -87.6, "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ];

	function parseHash(map, hash) {
	if (hash.indexOf('#') === 0) {
	hash = hash.substr(1);
	}
	var hashargs = hash.split('#');
	if (hashargs.length >= 4) {
	args = hashargs;
	}
	}

	var map = L.map('map', {zoomAnimation: false});

	parseHash(map, location.hash);

	var zoom = parseInt(args[0], 10);
	var lat = parseFloat(args[1]);
	var lon = parseFloat(args[2]);

	var i;
	for (i = 3; i < args.length; i++) {
	console.log("layer " + args[i]);
	map.addLayer(L.tileLayer(args[i], { maxZoom: 22 }));
	}

	map.setView([lat, lon], zoom);

	function onMapMove() {
	var center = map.getCenter();
	var precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));

	var hash = '#' + map.getZoom() +
	'#' + center.lat.toFixed(precision) +
	'#' + center.lng.toFixed(precision);

	var i;
	for (i = 3; i < args.length; i++) {
	hash = hash + '#' + args[i];
	}

	location.replace(hash);
	}

	map.on("moveend", onMapMove, this);
	</script>
	</body>
	</html>