bdunnette/leaflet.html

## leaflet.html
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet.js as a Whole Slide Viewer</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.ie.min.css" /><![endif]-->
</head>
<body>
	<div id="map" style="width: 800px; height: 600px"></div>
	Link to this view: <input type="text" id="view_link" size="100" readonly>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
	<script>
		// Get url parameters (from http://blog.thematicmapping.org/2012/10/how-to-control-your-leaflet-map-with.html)
		var params = {};
		window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
		  params[key] = value;
		});

		// Create map
		var map = new L.Map('map', {
		  center: [params.y || -20, params.x || 30],
		  zoom: params.zoom || 3
		});

		// Add layer with slide tiles, e.g. those created by NYU Virtual Microscope tile scripts: https://github.com/PEAC/VirtualMicroscope/tree/master/tiling_scripts
		L.tileLayer('http://160.94.51.203/2338/tile_{z}_{x}_{y}.jpg', {
			maxZoom: 9,
			noWrap: true,
			attribution: 'All data &copy; <a href="http://pathology.umn.edu">University of Minnesota</a>, All Rights Reserved.'
		}).addTo(map);

		function onMapMove() {
		  var newCenter = map.getCenter();
		  var newZoom = map.getZoom();
		  var viewLink = window.location.protocol + window.location.host + window.location.pathname + '?x=' + newCenter.lng + '&y=' + newCenter.lat + '&zoom=' + newZoom;
	          console.log(viewLink);
		  $('#view_link').val(viewLink);
		}

		map.on('moveend', onMapMove);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet.js as a Whole Slide Viewer</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.ie.min.css" /><![endif]-->
	</head>
	<body>
	<div id="map" style="width: 800px; height: 600px"></div>
	Link to this view: <input type="text" id="view_link" size="100" readonly>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
	<script>
	// Get url parameters (from http://blog.thematicmapping.org/2012/10/how-to-control-your-leaflet-map-with.html)
	var params = {};
	window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
	params[key] = value;
	});

	// Create map
	var map = new L.Map('map', {
	center: [params.y \|\| -20, params.x \|\| 30],
	zoom: params.zoom \|\| 3
	});

	// Add layer with slide tiles, e.g. those created by NYU Virtual Microscope tile scripts: https://github.com/PEAC/VirtualMicroscope/tree/master/tiling_scripts
	L.tileLayer('http://160.94.51.203/2338/tile_{z}_{x}_{y}.jpg', {
	maxZoom: 9,
	noWrap: true,
	attribution: 'All data © <a href="http://pathology.umn.edu">University of Minnesota</a>, All Rights Reserved.'
	}).addTo(map);

	function onMapMove() {
	var newCenter = map.getCenter();
	var newZoom = map.getZoom();
	var viewLink = window.location.protocol + window.location.host + window.location.pathname + '?x=' + newCenter.lng + '&y=' + newCenter.lat + '&zoom=' + newZoom;
	console.log(viewLink);
	$('#view_link').val(viewLink);
	}

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