OpenSeadragon: An open-source, web-based viewer for zoomable images, implemented in pure JavaScript, for desktop and mobile.
Raphaël: is a small JavaScript library that should simplify your work with vector graphics on the web.
After researching around, no one seemed to have posted a proper working OpenSeadragon/SVG overlay. Let's get these working together for some rich data overlay goodness:
Step 1: Minimal setup to display the deepzoom image
<div id="openseadragon" style="height: 400px;"></div>
const viewer = OpenSeadragon({
id: "openseadragon",
tileSources: "/img/deepzoom/world-map.dzi"
});
Step 2: Add a full image overlay
/* give it a coloured border just for development testing */
.overlay {
border:thin solid red;
}
// ...
viewer.addHandler('open', function(event){
var elt = document.createElement("div");
elt.className = "overlay";
var dimensions = viewer.source.dimensions;
viewer.addOverlay({
element: elt,
location: viewer.viewport.imageToViewportRectangle( new OpenSeadragon.Rect(0, 0, dimensions.x, dimensions.y) )
});
});
Step 3: Add a Raphaël JS canvas to the overlay layer and transform it on load and animate
This method maintains the original image coordinate system for the Raphaël canvas.
/* scale the svg/vml layer to the full overlay dimensions */
.overlay>*{
height:100%;
width:100%;
}
// ...
var set;
viewer.addHandler('add-overlay', function(event){
var paper = Raphael(event.element);
set = paper.set();
set.push( paper.circle(4096,2102.5,1000).animate({fill: "#223fa3", "fill-opacity": 0.5}, 2000) );
transform( set )
});
viewer.addHandler('animation', function(event){
transform( set )
});
function transform( el ){
var zoom = viewer.viewport.viewportToImageZoom( viewer.viewport.getZoom(true));
el.transform( 'S'+zoom+','+zoom+',0,0' );
}