Skip to content

Instantly share code, notes, and snippets.

@bdunnette

bdunnette/leaflet.html

Last active November 5, 2022 13:57
Show Gist options
  • Save bdunnette/5496485 to your computer and use it in GitHub Desktop.
Save bdunnette/5496485 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet.js as a Whole Slide Viewer
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment