Adding/positioning independent overlays to openseadragon images and related error message

Question

I am following the Basic Single-Row Tile Source Collection example with the same configurations and tile sources as mentioned in the example.

I am now trying to add overlays on the first and second image but having trouble doing it.

The first overlay should have been positioned on top of the first image and the second overlay should have been placed on the second image but its not happening that way..

I am adding the overlays collection to the tileSources collection.

Are the overlays not independent for different pages?

Also, I get the below error in console after adding the overlays, I do not understand how I can use TiledImage.imageToViewportRectangle in such basic initialization of the plugin.

[Viewport.imageToViewportRectangle] is not accurate with multi-image; use TiledImage.imageToViewportRectangle instead

.

Codepen example URL: https://codepen.io/hussainb/pen/QQPPvL

Codepen Code:

html:

<div id="overlays">
    <div id="overlay1">Overlay One</div>
    <div id="overlay2">Overlay Two</div>
</div>

<div id="viewer"></div>

css:

    body {
        margin:0;
        padding:0;
    }
    #viewer {
        width:100%;
        height: 600px;
        margin: auto;
        background-color: lightgray;
    }
    #overlay1, #overlay2 {
        width: 100px;
        height: 100px;
        background-color:powderblue;
    }

Javascript:

$( document ).ready(function(){

        var viewer = OpenSeadragon({
            id: "viewer",
            prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
            debugMode: false, //if you want to see the render grid

            collectionMode: true,
            collectionRows: 1,
            collectionTileSize: 1024,
            collectionTileMargin: 256,

            tileSources: [
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                    ,
                    overlays: [{
                        id: 'overlay1',
                        px: 100,
                        py: 0,
                        width: 200,
                        height: 200,
                        className: 'filter'
                    }]
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    },
                    overlays: [{
                        id: 'overlay2',
                        px: 100,
                        py: 0,
                        width: 500,
                        height: 500,
                        className: 'filter'
                    }]
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                }
            ]
        });


})

Answer 1

Looks like this is a bug with OpenSeadragon! Here's the issue ticket:

https://github.com/openseadragon/openseadragon/issues/1412

You can work around it by storing your overlays separately and adding them after the images have opened, something like so (assuming you've already created a viewer):

var overlaySets = [
  [{
    id: 'overlay1',
    px: 100,
    py: 0,
    width: 200,
    height: 200,
    className: 'filter'
  }],
  [{
    id: 'overlay2',
    px: 100,
    py: 0,
    width: 500,
    height: 500,
    className: 'filter'
  }]
];

viewer.addHandler('open', function() {
  overlaySets.forEach(function(overlaySet, setIndex) {
    var tiledImage = viewer.world.getItemAt(setIndex);
    if (!overlaySet || !tiledImage) {
      return;
    }

    overlaySet.forEach(function(overlay) {
      var rect = new OpenSeadragon.Rect(overlay.px, overlay.py, overlay.width, overlay.height);
      rect = tiledImage.imageToViewportRectangle(rect);
      overlay.x = rect.x;
      overlay.y = rect.y;
      overlay.width = rect.width;
      overlay.height = rect.height;
      delete overlay.px;
      delete overlay.py;
      viewer.addOverlay(overlay);
    });
  });
});

You can see this in action here:

https://codepen.io/iangilman/pen/aqgzJZ