OpenSeadragon SVG Overlays JSFiddle Example

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;
						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 */
				// ...
				var set;
				viewer.addHandler('add-overlay', function(event){
					var paper = Raphael(event.element);
					set = paper.set();
					set.push(,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' );
Load Comments...