example: overlays

Overlays are an important mechanism for adding additional infomation channels in a deep zoom image. Below we present just a few examples of how to add some simple overlays.

( Tile source in this example is from Chronicling America at the Library of Congress )

Tile source overlays.

Highlighted overlays are very useful for directing users attention to specific areas of interest, though the style is often decided based on the specific content being presented.

OpenSeadragon makes it easy to declare highlighted areas and control the presentation through simple css mechanisms. A tile source overlay is specific to the particular tile source. So if you have a sequence of tile sources and want to over lay unique content on each, use this mechanism.

The relevant configuration options are shown below. Note the className and id attributes will be passed to the overlay element so you can use bind css styles and events to it. Be sure to put your styles in the document head, inside the openseadragon viewer element, or apply them dynamically so they will persist when full screen mode is entered. 

    OpenSeadragon({
        ...
        tileSources: [{
            ...
            overlays: [{
                id: 'example-overlay',
                x: 0.33, 
                y: 0.75, 
                width: 0.2, 
                height: 0.25,
                className: 'highlight'
            }],
            ...
        }]
        ...
    });
Viewport overlays.

OpenSeadragon also supports overlays that persist accross image sequences. In this case the overlay is simply configured outside of the tileSource.

This example also demonstrates the ability to configure the overlay position in terms of image pixel coordinates. The difference is infered by use of px, and py, instead of x and y. 

        OpenSeadragon({
            ...
            overlays: [{
                id: 'global-overlay-filter',
                px: 0, 
                py: 0, 
                width: 6425, 
                height: 8535,
                className: 'filter'
            }],
            ...
        });
Overlaying complex html.

By default OpenSeadragon checks for an existing element in the DOM that matches the id of the overlay id (if one is specified). If that content is found, OpenSeadragon will use it for the overlay, otherwise it will create a link to ensure keyboard accesibilty to the target ( as in the examples above ).

In this example we display some additional metadata to the right of the image itself.

Title:
The San Francisco call. : (San Francisco [Calif.]) 1895-1913
Alternative Titles:
  • Call
  • Call chronicle examiner
  • Call-chronicle-examinerApr. 19, 1906
  • Sunday call <Dec. 5, 1901>
Preceding Titles:
        OpenSeadragon({
            ...
            preserveViewport: true,
            showNavigator: false,
            minZoomLevel:  1,
            overlays: [{
                px: 6425,
                py: 0,
                width: 6425,
                height: 8535,
                id: 'html-overlay'
            }],
            tileSources: [{
                width: 6425,
                height: 8535,
                tileSize: 256,
                tileOverlap: 1,
                getTileUrl: chronicling_america_example(1)
            },{
                ...
            }]
            ...
        });