A deep zoom script that'll allow enlarging of an image but with a "magnifying glass" interface

Question

I'm looking for a tile-based zoom script that'll allow enlarging of an image but with a "magnifying glass" interface.

By "magnifying glass" interface, I mean something like Wadda where a user can click on a certain part of an image and have the surrounding area zoomed in. The zoomed in area is contained in a circle overlaying the thumbnail. Demo of Wadda can be seen here: http://maxpert.github.com/wadda/

This solution is perfect for my intended usage except for the important fact that the script needs to load the entire high-definition image before anything happens. This isn't feasible for my project since my high-definition image can get up to 5000x5000px or above.

Instead of loading the whole high-def image, a tile-based zoom solution like Leaflet - leafletjs.com would be much more suitable. But I still want the "magnifying glass" zoom UX to be similar to Wadda.

My question is: Is there a script (or modification of a script) that combines the UX of Wadda with the tile-based deep zoom of Leaflet?

A user would be able to click on a part of a smaller thumbnail and see the zoomed in area within a circular overlay - where the zoomed in areas are loaded using tile-based loading.

PS: Sorry for the long title. It was difficult to describe what I'm looking for in a short sentence.

Answer 1

High-level answer, with some doubts:

The Leaflet TileLayer class has a tileload event that you can subscribe to. The tiles in Leaflet are img elements, so in this event you could set the title attribute of the img element to a high-res version of the tile, which is what wadda needs.

The problem is that normal tile servers serve tiles which are all of the same size. If you zoom in, you get a higher resolution tile, but of a smaller area. For the wadda to work, I think you'd need a high res tile of the same area. So if the original tile is 256x256px, and you want to zoom up to 2x, the high res URL would have to serve a 512x512px tile of the same area.

On the upside, given a server that does that (or perhaps two servers), I suspect it'd be quite doable like this..

Answer 2

I don't know that this is much help, but I thought I'd add that http://openseadragon.github.com/ (similar technology to Leaflet) uses canvas to render to (on browsers that support canvas, of course), so it may be more in line with what you're trying to do. You could potentially create an OpenSeadragon viewer and then use a clipping region on the canvas it creates. You would of course need to manage its zoom and pan state, as well as moving it around the screen to match the user's mouse.

For that matter, perhaps you could do the same with Leaflet by putting an extremely large border-radius on its containing div.

At any rate, either solution will take a little bit of development, but it seems like it's possible.

I'm involved in the OpenSeadragon project, so if you do end up using it, I'd love to hear about it!