Svelte OpenSeadragon

This guide explains how to annotate a zoomable image using OpenSeadragon, Annotorious and Svelte.

Quick Start

Below is a basic example to get you started. The code creates an OpenSeadragon viewer instance, initializesAnnotorious, loads annotations from a file.

<script lang="ts">
  import { onMount } from 'svelte';
  import OpenSeadragon from 'openseadragon';
  import { ImageAnnotation, W3CImageFormat } from '@annotorious/annotorious';
  import { OpenSeadragonAnnotator, MouseOverTooltip, SvelteAnnotator } from '@annotorious/svelte';

  let container: HTMLDivElement;

  let viewer: OpenSeadragon.Viewer;

  let anno: SvelteAnnotator<ImageAnnotation>;

  $: if (anno) anno.loadAnnotations('annotations.json');

  onMount(() => {
    viewer = OpenSeadragon({
      element: container,
      tileSources: {
        type: 'image',
        url:  '/images/my-sample-image.jpg'
      },
      gestureSettingsMouse: {
        clickToZoom: false
      }
    });
  });
</script>

<div class="container">
  <div bind:this={container} class="openseadragon" />

  <OpenSeadragonAnnotator
    viewer={viewer}
    bind:anno={anno} />
</div>

<style>
  .container, .openseadragon {
    height: 100%;
    width: 100%;
  }
</style>

Step-by-Step Guide

Create a container DIV to hold your OpenSeadragon viewer, and bind it to a variable.
```
let container;

// ...

<div bind:this={container} class="openseadragon" />
```

When your component mounts, initialize an OpenSeadragon viewer instance in the container DIV.

onMount(() => {
  viewer = OpenSeadragon({
     element: container,
     tileSources: {
       type: 'image',
       url:  '/images/my-sample-image.jpg'
     },
     gestureSettingsMouse: {
       clickToZoom: false
     }
   });
 });

Use the <OpenSeadragonAnnotator> component from the @annotorious/svelte package to initialize Annotorious on your viewer instance. Optionally, you can bind the anno annotator instance to a variable.
```
<OpenSeadragonAnnotator
  viewer={viewer}
  bind:anno={anno} />
```

Use the anno API to load annotations from a file.

$: if (anno) anno.loadAnnotations('annotations.json');