The World is Flat

And 65.572.864 x 65.572.864 pixels in size. Or at least that's what the dimensions of the OpenStreetMap Mapnik base layer are, according to the OSM Wiki! Attaching a custom (i.e. non-Deep Zoom) tile source to Seadragon AJAX is really straightforward. To try this out, I added a simple OpenStreetMap Mapnik tile source implementation to my No.5 Seajax Utilities library. Demo embedded below, code on github as usual.



As a little more complex exercise, I've also added a tilesource implementation for the Tile Map Service (TMS) spec. TMS is also one of OpenLayers' supported formats, and you can generate TMS tilesets with tools such as MapTiler or (our own) MagickTiler.

Unfortunately, TMS has a little 'structural incompatiblity' with the Deep Zoom format, which will let TMS images appear slightly shifted to the lower left in Seajax. Eventually, I'd also like to add a Zoomify tilesource implementation (if there's ever the time to do it - the Math is slightly more complex there...). Zoomify wouldn't have this particular issue.

One issue that would remain, however, is the rather unattractive lines that show along the tile boundaries as the image zooms. (You can see it in the OSM demo above as well.) It's an issue the Seajax viewer generally has with any tile format that doesn't have overlapping tiles (that is to say ANY format except Deep Zoom...). And I'd really love to see it fixed. The Flash-based OpenZoom viewer doesn't have the same issue. So technically, I assume, there would be a way around. But right now it's probably wishful thinking, as official (open source) development on Seajax seems to be on hold. Hoping for the best that some's going to pick up on development! But at least there's some activity in that direction...

Tweet

Raphael Vector Overlays for Seadragon AJAX

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.

Tweet