March 2, 2009 5:42 PM
Imagine if you could use the same data provider you use for your DataGrid or TileList on a component and it would plot that data on a map based on a "Location" / customizable field. Clicking each item would pop up an item renderer that shows the object associated with that location. Now imagine if changes to your data provider were automatically tracked; you could hold down Control to box select multiple items; you could freely draw on the map with the drawing scaling up and down with the zoom level and you could also save and restore the drawing. Stop imagining. This is exactly what the Flex Datamap control does.

Now that we are done with that grammatically incorrect paragraph, let's get down to business. The primary use case that this control is trying to address is the case where you have data that has location information in it and you want to plot it in a map and show the data associated with that location on clicking it (mapifying a datagrid?). This control is built on top of the excellent Yahoo! AS3 Map component.

Data(map)

Flex Datamap Control

The Flex Datamap control takes in a dataProvider similar to the way List / DataGrid does, checks each object for a mapField property (by default "Location") and plots a marker on the map at that location. Any change to the data provider ArrayCollection now reflects in the map. You can add / edit / remove objects or apply a filter function and have the map update automatically (Similar to how DataGrid, List, etc. operate). Though this may sound trivial, there are some subtle points to note: the bounds of the map and the zoom level are automatically adjusted so as to show all the markers.

Datamap also draws an overlay (which the Yahoo AS3 component has APIs for) and tries to make sure the overlay has more enclosed areas.

Item and Marker Renderers

Clicking a marker pops up an item renderer (which you can change) which pans along with the map (there is some lag though) and correctly clips at the map boundaries. You can also specify a marker renderer to specify how each marker is drawn (this feature is built-in with the Yahoo! AS3 Map Component).

Marker Selection

Clicking a marker selects it and selectedObject will point to the data associated with that marker. Control + Click lets you select multiple markers which are accessible via selectedObjects. You can also select markers by holding down the Control key and drawing a selection box with the mouse. Any markers under the selection box get selected (this is a toggle, so if a selected marker was present, it will get unselected).

Free form drawing on the map

Hold down the Shift key and you can draw on the map. The drawing is recorded based on the latitude / longitude so scales and pans correctly with the map. You can also save this data as a Base64 encoded string and restore it by setting the freeformLinesBase64 property.

Demo

You can try out a demo of the component here. The demo tries to address most of the configurable properties of the control (but properties such as enableDrawMode are not there). Try playing around with the editable DG, changing the item and marker renderers, etc.

Credits

The credit for the idea goes to Ramesh Srinivasaraghavan (our Idea Ninja; officially a Senior Computer Scientist and Platform Evangelist) who heads Adobe's India Evangelism team. The initial idea was "mapifying a datagrid". The credit for implementation (and introducing bugs) goes to yours truly.

Download

You need to download and have the YahooMap SWC present in the libs directory for Datamap to work. Once you have that, grab the datamap SWC from here:

Datamap SWC

Just drop in the Datamap SWC in your libs folder and you should be able to instantiate DataMap from MXML. Remember to set your Yahoo! App ID before using the component.

<controls:DataMap
	yahooAppID="yourappidhere" 
	id="mapGrid"
	dataProvider="{mapColl}" 
	mapClick="mapClick(event)"
	enableDrawMode="true"
	mapDoubleClick="mapDClick(event)"
	geocoderFailure="mapFault(event)"		
	width="75%" height="100%" />

If you want a simple use case of the component, take a look at DataMapSimpleExample.mxml in Datamap Example Source.

The component is licensed under the MPL 1.1 and its source is available for download:

Datamap Source
Datamap Example Source

Warning: There probably are bugs in the component. If you happen to stumble across them, send me a mail and I'll try to get it sorted out.

CategoryFlex Comment(s)

Copyright © 2004-2011 Anirudh Sasikumar. All rights reserved.
Last Updated: March 2, 2009 7:34 PM