Tile-source-specific overlays break in multi-image

@hussainb reports:

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.

https://codepen.io/hussainb/pen/QQPPvL

Sure enough, when you include overlays on a per-tileSource basis when you create your viewer, we use the global imageToViewportRectangle instead of the tiledImage-specific one, which we should use.

I think the solution is probably to pass the tiledImage into the addOverlay call in open here:

https://github.com/openseadragon/openseadragon/blob/master/src/viewer.js#L628

…and then get it to getOverlayObject where it can be used for the imageToViewportRectangle call:

https://github.com/openseadragon/openseadragon/blob/master/src/viewer.js#L2348

[hussainb]

@iangilman , awsome it works! thank you!

[iangilman]

Here’s an updated example:

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

Note that I’m just changing the font size. I’m using the viewport-change event, as that’ll create the smoothest animation. To get the proper font-size, we have to calculate the zoom factor based on the zoom value and the width of all the images (world.getHomeBounds).

By the way, if you want everything in your overlays to zoom with the images, you might look into the SVG overlay plugin:

https://github.com/openseadragon/svg-overlay

It uses SVG instead of HTML, but everything scales exactly.