Sunday, April 06, 2008

comparative genomics with openlayers

Traditional genome browsers, look like this. In fact, I think that's the most popular genome-browser used--gbrowse. They display information in tracks, so any layer of annotation you just add on to the bottom of the image (after making the image taller). This doesnt work for genome-browser, the hack of openlayers to support only horizontal scrolling, because you if you have 2 adjacent tiles, if one has more features than the next, there's not guarantee that they'll be the same height, and no guarantee that a feature that's on both images will align correctly.

I was just hacking around, trying to test some work I'd done and realized that you can have annotation layers with OpenLayers, just add another map, and tie them together!

So that's 2 OpenLayers.Map() instances. What makes this easy is the new Map.panTo() methods in OpenLayers 2.6 (which is in release candidate 1). So, the top map registers for 'move' and 'zoomend' events with callbacks that update the bottom map with the position/zoom of the top map.
That's it! And layers of annotation are available, along with the slippy map. OpenLayers continues to amaze.
That site with the linked maps is here.


Bao said...

Your AJAX-ed genome browser looks very cool, is it a part of GeVO? Some time ago, I stumbled upon another browser (you may already know), X:map (, notice that it supports panning both horizontally and vertically, although there's no functionality gain there.

brent said...

it's used in gevo:
however, it's licensed (MIT) separately and completely independent, but the demos all use GeVO images.
i've seen XMap. and i've done a fair bit of hacking on googlemaps myself.
But, you cant beat openlayers functionality, community, and general awesome-ness. and now that the vector stuff is getting more and more impressive, i'd like to make use of that.