Getting Started with the OpenSeadragon Plugin

The OpenSeadragon plugin is an extension to the OpenSeadragon viewer for zoomable high-resolution images. Click the annotation to edit. Hold SHIFT while clicking and dragging the mouse to create a new annotation.

Download the latest release and include script and stylesheet file in your web page. Make sure to include the script after the OpenSeadragon script.

<!-- CSS stylesheet -->
<link rel="stylesheet" href="annotorious.min.css">

<!-- JS -->
<script src="openseadragon/openseadragon.2.4.2.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>

Alternatively, grab the files from CDN.

<!-- CSS stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@2.1.0/dist/annotorious.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@2.1.0/dist/openseadragon-annotorious.min.js"></script>

Create the viewer and initialize the Annotorious plugin.

<script>
  window.onload = function() {
    var viewer = OpenSeadragon({
      id: "openseadragon1",
      tileSources: {
        type: "image",
        url: "1280px-Hallstatt.jpg"
      }
    });

    // Initialize the Annotorious plugin
    var anno = OpenSeadragon.Annotorious(viewer);

    // Load annotations in W3C WebAnnotation format
    anno.loadAnnotations('annotations.w3c.json');
  }
</script>

The plugin takes a config object as optional second argument. See the API Reference for details.

var anno = OpenSeadragon.Annotorious(viewer, config);

Using NPM

If you use npm, npm install @recogito/annotorious-openseadragon and then

import OpenSeadragon from 'openseadragon';
import * as Annotorious from '@recogito/annotorious-openseadragon';

const viewer = OpenSeadragon({
  id: "openseadragon",
  tileSources: {
    type: "image",
    url: "1280px-Hallstatt.jpg"
  }
 });

const config = {}; // Optional plugin config options

Annotorious(viewer, config);