Overview

I created a sample program using the Annotorious OpenSeadragon Plugin that allows adding annotations to multiple images loaded from an IIIF manifest file. You can try it at the following link.

https://nakamura196.github.io/nuxt3-demo/annotorious

Source Code

Please refer to the following.

https://github.com/nakamura196/nuxt3-demo/blob/main/pages/annotorious/index.vue

Key Points

npm install –force

The library @recogito/annotorious-openseadragon does not appear to support openseadragon v5, so a forced installation was necessary.

npm error Could not resolve dependency:
npm error peer openseadragon@"^3.0.0 || ^4.0.0" from @recogito/annotorious-openseadragon@2.7.18
npm error node_modules/@recogito/annotorious-openseadragon
npm error   @recogito/annotorious-openseadragon@"^2.7.18" from the root project

plugins

I loaded Annotorious as a plugin.

https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js

Page Navigation

When switching pages, it was necessary to clear annotations once and then load the annotations for the corresponding page.

...

// Reactive object to store annotations for each page
const annotationsMap = ref<{
  [key: number]: Annotation[];
}>({});

...

// Add handler to clear and display annotations on page navigation
  viewer.addHandler("page", () => {
    anno.clearAnnotations();
    showCurrentCanvasAnnotations();
  });

  // Function to display annotations for the current canvas
  const showCurrentCanvasAnnotations = () => {
    const index = viewer.currentPage();
    const annotationsMap_ = annotationsMap.value;

    if (annotationsMap_[index]) {
      annotationsMap_[index].forEach((annotation: Annotation) => {
        anno.addAnnotation(annotation);
      });
    }
  };

...

Summary

By extending this program, it should be possible to connect with other applications. I hope this serves as a helpful reference.