Montag, 25. April 2011

In the YUMA Map Annotation Tool, we're using OpenLayers as our display frontend for viewing high-resolution zoomable images. For a while, I've been playing around with the Seadragon AJAX viewer (aka Seajax), as a possible future alternative.

One 'issue' with OpenLayers in our case is that it's a full-fledge Web GIS environment. Using it as an image viewer is really a bit of a mis-use; and since we've never gotten around to creating an optimized OpenLayers build for our purposes, it also means the YUMA Map Annotation Tool comes with an estimated 500kBytes of JavaScript code that's never used.

Seajax, on the other hand, is less than 50kBytes in size. It's superior in terms of eye candy - with smooth, stepless zooming and a neat inertia effect when panning - and it (optionally) works in conjunction with Microsoft's zoom.it image hosting service. The Seajax API also supports 'map marker'-style icon overlays and rectangle overlays that can be styled via CSS.

The one thing that has been sadly missing from Seajax, however, was free-form vector overlays. I've been doing work with the Raphael vector drawing & animation library previously. Since I thought Raphael would make an excellent complement to Seajax, I thought I'd give it a try and see if they can be combined.

Turns out: they can! With a little tinkering, it's possible to attach Raphael drawing canvases to the Seajax viewer, and scale them smoothly as the viewer zooms.

I started to wrap my experiments into a little utility library. Not quite ready for prime time just yet, but usable enough in case you want to give it a try. Code and instructions are on github; an online demo (which I'll keep updating) is embedded above.