is there any example on how to load & remove additional tiled images when zooming in / out? This way the browser would only have to handle a subset of tiled images (reduced level of detail) & might be more performant.
I tried to figure out how to do this. Its a shame, that I do not have the programming skills to do that :( I ended up with this:
viewer.addTiledImage({
tileSource: 'g2.dzi',
x: 0.2,
y: 0.1,
width: 0.01,
opacity: 0
});
viewer.addHandler('bookmark-url-change', function(event) {
var zoom = viewer.viewport.getZoom();
if (zoom >= 2) {
viewer.world.getItemAt().setOpacity(1)
} else if (zoom < 2) {
viewer.world.getItemAt().setOpacity(0)
}
});
It would be great, if you could help me to get it right. Thanks!
This should work:
// Before this presumably you have made a viewer with a single image.
viewer.addTiledImage({
tileSource: 'g2.dzi',
x: 0.2,
y: 0.1,
width: 0.01,
opacity: 0
});
viewer.addHandler('zoom', function(event) {
var topImage = viewer.world.getItemAt(1);
if (topImage) {
var zoom = viewer.viewport.getZoom();
if (zoom >= 2) {
topImage.setOpacity(1)
} else if (zoom < 2) {
topImage.setOpacity(0)
}
}
});
I haven't tested, but it should be the general right idea.