Funky Flickr Flex Widgets

Adding Mapping

The next step is to add a map into the widget so that it displays where the photo was taken when the user selects it. To do this I’m going to use the UMap component from Advanced Flash Components, which is free for non-commercial use. The advantage of the UMap component is that, unlike the Google and Yahoo map components, its license allows you to use the component on any domain.

Download and unzip the UMap component. Then, to add the component, copy the .swc files from the Flex Components folder in the downloaded archive into the libs folder in our FlickrTag project folder.

The complete code for the FlickrTag application with the map installed can be seen in flickrtag2.mxml.

First we increase the height of the widget by adjusting the mx:Application tag:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
   layout="absolute" creationComplete="onStartup()" width="660"  
   height="400" horizontalScrollPolicy="off"  
   verticalScrollPolicy="off">

Inside the <mx:Script> tag we need to import some map classes and add a new variable:
 
import com.afcomponents.umap.overlays.Marker;  
import com.afcomponents.umap.types.LatLng;  
import com.afcomponents.umap.gui.*;  
import com.afcomponents.umap.events.MapEvent;  
import com.afcomponents.umap.core.UMap;  
 
private var map:UMap = null;

We need to adjust the onStartup function to add a mouse click event listener to the images:

private function onStartup() : void {  
 flickrSearch.url = createFlickrURL();  
 flickrSearch.send();  
 for( var imgItem:int = 0; imgItem < ( hbPictures.width - 30 ) / 80; imgItem++ ) {  
   var newImage:Image = new Image();  
   newImage.data = null;  
   newImage.width = 75;  
   newImage.height = 75;  
   newImage.addEventListener(MouseEvent.CLICK,onImageClick);  
   imageItems.push( newImage );  
   hbPictures.addChild( newImage );  
 }  
}

We also need to add a bunch of new mapping functions:

private function createMap() : void {  
 map = new UMap();  
 
 var uic:UIComponent = new UIComponent();  
 uic.setStyle( 'top', 0 );  
 uic.setStyle( 'left', 0 );  
 uic.width = mapArea.width;  
 uic.height = mapArea.height;  
 mapArea.addChild( uic );  
 
 map.setSize( mapArea.width, mapArea.height );  
 map.addEventListener(MapEvent.READY, onMapReady);  
 uic.addChild( map );    
}        
 
private function onMapReady( event:MapEvent ) : void {  
 map.setZoom( 12 );  
 centerMap();  
}  
 
private function centerMap() : void {  
 var lat:Number = Number( imgSelected.data.latitude );  
 var lng:Number = Number( imgSelected.data.longitude );  
 map.setCenter( new LatLng( lat, lng ) );  
 var m:Marker = new Marker( { position:new LatLng( lat, lng ) } );  
 map.addOverlay( m );  
}  
 
private function onImageClick( event:Event ) : void {  
 var clkImg:Image = event.currentTarget as Image;  
 imgSelected.data = clkImg.data;  
 imgSelected.source = clkImg.data.bigSource;  
 imgTitle.text = clkImg.data.title;  
 if ( mapArea.getChildren().length == 0 ) {  
   createMap();  
 } else {  
   centerMap();  
 }  
}  


Finally, we add some new interface elements:

<mx:HBox id="hbDetail" top="110" cornerRadius="15" width="660"  
   height="290" borderColor="#00FF00" borderThickness="3"  
   borderStyle="solid" backgroundColor="#CCFFCC" paddingBottom="10"  
   paddingTop="10" paddingLeft="10" paddingRight="10"  
   horizontalGap="5" horizontalScrollPolicy="off"  
   verticalScrollPolicy="off">  
 <mx:Image id="imgSelected" width="270" height="270"  
     horizontalAlign="center" verticalAlign="middle" />  
 <mx:VBox width="100%" height="100%"  
     horizontalScrollPolicy="off" verticalScrollPolicy="off">  
   <mx:Label id="imgTitle" fontWeight="bold" fontSize="14" />  
   <mx:Canvas id="mapArea" height="230" width="360"  
       horizontalScrollPolicy="off" verticalScrollPolicy="off"  
       clipContent="true" />  
 </mx:VBox>  
</mx:HBox>

The user interface is now divided into two boxes. In the top box is the set of images, and in the bottom box is the map and an enlarged version of the selected image. The map, once initialized, is centered on the latitude and longitude coordinates of the selected image and a marker confirms the location. You can see the result below.

This looks really pretty, but it’s far too big to be included in a web page. Ideally, only the top portion of the widget would be visible. Then, when the user clicks on it the drop-down should appear over the text in the web page. That way the control can take up just a small amount of space until it’s used.