Annotate zoomable high-resolution images by combining Annotorious with OpenSeadragon.


NOTE: OpenSeadragon support is still in BETA. Annotation create & edit in fullscreen mode is not supported yet.

Getting Started

Set up OpenSeadragon with your image just like you normally would. An example (taken from this very page):

var viewer = OpenSeadragon({
  id: "openseadragon",
  prefixUrl: "openseadragon/images/",
  showNavigator: false,
  tileSources: {
    type: 'legacy-image-pyramid',
      url: '2003rosen1799/0001q.jpg',
      height: 889,
      width:  600
      url: '2003rosen1799/0001r.jpg',
      height: 2201,
      width:  1485
      url: '2003rosen1799/0001v.jpg',
      height: 4402,
      width:  2970

Make the image annotatable using the Annotorious JavaScript API.


Important! There's a little limitation that's specific to zoomable images: since OpenSeadragon normally uses the mouse (click and drag) to navigate the map, you need to add some extra JavaScript that toggles between normal image navigation and Annotorious. The example below attaches a call to the activateSelector() API method to an HTML button:

<button onclick="anno.activateSelector();" href="#">

Once the selector is activated, Annotorious takes over the image, and dragging the mouse will create an annotation rather than pan the image. Once the annotation has been created, normal image navigation is resumed. Full documentation of the activateSelector function is on the Wiki.