Alrighty Then!

Update: See the FlexMap demo. Combine all possible map sources.

Update: Recently the performance with multiple layers was dramatically improved. Please see the multi-layer demo.

For years we’ve been using a heavily modified Zoomify image component for our mapping products. We started off at flash6 with an as1-component, incrementally modified it to understand coordinates, added events, converted it to as2 … even ported it to flex2/as3 without real rewriting/refacturing. You can imagine how readable, modular and technically up-to-date this component is .

As we’re trying to create an AIR-product (yes, being location based and yes, being demoed here shortly), i was running into several limitations of the original component, biggest being performance. So i finally sat down to write a component of my own.

My design goals were:

• being compatible to our existing map-base (zoomify compatible), with option to implement other access-methods as needed (wms/cached on filesystem …)
• being able to handle multiple layers of information transparently (map/sat-imagery/symbols/geometry)
• separating UI from display-logic, moving/zooming etc.
• implementing different screen update strategies (left-to-right, center-first, fade in …)
• and as a good component being small, scalable, readable and fast.

Some implementation details:

On top there is a Lighttable holding (guess what) different information layers. This is a Canvas (the only component supporting absolute positioning). It handles masking and moving the map. Use addChild to add information layers.

A Layer derives from Canvas. It knows how to redraw and reposition its contents. This is the base class for all information layers. So far there is a MapLayer (holding a single zoomify tile-layer) and an AdaptiveLayer (that chooses automatically the best looking layer) on the mapping side and a SymbolLayer for dataProvider-based symbols. The layers have their clipContent and h/vScrollPolicy turned off, to not show scrollbars and not mask their content at the component border.

SymbolLayer on the one hand fits into the laid out mapping hierarchy, on the other hand implements a flex-standard dataProvider-attribute making it act as a view in a MCV architecture.

The base class Symbol derives from Sprite (for performance reasons, see next post). IconSymbol (derived from Symbol) implements point-information that only needs to be repositioned and displays an icon. GeomSymbol represents geometry that needs a redraw/scale at different levels of zoom. The symbols are completed by BitmapSymbol, TextSymbol and ChartSymbol.

The framework holds several helper classes

• to hold MapInfo and lists thereof (MapInfoList) and
• a prioritizing LoadQueue to explicitly manage load operations
• a ChartRenderQueue to allow charting components to be rendered and positioned in a performant way

This is not yet feature complete (clipping zoom and view is missing), but works really well.

Please check out the (slightly outdated) demo. Be sure to check the map-overlay on germany (change alpha with the small slider) and “add 1K symbols”.

And yes, inquiries welcome .