Shape label plugin for Annotorious and Annotorious OpenSeadragon

Downloads in past


0.2.35 months agoa year agoMinified + gzip package size for @recogito/annotorious-shape-labels in KB


Annotorious Shape Labels
A plugin for Annotorious and Annotorious OpenSeadragon that adds a the first tag as a label to the annotation shape.
Example screenshot


Download the latest minified release or include directly via CDN.
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-shape-labels@latest/dist/annotorious-shape-labels.min.js"></script>

Import via npm:
npm install @recogito/annotorious-shape-labels


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
    <script src="annotorious-shape-labels.min.js"></script>
    <img id="hallstatt" src="640px-Hallstatt.jpg" />

    <script type="text/javascript">
      (function() {
        var anno = Annotorious.init({
          image: 'hallstatt',

          // Add the formatter provided by the plugin
          formatter: Annotorious.ShapeLabelsFormatter()

CSS Styling

The label is inserted into the SVG annotation group as a foreignObject element. In addition, the plugin adds the first tag as an extra CSS class to the annotation shape.
To apply your own CSS styles, follow this structure:
<g class="a9s-annotation FirstTagValue">

  <!-- annotation shapes -->
  <svg class="a9s-formatter-el">
      <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label">