CODEWITHSUNDEEP
javascripthtmlopenseadragon
Salaar Ahmed Syed
Salaar Ahmed Syed

Reputation: 1

OpenSeadragon Annotorious

So I have been trying to use the annotorius plugin by OpenSeadragon in my website but for some reason the plugin does not even load up. I think there is no issue with the directory part of the things.

Here's my code:


</head>
<body>

<div id="openseadragon1" style="width: 1000px; height: 600px;"></div>
<div id="example-overlay" style = "width: 1000px; height: 600px" ></div>
<script src="openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/openseadragon.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>
<script type="text/javascript">
    console.log(5+6);
   window.onload = function(){
        var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl:     "openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/images/",
        navigatorSizeRatio: 0.25,
        wrapHorizontal:     true,
        tileSources:   {
            height: 512*256,
            width:  512*256,
            tileSize: 256,
            minLevel: 8,

      

            getTileUrl: function( level, x, y ){
                return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
                        (level-8) + "-r" + y + "-c" + x + ".jpg";
        }
}
});
   
  // Initialize the Annotorious plugin
    var anno = OpenSeadragon.Annotorious(viewer);
    // Load annotations in W3C WebAnnotation format
    anno.loadAnnotations('annotations.w3c.json');

    // Attach handlers to listen to events
    anno.on('createAnnotation', function(a) {
      // Do something
      console.log('Created!');
    });
}

</script>
</body>

Upvotes: 0

Views: 1149

Answers (1)

aboutgeo
aboutgeo

Reputation: 302

Sorry for posting this as an "answer", but I don't have the reputation points to comment.

Your code looks completely ok. Is the OpenSeadragon image loading properly? If so, you should be able to start annotating by holding the SHIFT button + click and drag with the mouse.

Does the JS console say anything? Can you confirm that the Annotorious plugin script is properly loaded? (E.g. by putting a console.log(anno) right after the init line?)

Upvotes: 1

Related Questions