View on GitHub

Virtual Microscope

NYU School of Medicine Virtual Microscope Application

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:


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.

On Ubuntu or Mint, you can install with:

sudo apt-get install libvips
sudo apt-get install libvips-tools

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);

Viewing your map tiles using the Google Maps API

Within Google maps you need a custom Javascript function to tell the Maps API how to load your slide images (more about that here https://developers.google.com/maps/documentation/javascript/maptypes ).

Once you have the unzipped slide tiles on your server, then to use the new slide tiles in Google Maps, just update your tile url javascript function to (full example below):

function customGetTileURL(a,b) {
    return "{{path to the slide directory}}/" + b + "/" + a.y + "/" + a.x + ".jpg"
}
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. You will need to sign up for a Google Maps API key to run this.