Overlay Extension For OpenZoom Framework

Screenshot of overlay extension

I just finished up some work on a group of light-weight Actionscript 3 classes that provide mapping-like functionality for use with the OpenZoom ZUI ( zoomable user interace) framework. These classes provide functionality for adding “hotspots” and “paths” to the Open Zoom MultiScaleImage component. Unlike actual mapping software, these classes use standard x & y coordinates relative to the original size of the source image to plot points of interest and paths over a zoomable image.

View Examples:

Download Source Code And Examples:

http://code.google.com/p/ghostinteractive/

Overlays

I have been using the term “overlay” as a catch-all for the different types of visual elements I’ve been working on. Currently there are two types of overlay classes:

Hotspot:
This element is meant to be used as a base class for “marker” elements. These are typically clickable points of interest which when clicked pan, zoom or pan and zoom the image to a specific position and/or depth.

PolylineSegment:
This element uses the flash.display.Graphics class to draw paths around a zoom image. The paths can be used for a number of things including map routes, path based navigation, relational links( think node based graphical displays ), etc… Each connecting line can have unique attributes such as color, thickness, alpha, caps style and others properties related to the Graphics line-style.

Layers

To display the different types of “overlays” each type is managed by a unique “layer” class. This is somewhat of a departure from typical mapping software models. Most mapping software implements a single overlay layer to which any type of overlay can be added. As we add classes to the overlays package we may adopt a similar system but for now we are more interested in a lean implementation than the overhead of unneeded abstraction. Below is a short description of each layer type.

HotspotLayer:
The HotspotLayer manages the positions, depths and visibility of Hotspot sub-classes. It also provides the functionality for zooming and panning to specific points within the image.

PolylineLayer:
This layer contains a list of PolylineSegment sub-classes and draws them. Each time the zoom image pans or zooms the layer redraws the shapes relative in size and position to the original image size.

Simplified code example:

var msImage:MultiScaleImage = new MultiScaleImage();
var hsLayer:HotspotLayer = new HotspotLayer( msImage );
var plLayer:PolylineLayer = new PolylineLayer( msImage );

hsLayer.addHotspot( new CustomHotspot( params:Object ) );

plLayer.addSegment( new PolylineSegment( new Point( 1200, 300 ) );

addChild( msImage );
addChild( hsLayer );
addChild( plLayer );

Download the examples for complete code and further explanation. If you happen to find these classes useful or have suggestions for additions and/or changes leave a comment and let me here about it.

jeremynealbrown.com