Virtual Microscope

We built the NYU VM using freely available software and services. You can use the same approach to build your own VM system.

What you will need:

Digital Slides in the Aperio SVS format.
A computer to convert the SVS files into Google Maps-compatible image tiles. This should be a fast computer running 64 bit linux and ideally SSD drives. This machine should not be the same as your VM application server as the slide processing is very resource intensive while running
Server(s) for your application and your tiled slide images:
- Your application can be in any framework your local development teams work in. The LeafletJS library is Javascript-based and can be easily integrated into any web framework.
- The conversion process converts each SVS file into anywhere from 10,000 to 100,000 individual JPEG tiles, so you may consider separating your application/db and your static image file servers.

Converting Aperio slides for use with a Javascript mapping engine:

To run the conversion command below, you will need to intall the libvips library (https://jcupitt.github.io/libvips). Newer versions of VIPS make the process of converting digital slides into the map tile format much easier and much, much faster. John Cupitt has written an excellent summary guide here: Making DeepZoom, Zoomify and Google Maps image pyramids.

Instructions for installing on Ubuntu or Mint.

Instructions for installing on macOS or Windows.

Once you have VIPS and all its dependencies installed, you can now convert a scanned slide by simply executing the command:

vips dzsave name_of_slide_file.svs name_of_output_directory.zip  --background 0 --centre --layout google

This single line converts the slide, adds a black background, creates a map tile set compatible with Google and Leaflet, and compresses it all into a zip file. This zip file can then be uploaded to your public-facing web file server, expanded, and then used in your custom Javascript code.

Viewing your map tiles using the Leaflet JS Engine

Leaflet is an open source javascript mapping engine. It is natively compatible with the Google Maps tile sets and annotations used previously by the Virtual Microscope. In addition to being free, having a CDN or local installs, it also has a robust set of plugins.

You can see example code and more on their Tutorials Page.

The key configuration to use our tile sets with Leaflet is to define the map's Tile Layer url format. Here is an example from the NYU system:


var slide_url_format = "{{path to the slide directory}}/tile_{z}_{x}_{y}.jpg"

L.tileLayer(slide_url_format, {
  attribution: 'Slide images property and copyright YOUR NAME HERE',
  minZoom:2,
  maxZoom:8
}).addTo(map);

Creating the web-viewer HTML:

This is a code snippet to create an HTML page with a slide viewer that uses a converted slide from the script above. This snippet is just a simple viewer with navigation but no markers or other types of annotations. In combination with the slide converter above, you could use this as a template to build your own database-driven viewer system.

<!DOCTYPE html>
<head>
    <title>NYU School of Medicine Virtual Microscope</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

$(document).ready(function() {

var map = L.map('map', {
                center: [0,0],
                zoom: 2
            });

var slide_url_format = "PATH_TO_TILE_DIRECTORY/{z}/{y}/{x}.jpg"
            
            var layer =  L.tileLayer(slide_url_format, {
                minZoom:2,
                maxZoom:10
            }).addTo(map);

});
    </script>